uni微信小程序优化,自动添加全局组件

在网页可以很轻松的添加一个类似tip的全局组件,但是在微信小程序,每个页面都是单独的,无法使用全局组件,
基于此限制,我写了一个自动在每个页面添加组件的webpack插件。

实现方法

方法大家应该都能想到,在main.js里使用vue.component()来注册全局vue组件,然后在每个页面的vue的文件里面
的template插入全局组件的标签就好了。
源码位置: uni-optimize

使用方法

chainWebpack: config => {
        config
        .plugin("importPlugin")
        .use(importPlugin,[
            // 数组里面每一个对象就是一个全局组件
            {
                // 组件在页面里的标签名
              name: "ii",
              // 组件针对config的地址
              src: "./src/com/ii.vue",
              // 不包含哪些页面,没有就是全部页面
              excludeFun: (filePath) => {
                const ignore = ["./src/views/Home.vue"];
                return ignore.some((item) => filePath.includes(item));
              },
                // 标签的传参,最后变成
                //   <ii 
                //    fa="123"
                //    @er="cc"
                //   />
                // 标签的传参,如果要接收子组件的emit,最好在子组件通过this.$parent.cc来判断父组件是否有这个方法以防报错,
                // 父组件的方法需要自己收到加,不支持slot
              paramFun: () => {
                return [
                  {
                    key: "fa",
                    value: "123",
                  },
                  {
                    key: "@er",
                    value: "cc",
                  },
                ];
              },
            },
          ])
      }
posted @ 2022-06-17 11:50  爱吃巧克力的狗  阅读(926)  评论(0)    收藏  举报