uni-app小程序全局组件的优化

878 阅读2分钟

1. 背景

小程序无法动态引入组件,必须要页面或组件内预先写好,也就是预埋。

之前我们函数式调用通用 dialog,往往是这样:

import CommTipsDialog from 'xx/path/comm-tips-dialog';

CommTipsDialog.show({
  title: '提示',
  content: err.err_msg || err.err_desc || err.msg,
  confirmText: '我知道了',
  cancelText: '',
}).then(() => {
})
  .catch(() => {

  });

上面方式其实是,参考了Vant的Dialog函数式调用的方案,针对我们业务做了些交互和样式上的调整,核心逻辑如下:

function initInstance() {
  if (instance) {
    instance.$destroy();
  }

  const dialogId = 'xxx';
  const oldDialog = document.getElementById(dialogId);
  if (oldDialog) {
    document.body.removeChild(oldDialog);
  }
  const dialogRootDiv = document.createElement('div');
  dialogRootDiv.id = dialogId;

  document.body.appendChild(dialogRootDiv);
  instance = new (Vue.extend(VueDialog))({
    el: dialogRootDiv,
  });
}

function Dialog(options) {
  if (!instance || !isInDocument(instance.$el)) {
    initInstance();
  }
  Object.assign(instance, Dialog.currentOptions, options);
}

Dialog.show = (options) => {
  Dialog({
    ...options,
  });
  return instance.showDialog().then((val) => {
    instance = null;
    return Promise.resolve(val);
  })
    .catch((err) => {
      instance = null;
      return Promise.reject(err);
    });
};

可以看到关键是调用了 document.body.appendChild 将弹窗挂载在DOM上,然后返回了实例的Promise,所以调用方就可以链式调用。

2. 适配

小程序要想这样做,需要改造下面几个部分:

  1. 弹窗关闭后不能再调用 $destroy,否则下次无法唤起
  2. 更改传递 options 的方式,否则会报不能修改 props 的错误
  3. 预先把组件放到页面根元素下

下面是上述几点的适配方案:

第1点比较简单,关闭时判断下当前环境,如果是小程序,则仅隐藏,不销毁。

第2点,有两个解决方案,一是再嵌套一层 inner.vue 子组件,二是改造传参方式。 因为既然我们能拿到组件实例 instance,和它上面的方法 showDialog,直接在调用此方法时传入就可以了,然后把之前的 props 改成 data。

第3点,也有两个解决方案,一是手写,不过项目越大,工作量越大,也容易出错,二是写个loader,在编译前动态插入全局组件,目前采用的是第二种方案。并且可在config.js 下 injectComponents 中配置要注入的组件,如:

injectComponents: [ // 注入哪些公共组件
  {
    name: 'CommDialog', // 组件名称
    id: 'comm-tips-dialog', 
  },
],

后续接入其他全局组件,也十分方便。

对比下 h5 项目,其实我们改造的第3点,就是 App.vue 中的内容。