久等了，我来看下这个问题，我看到评论中提到的一些解决方案有平台限制，我研究下，有进展我会更新到这里。

# 多端通用的 uniapp 怎么设置共用的组件

uniapp 怎么设置所有页面共用的组件
https://ask.dcloud.net.cn/question/70510

我看了评论区各位的反馈，有的讨论已经大大拓展了最初的问题，也有热情的社区用户贡献了技术方案，特别感谢他们，为他们点赞。

很多人争论的点，是使用场景不同，小程序、app 环境会有一些限制，不能直接使用浏览器 h5 的方案，这样导致了一些用户评论的误解。我整理下不同的业务场景，供不同需求的人使用。下面场景始终考虑多端。

前置共识：

- 在小程序运行环境和 h5 不同，没有 document 方法，也就不能创建元素、插入元素。
- 小程序环境中，彼此页面独立
- uni-app 在 vue2 中使用 webpack 工具，在 vue3 中使用 vite 工具。

## 场景 1： 最简单的组件复用

无论是 h5、小程序、app 都遵循 vue 的写法，引入组件 - 使用组件。

也就是组件需要先引用注册，再去使用。在 vue2/vue3 中引入组件都一致。

## 场景 2：组件不想每次都 import 引入

组件每次都需要 import，推荐使用 easycom 功能。

> easycom 是 HBuiderX 2.5.5 可用的功能，早期的讨论可能没注意到

使用 easycom 自动注册方案，使用 `uni-app` 提供的功能特性，自动按照规则自动匹配，直接使用
https://uniapp.dcloud.net.cn/collocation/pages.html#easycom

省去了导入的方案，效果和场景 1 一样，正常使用组件。

## 场景 3：想自定义实现 uni.showToast

uni-app 内置的 [uni-showToast](https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast) 可以通过函数调用实现消息弹窗，这个在小程序端是依赖小程序本身提供的功能做的包装。比如微信小程序提供了 `wx.showToast` 方法。

有的业务想拓展功能、更改样式，符合自己的业务逻辑。比如评论里提到的全局剪切板弹窗、全局悬浮球等。在 web/app 中很容易实现，但在小程序端不能实现，因为小程序本身不支持动态创建。那要怎么做呢？看看小程序组件库就知道了。

在小程序组件库中，为了解决这个场景，一般需要在 template 里使用组件，在逻辑中控制组件显隐，说到底是要保证弹窗里的元素在页面中存在，等待唤起生效。

伪代码如下：

```html
<xx-popup show="{{ show }}" bind:close="onClose">内容</xx-popup>
```


如果不想在模版中声明组件，可以考虑在编译时候自动填充内容。举例子，比如用户这样伪代码：

```html
<template>
<view>123</view>
</template>
```

通过编译器插件编译时候追加元素。

```html
<template>
<my-toast ref='mytoast' />
<view>123</view>
</template>
```

也就是说，这个组件声明是必须存在的，只是由谁来完成。

在 uni-app 的工具链中，使用了 webpack/vite，社区热心的用户已经开发了对应的插件功能。

比如：

- webpack 方案 `vue-inset-loader` ，核心思路是调整 webpack 配置使用 loader，对文件进行中间处理。文档地址 https://ask.dcloud.net.cn/article/39345 仓库地址 https://github.com/1977474741/vue-inset-loader
- vite 插件方案 `vue3-inset-loader`，和上面思路一致，vite 方向的插件，仓库地址 https://github.com/smartXJ/vue3-inset-loader/tree/main

两个方案，都使用了相同的配置，不需要额外学习配置方法。由衷感谢社区的共享方案，大家有时间可以给点点 github star。

## 场景 4：想实现 app.vue 的效果

这里讨论比较多，用户想和 web 一样，对 app.vue 进行修改，实现一劳永逸的效果。如果考虑多端实现，就不能这样做。因为 app.vue 在小程序端不参与页面渲染。[app.vue 地址](https://uniapp.dcloud.net.cn/collocation/App.html)

技术实现思路是，使用一个自定义组件放在页面顶部，通过插槽 slot 编写具体的页面逻辑，可以实现整体页面的包装。这种方案比较直观，同样可以实现场景 3 的需求。

```html
<template>
<my-page>
<view>123</view>
</my-page>
</template>
```

这里推荐社区热心用户 自学的烦恼，提供的方案 https://ext.dcloud.net.cn/plugin?id=2560

## 总结

可以看到，最终还是因为平台限制不能想 web 一样灵活，产生了各种变通方案。

如果上面提到的场景，还不能满足你的需求和使用场景，你可以提供你的发行方案，描述使用场景反馈给我。