全局组件

全局组件

13 人关注该话题

uniapp怎么设置所有页面共用的组件 全局组件
负责人:DCloud_UNI_OttoJi

分类: uni-app DCloud_UNI_OttoJi 2024-01-31 15:27  回复问题 • 74 人关注 • 45 个回复 • 38267 次浏览

uniapp app 端定义全局组件 动态加载 全局组件 uniapp

分类: uni-app 爱豆豆 2023-09-14 09:45  回复问题 • 3 人关注 • 1 个回复 • 168 次浏览

uni-app怎样实现类似于vue的router-view功能或nuxt中<nuxt />功能 全局组件 切换页面

分类: uni-app hhyang 2023-07-20 00:40  回复问题 • 6 人关注 • 2 个回复 • 5403 次浏览

ap端全局组件如何使用???? 全局组件

分类: uni-app / nvue LAO_WUUAN 2023-06-20 06:30  回复问题 • 4 人关注 • 4 个回复 • 157 次浏览

如何全局使用呢,不用在一个页面写一次 全局组件

分类: uni-app DCloud_heavensoft 2023-03-11 13:59  回复问题 • 1 人关注 • 1 个回复 • 146 次浏览

Uniapp 怎么全局监听弹窗? 全局组件

分类: uni-app 1***@qq.com 2023-03-03 14:25  发起问题 • 0 人关注 • 0 个回复 • 253 次浏览

在globalStyle中设置原生子窗体的话调用show方法不显示 subnvue 全局组件

分类: uni-app note744917 2023-03-01 20:11  发起问题 • 1 人关注 • 0 个回复 • 174 次浏览

纯NVUE项目如何实现全局加载通用模板组件,类似uni.showModal() 全局组件

分类: uni-app / nvue FullStack 2023-02-24 11:24  回复问题 • 2 人关注 • 1 个回复 • 210 次浏览

全局组件怎么弄? vue3 nvue 全局组件

分类: uni-app / nvue DCloud_UNI_YRJ 2022-12-26 11:45  回复问题 • 1 人关注 • 1 个回复 • 151 次浏览

【报Bug】npm安装的组件,如果设置成全局对象, 编译到APP会失效 (小程序和H5正常) 全局组件

分类: HBuilderX Revonic 2022-11-24 16:52  回复问题 • 6 人关注 • 9 个回复 • 4643 次浏览

uiapp 如何实现消息全局提醒,不管在那个页面都能收到提醒消息。 全局组件

分类: uni-app BoredApe 2022-10-24 17:05  回复问题 • 2 人关注 • 1 个回复 • 541 次浏览

请问uniapp 在app端如何实现公共层组件(做公告) 全局组件

分类: uni-app 1***@163.com 2022-10-24 09:19  回复问题 • 4 人关注 • 3 个回复 • 2537 次浏览

更多...
1

赞同来自: 1***@qq.com

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

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

uniapp 怎么设置所有页面共用的组件
https://ask.dcloud.net.cn/quest... 显示全部 »
久等了,我来看下这个问题,我看到评论中提到的一些解决方案有平台限制,我研究下,有进展我会更新到这里。

# 多端通用的 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 一样灵活,产生了各种变通方案。

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

引用超级全局组件方案 微信小程序 全局组件

分类: uni-app 9***@qq.com2024-02-18 14:46  评论文章 • 87 个评论 • 15932 次浏览

在uni-app main.js 中定义3个全局方法的例子 全局组件

分类: uni-app LAO_WUUAN2023-06-20 06:11  发表文章 • 0 个评论 • 363 次浏览

全端通用nvue组件库unify_ui 不错 全局组件 ui组件 nvue

分类: uni-app / nvue 陌小白2020-08-07 10:51  发表文章 • 0 个评论 • 1050 次浏览

更多...