uniapp中全局页面挂载组件（小程序，h5），UniApp全局页面挂载组件详解（小程序与H5端）

摘要：，，在uniapp中，全局页面挂载组件是一种常见的小程序和H5页面开发技术。通过挂载组件，开发者可以在整个应用程序的多个页面中共享某些功能或数据。这种技术有助于提高开发效率和用户体验。在小程序中，全局页面挂载组件可以通过特定的API和配置实现，而在H5页面中，可以通过Vue插件或自定义指令等方式实现。使用全局页面挂载组件可以方便地管理页面间的交互和共享资源，提高应用的性能和响应速度。

使用easycom的好处：

• 简化组件的使用，提高开发效率。
• 不论组件目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用非常友好。

说明：

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。
• easycom方式引入组件是局部（按需）引入，例如在H5端只有加载相应页面才会加载使用的组件。
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入。
• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件），不处理后缀为.nvue的组件，但vue组件也可以全端运行，包括小程序和app-nvue，可以参考uni ui，使用vue后缀，同时兼容nvue页面。
• nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉，这种情况同样支持easycom。

示例：

```json

"easycom": {

"autoscan": true,

"custom": {

"^xxx-(.*)": "@/components/xxx-$1/index.vue" // 匹配components目录内xxx-**下的vue文件

}

},

```

文件创建方法：

上面的方法挂载后，每个页面需要单独写组件的标签，只是不需要引入。

2. 使用vue-inset-loader（方法仅限于vue版本为2和在小程序中使用）

步骤：

1. 初始化uniapp项目：使用npm init命令。
2. 下载vue-inset-loader：使用npm i vue-inset-loader命令。
3. 创建vue.config.js文件，由于从HBuilder X创建的uniapp项目没有vue.config.js文件，所以需要建一个，在该文件中配置webpack，以便使用vue-inset-loader。
4. 创建组件。
5. 全局引入组件并注册到全局，可以在main.js文件中完成此操作。
6. 在pages.json文件中配置insetLoader。
可以在某个路由里单独引入某些组件，同时也可以在公共方法中封装使用。 需要注意的是，在H5页面使用时需要特殊处理动态挂载组件。 示例代码：

...

完整示例代码包括创建和配置vue-inset-loader的步骤以及如何在项目中全局或局部使用它，同时提供了处理H5页面动态挂载组件的方法，具体实现细节可以根据实际需求进行调整和优化。