uniapp 小程序 全局弹窗 每个需要使用的页面都不用再引用，Uniapp小程序全局弹窗，无需重复引用，轻松实现页面弹窗功能

摘要：uniapp小程序中，全局弹窗功能允许开发者创建一个通用的弹窗组件，可以在整个小程序中的任何页面使用，无需在每个页面单独引用。这一特性简化了开发流程，提高了开发效率，使得弹窗组件可以统一管理和维护。使用全局弹窗，开发者能够轻松地在不同页面展示统一的提示、警告、确认等弹窗，提升用户体验。

文章目录

1、创建组件

2、在项目的根目录下的vue.config.js中配置

3、页面中使用全局组件

创建组件

在项目的components 目录中创建组件目录/组件vue，确保目录命名与组件名称一致，可以创建一个名为MyComponent 的组件，并将其放置在/components/MyComponent 目录下，注意确保组件的命名和目录结构符合 Vue 的规范。

在项目的根目录下的vue.config.js中配置

以下是配置文件的示例内容，用于对 Vue 项目进行配置：

module.exports = {
  transpileDependencies: ['uview-ui'], // 适配特定依赖库的编译设置
  configureWebpack: { // 对 webpack 进行配置
    devServer: {
      disableHostCheck: true // 禁用主机检查，允许跨主机访问开发服务器
    }
  },
  chainWebpack: config => { // 对 webpack 配置进行链式操作
    config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
      const compile = options.compiler.compile; // 获取原有编译函数
      options.compiler.compile = (template, ...args) => { // 修改编译函数逻辑
        if (args[0].resourcePath.match(/^pages/)) { // 如果是页面相关的资源路径，则进行模板处理
          template = template.replace(/* 这里添加模板替换逻辑 */); // 根据需求进行模板替换操作
        }
        return compile(template, ...args); // 使用原有编译函数进行编译操作
      };
      return options; // 返回修改后的配置选项
    });
  }
};

请根据实际情况和需求进行配置文件的调整，这些配置可以帮助你根据项目需求定制 Webpack 的行为，优化项目的构建性能。

页面中使用全局组件

在页面中使用全局组件时，首先需要声明全局组件，与普通的组件声明不同，全局组件的声明方式更为特殊，在页面中使用全局组件时，可以通过以下方式调用组件中的方法：

this.$refs['new-gift-coupon'].show();

这里的show 函数是组件的 methods 中声明的函数，通过这种方式，可以直接在页面中调用组件的函数，无需在页面中再次引用组件，这种方式简化了页面与组件之间的交互，提高了代码的可维护性和复用性，请确保在使用全局组件时遵循 Vue 的最佳实践，并遵循项目中的代码规范。