聊聊使用Uniapp怎么实现全局消息提示及其组件

2022-12-20 22:53| 来源: 网络整理| 查看: 265

首页 > 开发

聊聊使用Uniapp怎么实现全局消息提示及其组件 Posted on 12/17/2022 | by liu

web前端|uni|app

uni-app web前端-uni-app

Uniapp中怎么实现全局消息提示及其组件？下面本篇文章给大家介绍一下Uniapp全局消息提示及其组件的实现方法，希望对大家有所帮助！

libevent 源码下载,vscode左边的工具栏,ubuntu 终端位置,看tomcat日志常用,爬虫星球exo,php ci 事务,汉阳区seo网络推广公司,做cpa色诱网站用什么域名空间建站lzw 手机电商源码,vscode安装插件离线包,ubuntu设置dock,获取tomcat版本信息,爬虫网站原理,php文件打开方式,太原企业seo推广费用多少,室内装修网站html源码企业,wap asp网站模板下载lzw

实现

网站监控源码,Ubuntu右键弹出终端,tomcat9cors跨域,利用爬虫创意挣钱,php编程教程零基础外包,seo人员插件lzw 1.短轮询请求-App.vue中 async created(){const _this=thissetInterval(async ()=>{const res=await _this.$ajax({url:`/api/notice/status` }) if(res.data.code===200){const value=res.data.data.hasNew _this.$store.commit({type: 'changeNew', value}) } },6000) } 2.全局消息提示组件

消息请求后需要有一个全局的自定义组件来展示消息，但是遇到一个问题，那就是在Unipp中，虽然App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。也就是App.vue中只能进行js以及css的编写，而不能挂载视图元素，那么是否可以在js中像使用this.$message一样使用组件呢，我想到了Vue中使用vue.prototype.$message挂载全局组件的方式。

(1)定义一个GlobalMessage.vue组件

自定义一个消息提示组件，text将会是我们传入的提示消息参数

全局消息提示 {{text}} .message-container{ position: fixed; top: 10%; z-index: 2000; left: 10%; width: 200px; height: 200px; background-color: red; } （2）新建GlobalMessage.js

将自定义组件引入，vue.extend可以使用基础的Vue构造器，创建一个子类，参数是一个包含组件的对象。对象示例如下：

{template:'',data(){ return { 属性 } }}

但此时创建的并非组件实例，需要通过new 方式创建组件实例，参数包括创建的组件Dom节点，组件内部属性。然后使用document.body.appendChild将组件渲染到body中，此时我们已经可以调用此方法，将自定义组件挂载到全局。

function showMessage(text,duration){ const MessageDom=new MessageConstructor({ el:document.createElement('div'),data(){ return {text:text, } } })document.body.appendChild(MessageDom.$el)}

接下来我们需要将该方法挂载到vue原型上，从而能够像this.$message一样使用，我们在vue.prototype上挂载$message，并将此方法导出。

function registryMessage(){ vue.prototype.$message=showMessage}export default registryMessage

GlobalMessage.js全部代码

import vue from "vue"import GlobalMessage from './GlobalMessage.vue';const MessageConstructor= vue.extend(GlobalMessage)function showMessage(text,duration){ const MessageDom=new MessageConstructor({ el:document.createElement('div'),data(){ return {text:text, } } }) document.body.appendChild(MessageDom.$el)}function registryMessage(){ vue.prototype.$message=showMessage}export default registryMessage （3）main.js中

将我们抛出的方法引入，使用Vue.use进行全局注册，这样就可以愉快的使用this.$message了。

import GlobalMessage from "./GlobalMessage.js";// 这里也可以直接执行 toastRegistry()Vue.use(GlobalMessage);

使用

this.$message('测试数据') 3.小程序中如何实现

超导马得，刚刚能够全局使用this.$message，但是又遇到一个问题，小程序中没有document，我们看uni-app官方文档：

uni-app的js API

那么需求不能不完成，我们采用另外一套方案，使用vuex状态机来进行全局状态控制，将自定义组件放在需要的页面中，使用状态机来控制消息的提示内容以及展示与隐藏。注：请自行安装配置vuex。

import GlobalMessage from '@/components/common/GlobalMessage.vue';Vue.component('GlobalMessage',GlobalMessage)

在需要的页面放置GlobalMessage组件，但是我们需要每个页面都要加组件标签，实在是一个难以忍受的方式，于是在翻阅一些文档后，在jy文章中发现一个工具vue-inset-loader

4.vue-inset-loader的使用

vue-inset-loader

（1）安装 （2）vue.config.js注入loader

没有vue.config.js请新建文件。

module: { rules: [ { test: /.vue$/, use:{ loader: "vue-inset-loader" // // 针对Hbuilder工具创建的uni-app项目 // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader") } } ]},// 支持自定义pages.json文件路径// options: {// pagesPath: path.resolve(__dirname,'./src/pages.json')// } （3）pages.json配置文件中添加insetLoader "insetLoader": { "config":{ "message": "", }, // 全局配置 "label":["confirm"], "rootEle":"div"},"pages": [ { "path": "pages/tabbar/index/index", "style": { "navigationBarTitleText": "测试页面", // 单独配置，用法跟全局配置一致，优先级高于全局 "label": ["confirm","abc"], "rootEle":"div" } },]

配置说明config (default: {}) 定义标签名称和内容的键值对label(default: []) 需要全局引入的标签，打包后会在所有页面引入此标签rootEle(default: "div") 根元素的标签类型，缺省值为div，支持正则，比如匹配任意标签 “.*”

✔ label 和 rootEle 支持在单独页面的style里配置，优先级高于全局配置

总结