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 @   爱吃巧克力的狗  阅读(851)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示