注册登录

a***@sina.cn

发布：2019-02-04 21:56
更新：2024-01-04 18:08
阅读：20618

uni-app 超级全局组件如何注册？

分类：uni-app

需求：做一个自定义模态框，所有页面都能使用，不需要在需要使用的页面上写上组件代码，直接在js中就可以输出这个模态框。

正常Vue的做法：在App.vue上加上自定义组件，就能实现在其他Vue页面上调用

&amp;lt;template&amp;gt;  
&amp;lt;f7-app :params=&amp;quot;f7params&amp;quot;&amp;gt;  
&amp;lt;f7-statusbar&amp;gt;&amp;lt;/f7-statusbar&amp;gt;  
&amp;lt;f7-view id=&amp;quot;main-view&amp;quot; url=&amp;quot;/&amp;quot; main&amp;gt;&amp;lt;/f7-view&amp;gt;  
&amp;lt;自定义组件&amp;gt;&amp;lt;/自定义组件&amp;gt;  
&amp;lt;/f7-app&amp;gt;  
&amp;lt;/template&amp;gt;

在uni-app上却无法实现这个诉求，在uni-app的App.vue上是没有template代码的，如果在App.vue加上任何<template>的代码都会导致空白页面。
所以想要使用自定义的组件需要在每一个需要的页面上的<template>里输入<组件></组件>才能使用，对于类似这种经常要用到的组件会非常的不方便，请问如何解决这个需求？

2019-02-04 21:56 负责人:无分享

15 个回复

最佳回复

DCloud_UNI_GSQ

全局组件的使用在main.js里配置，hello uni-app内也有示例，可以参考一下。
另外你的代码乱了

更新：新版uni-app已经支持easycom，无需考虑全局组件，想在什么地方用，就在什么地方用，https://uniapp.dcloud.io/collocation/pages?id=easycom

小张没有名字

请问具体是哪一个文件呢?

2019-02-11 14:35
DCloud_UNI_GSQ

回复小张没有名字:main.js

2019-02-12 10:50
小张没有名字

回复 DCloud_UNI_GSQ:谢谢

2019-02-14 11:57
突然好想你

回复小张没有名字:没有看到对应的实例，你成功了吗？想自定义toast。不想在每个页面写一遍

2019-02-19 16:58
小张没有名字

@462716549@qq.com:成功了.

2019-02-21 09:40
迪丽热bug

回复小张没有名字: 你好可以兼容小程序吗

2019-10-08 12:03
t***@126.com

回复小张没有名字: 你是怎么做的

2021-06-10 16:13
鹅鹅鹅鹅

回复迪丽热bug: 刚写了个loader，小程序也可以实现这个效果https://ask.dcloud.net.cn/article/39345

2021-09-23 12:05

DCloud_heavensoft

main.js里配全局组件。
更新：新版uni-app已经支持easycom，无需考虑全局组件，想在什么地方用，就在什么地方用，https://uniapp.dcloud.io/collocation/pages?id=easycom

yixin2020

配置全局组件不难，我需要的是全局挂载，有几十个页面都用到了抽屉组件，不想每个页面都挂载一次呀。相当于以前vue里的这种做法。-> https://www.jianshu.com/p/b931abe383e3

2019-07-19 22:00
DCloud_heavensoft

回复 yixin2020: 看hello uni-app的main.js，里面的page-head组件在main.js里定义和注册后，每个vue页面之前敲<page-head>就可以

2019-07-19 22:05
yixin2020

回复 DCloud_heavensoft: 我就是不想在每个vue页面之前敲<page-head>

2019-07-19 22:10
DCloud_UNI_GSQ

回复 yixin2020: 不敲是不行的，编译器不会推测出你期望的插入位置。

2019-07-20 11:19
5***@qq.com

好多少掉的功能，唉

2019-09-22 17:25
DCloud_UNI_GSQ

回复 5***@qq.com: 在非H5端由于环境限制不能100%和H5端一致

2019-10-08 12:13
5***@qq.com

回复 DCloud_UNI_GSQ: 你们摇钱树优化把打包后的picker优化掉了，再优化一下吗，关掉摇钱树文件太大不舒服

2019-10-08 20:33
DCloud_UNI_GSQ

回复 5***@qq.com: 收到

2019-10-10 10:52
拓荒

回复 DCloud_heavensoft: 能不能不用在一个页面的模板部分在引入这个组件，而实现一个组件可以在全部页面都可以使用呢？

2019-11-19 13:37
1***@qq.com

回复 DCloud_heavensoft: 好啦！已经成功了

2020-01-09 10:44
ahhhhhhh

回复 yixin2020: 有好的解决方法吗

2020-03-23 23:11
ahhhhhhh

回复 1***@qq.com: 怎么成功的啊

2020-03-23 23:12
DCloud_heavensoft

回复 ahhhhhhh: 新版uni-app已经支持easycom，无需考虑全局组件，想在什么地方用，就在什么地方用，https://uniapp.dcloud.io/collocation/pages?id=easycom

2020-03-24 06:45
ahhhhhhh

回复 DCloud_heavensoft: 这个功能跟全局组件差不多啊，我想要的是每个页面都显示一个浮窗，相当于App.vue里如果可以写内容的话，每个页面都有这块内容

2020-03-24 09:14
DCloud_heavensoft

回复 ahhhhhhh: 不一样，全局组件，在不使用的页面也消耗资源。easycom是纯按需加载的

2020-03-24 18:59
ahhhhhhh

回复 DCloud_heavensoft:嗯嗯，好的。那每个页面要都要展示的组件，只能每个页面都写一遍吗

2020-03-25 09:22
LunaMinus

回复 DCloud_heavensoft: 关键是想要一个全局悬浮球。document.body挂载不上

