功能说明

在 uniapp 小程序中实现全局组件的插件，支持：

1. 自动实现全局引入组件
2. 根据调用方法按需引入组件
3. 支持 webpack/vite 配置

使用说明

需要先在 uniapp 的 components 中，创建组件；我们创建组件base-confirm和base-loading

在 webpack 中使用

添加npm包

npm install @ur-uniapp-global-component/webpack -D

在config.vue.js文件中配置

const path = require("path");

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: {
            // 使用HBuilder构建的项目
            // loader: path.resolve(__dirname,'./node_modules/@ur-uniapp-global-component/webpack'),
            // 使用cli构建的项目
            loader: "@ur-uniapp-global-component/webpack",
            options: {
              // HBuilder构建项目，默认地址
              // pagesPath: path.resolve(__dirname,'.'),
              // cli构建项目，默认地址
              pagesPath: path.resolve(__dirname, "./src"),
              // rewrite: "uni.$global", // 默认$refs
              components: [
                {
                  code: `<base-confirm ref='confirm'></base-confirm>`,
                  global: true,
                },
                {
                  code: `<base-loading ref='loading'></base-loading>`,
                  global: false,
                },
              ],
            },
          },
        },
      ],
    },
  },
};

在 vite 项目中使用

添加npm包

npm install @ur-uniapp-global-component/vite -D

在vite.config.js文件中配置

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import globalComponent from "@ur-uniapp-global-component/vite";
import path from "path";
export default defineConfig({
  plugins: [
    globalComponent({
      // HBuilder构建项目，默认地址
      // pagesPath: path.resolve(__dirname,'.'),
      // cli构建项目，默认地址
      pagesPath: path.resolve(__dirname, "./src"),
      // rewrite: "uni.$global", // 默认$refs
      components: [
        {
          code: `<base-confirm ref='confirm'></base-confirm>`,
          global: true,
        },
        {
          code: `<base-loading ref='loading'></base-loading>`,
          global: false,
        },
      ],
    }),
    uni(),
  ],
});

配置说明

pagesPath

定义pages.json文件所在目录地址，插件会从pages.json中获取页面路径，然后只在页面文件上添加全局组件

components

code定义插入的组件代码，global为true时，表示组件代码全局插入，为false时会根据调用方法引入

rewrite

重写调用方法。

在组件为根据调用方法引入时，默认会在代码中查找$refs.{name}，根据 name 与组件代码的 ref 名称匹配，然后在页面中插入组件代码；

rewrite 重新调用的代码，如设置为uni.$global，插件就会去查找uni.$global.{name}，然后配置组件代码，而不再是$refs.{name}。

这个配置项可以实现在页面外调用全局组件，在main.js中定义：

uni.$global = {
  confirm: function (options) {
    // 在这里，你可以添加你自己的代码，例如修改options或者添加新的行为
    console.log("showToast", options);
    // eslint-disable-next-line no-undef
    var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    page.$vm.$refs.confirm.show({
      message: "提示",
      vertical: "bottom",
    });
  },
};

在非页面文件中，就可以操作全局组件了；但是在非页面文件中调用，不会被插件检测到，不会引入按需组件。