uniapp 全局组件,uniapp全局变量四种实现方式
Uni中如何实现全局消息提示及其组件？以下文章介绍了Uniapp全局消息提示的实现方法及其组件，希望对你有所帮助！
UNI-APP开发(仿饿)开发课程：进入学习
最近有一个项目需求，我们可以在H5和小程序中实时全局刷新消息，并在全局范围内进行消息提示。提示组件也需要一个自定义样式。第一，刷新实时消息只有两种，一种是短轮询，一种是长轮询。
所谓短轮询，实际上就是前端用定时器每隔一定时间向后端发起请求，后端需要对轮询请求进行优化。
长轮询意味着向后端发送消息请求，挂起请求，等待来自后端的新消息，然后重新发起消息请求。其实就是一个websocket通信。鉴于项目上线时间和成本，最终选择短轮询，在App.vue中进行全局消息提示
实现
1.短轮询请求-App.vue中
async created(){ const _ this=thisetinterval(async()={
const res=await _this。$ajax({
URL:`/API/通知/状态
})
if(res.data.code===200){
常数值=res.data.data.hasNew
_这个。$store.commit({type: changeNew ，value})
}
},6000)
}
2.全局消息提示组件
在消息请求之后，需要有一个全局自定义组件来显示消息，但是有一个问题，就是在Unipp中，
虽然App.vue是uni-app的主要组件，但是所有页面都在App.vue下切换，app . vue是一个页面入口文件。但是App.vue本身不是页面，所以不能在这里写视图元素。这个文件的功能包括：调用应用生命周期函数，配置全局样式，配置全局存储globalData。即在App.vue中，只能写js和css，不能挂载视图元素。那么，js中可以这样使用组件吗？$消息？我想到了用vue中的vue.prototype.$message挂载全局组件的方法。
(1)定义一个GlobalMessage.vue组件
自定义一个消息提示组件，text将是我们传入的提示消息参数。
模板
div class=消息容器
全局消息提示{{text}}
/div
/模板
脚本/脚本
style lang=scss 范围。消息容器{
位置：固定；
top:10%；
z指数：2000；
左：10%；
宽度：200px
高度：200px
背景色：红色；
}
/style
（2）新建GlobalMessage.js
介绍自定义组件。vue.extend可以使用基本的vue构造函数来创建子类。参数是包含组件的对象。对象的示例如下：
{
模板：，
data(){
返回{
属性
}
}
}但是此时并没有创建组件实例，需要用new方法创建。这些参数包括创建的组件的Dom节点和组件的内部属性。然后使用document.body.appendChild将组件呈现到主体中。此时，我们已经可以调用这个方法来全局安装定制组件了。
函数showMessage(文本，持续时间){
const MessageDom=新的MessageConstructor({
el:document.createElement(div )，data(){
返回{text:text，
}
}
})document . body . appendchild(MessageDom。$el)
}接下来，我们需要在vue原型上挂载这个方法，以便可以这样使用。$message。我们在vue.prototype上挂载$message并导出这个方法。
函数registryMessage(){
vue . prototype . $ message=show message
}
导出默认注册表消息GlobalMessage.js全部代码
从“vue”导入vue
从导入GlobalMessage。/global message . vue ；
const message constructor=vue . extend(global message)
函数showMessage(文本，持续时间){
const MessageDom=新的MessageConstructor({
el:document.createElement(div )，data(){
返回{text:text，
}
}
})
document . body . appendchild(MessageDom。$el)
}
函数registryMessage(){
vue . prototype . $ message=show message
}
导出默认注册表消息
（3）main.js中
介绍一下我们抛出的方法，用Vue.use进行全局注册，这样就可以用这个了。$快乐留言。
从导入GlobalMessage。/global message . js ；
//也可以在这里直接执行。
toastRegistry()vue . use(global message)；使用
这个。$message(测试数据)
3.小程序中如何实现
超导制造，刚好能用这个。$message，但遇到了另一个问题。小程序中没有文档。我们来看看uni-app的官方文档：
Uni-app的js API由标准ECMAScript的js API和Uni扩展API组成。
标准ECMAScript的js只是最基础的js。在此基础上，浏览器扩展了窗口、文档和导航器等对象。小程序还基于标准js扩展了wx.xx、my.xx、swan.xx等多种API。Node还扩展了fs等模块。
Uni-app基于ECMAScript扩展了Uni对象，API命名兼容小程序。Uni-app js代码，h5在浏览器中运行。非h5端(包括小程序和app)，Android平台运行v8引擎，iOS平台运行iOS自带的jscore引擎，两者都不运行浏览器和webview。非H5端，不支持window、document、navigator等浏览器的js API
uni-app的Js API
那么要求就无法完成。我们采用另一种方案，用vuex状态机控制全局状态，把自定义组件放在需要的页面中，用状态机控制消息的提示内容、显示和隐藏。注意：请自行安装和配置vuex。
main.js中的全局注册组件
从“@/components/common/global message . vue”导入GlobalMessage
Vue.com组件( GlobalMessage ，global message)在需要的页面上放置全局消息组件，但是我们需要在每个页面上添加组件标签，这实在是一种让人无法忍受的方式。所以看了一些文档，我们在jy文章里发现了一个工具Vue-insert-loader。
4.vue-inset-loader的使用
我们来看加载器的提示：在编译阶段在sfc模板的指定位置插入自定义内容，适用于webpack构建的vue应用，常用于小程序需要全局引入组件的场景。(因为小程序没有打开根标签，所以没有办法在根标签下追加全局标签，所以要使用组件，必须在当前页面引入组件标签)，而这个插件正好可以帮助我们全局追加组件标签。
嵌入式装载机
（1）安装
npm安装vue-插入-加载程序-保存-开发
（2）vue.config.js注入loader
没有vue.config.js。请创建一个新文件。
模块：{
规则：[
{
测试：/。vue$/，
使用：{
加载器：“vue-inset-loader”
////为Hbuilder工具创建的单应用程序项目
//loader:path . resolve(_ _ dirname，。/node _ modules/vue-inset-loader’)
}
}
]
},
//支持自定义pages.json文件路径
//选项：{
//pagesPath:path . resolve(_ _ dirname，。/src/pages . JSON’)
//}
（3）pages.json配置文件中添加insetLoader
insetLoader: {
配置:{
消息:全局消息/全局消息，
},
//全局配置
标签:[确认]，
rootEle:div
},
pages: [
{
path : pages/tabbar/index/index ，
样式:{
NavigationBarTitleText :测试页，
//单独配置，用法与全局配置一致，优先级高于全局配置。
标签:[确认， abc]，
rootEle:div
}
},
]配置描述config(默认值：{})定义标签名称和内容的键值对。标签(默认：[])需要全局引入。打包后，这个标签rootEle的根元素的标签类型(默认：“div”)将被引入到所有页面中。默认值是div，支持正则化。例如，匹配任何标签。* " label和rootEle可以配置成单独页面的样式，具有优先级。
总结
虽然实现了全局消息提示，但是在小程序中，这种方法还是太麻烦了，需要在每页上追加全局组件标签。希望大家能有更好的方法，不吝赐教。
推荐：《uniapp教程》以上是讲如何使用Uniapp实现全局消息提示及其组件的细节。更多请关注其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。