2020-08-25 10:42
鹅鹅鹅鹅

回复 yixin2020: 刚写了个loader，小程序也可以实现这个效果https://ask.dcloud.net.cn/article/39345

2021-09-23 11:50
鹅鹅鹅鹅

回复 ahhhhhhh: 刚写了个loader，小程序也可以实现这个效果https://ask.dcloud.net.cn/article/39345

2021-09-23 11:51

1***@qq.com

有个方式大概可以实现，就是自定义一个容器组件（比如custom-page），每个页面都引入custom-page作为最外层组件，以后想要添加任何全局组件，只需要在custom-page中添加即可，调用的地方不需要每次手动引入，避免修改太累，缺点就是没有用到的全局组件的页面，可能会出现冗余情况

a***@sina.cn (作者)

你这个还不如手动引用组件呢, 你这个设想只适合用大多的页面都有重复组件要用的情况下, 这样的话可以自己弄个全局骨架, 包括头部导航底部导航,飘浮球等常用组件

2021-06-16 21:28
鹅鹅鹅鹅

回复 a***@sina.cn: 刚写了个loader，小程序也可以实现这个效果https://ask.dcloud.net.cn/article/39345

2021-09-23 11:50

zhouijiajia

@小张没有名字怎么弄得，可以分享一下吗

yixin2020

同样遇到这个问题，请问是怎么处理的？

问问情 - 人生工具，辨人识人，情有多深

每个页面都需要敲page-head,真是不应该！好愚的，好愚笨的，应该推翻

龙雨溪

怎么推？

2020-01-13 16:34
DCloud_heavensoft

用pages.json的globalstyle里的原生导航就好了。自定义导航怎么能每个页面都用，那个是不得以才用的

2020-01-14 23:14
LunaMinus

回复 DCloud_heavensoft: 比如我有一个悬浮球，是所有页面都要显示的，h5的话，直接挂载在document.body上就可以全局显示，但是在app里面，就不行。

2020-08-25 11:03
DCloud_heavensoft

回复 LunaMinus: h5是单页的，非h5是多页的。App全局悬浮，需要使用plus.nativeObj来画一个悬浮球

2020-08-26 14:34
LunaMinus

回复 DCloud_heavensoft: 你好，请问一下有例子么？全局应该在哪里初始化？

2020-08-27 18:15

FakerLee

我自定义了一个loading，怎么在app.vue里面引入啊？这个组件不能放在某个具体页面啊，就跟uni.showLoading一样是在js中控制的

DCloud_heavensoft

为什么要在app.vue里引用？app.vue里又不显示任何界面。你只要符合easycom规范，想在哪个页面里用就随便用

2020-04-27 19:10
ahhhhhhh

回复 DCloud_heavensoft: 说的场景都不一样

2020-04-30 15:01
侯小方

回复 DCloud_heavensoft: 层主的需求和我应该是一样的。就是在app.vue 中进行版本更新。目前只能通过 uni.showLoading 在js 中控制。要想自定义loading 来实现监听app下载进度。这种有没有什么好的办法代替呢？

2021-07-08 17:36

不是发哥

main.js设置全局组件：

import FAB from '@/components/FAB';  
Vue.component('FAB', FAB);

FakerLee

@DCloud_heavensoft 我再替题主和我自己解释一下问题
如图所示，我需要自定义一个Loading组件，DOM所在的层级位置和uni-modal一样，与uni-page是兄弟元素。在我的状态管理store中，随时可以显示这个loading组件，它和哪个页面都没关系

DCloud_UNI_GSQ

H5端可以，其他端不能，其他端每个页面都是渲染在不同原生容器中的且不允许直接操作dom。

2020-04-28 18:19
今天回复我了吗

回复 DCloud_UNI_GSQ: 如果是H5 在像这样子与uni-page是兄弟元素

2021-12-02 18:43
今天回复我了吗

楼主有什么解决方案吗

2021-12-02 18:43

猎宝 - 大大大大大菠菜丶

这个全局的弹出层，目前还是无解吗？

我想做的是一个别人分享后，我复制完分享的内容。打开APP就能弹出别人分享的相应的商品。就需要一个全局的弹出层。有可能是在任何页面弹出。

目前还是无解吗？

DCloud_UNI_GSQ

App、H5都能做全局弹窗。小程序不能，因为小程序没有相关接口。

2020-05-28 18:27
猎宝

回复 DCloud_UNI_GSQ: APP怎么做啊？

2020-05-28 19:20
DCloud_UNI_GSQ

回复猎宝: 插件市场搜全局弹窗

2020-06-01 15:05
鹅鹅鹅鹅

刚写了个loader，小程序也可以实现这个效果https://ask.dcloud.net.cn/article/39345

2021-09-23 11:55

zhaiduting

我也碰到这问题了

6***@qq.com

快2023年了，这个问题还没解决。唉

小白请指教 - 小白一个

希望早点可以解决这个问题实现全局的组件调用类似uni.showloading 这样的方式

3***@qq.com

遇到同样的问题了这个问题是有没有解决方案了？

xiaoliangmiao

今天试了一天自定义全局modal，要想实现之间用api调用只能在h5里才能使用，因为只有h5才能实现document.body.appendChild(instance.$el);，在app端，即使获取了body元素，也没有appendChild方法可以使用。
第二种方式就是使用全局组件，但是必须在使用的页面挂载组件，并且像在网络请求全局拦截的时候使用必须的在调用改接口的页面挂载组件，这样就很冗余复杂，希望可以出个解决方案。

要回复问题请先登录或注册

uni-app 超级全局组件如何注册？

15 个回复

公告

相关问题

uni-app 超级全局组件如何注册？

与内容相关的链接

15 个回复

公告

相关问题