>首页> IT >

每日看点!聊聊使用Uniapp怎么实现全局消息提示及其组件

时间:2022-06-23 05:50:35       来源:转载
Uniapp中怎么实现全局消息提示及其组件?下面本篇文章给大家介绍一下Uniapp全局消息提示及其组件的实现方法,希望对大家有所帮助!

实现

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将会是我们传入的提示消息参数

<script></script>

(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,支持正则,比如匹配任意标签 ".*"

labelrootEle支持在单独页面的style里配置,优先级高于全局配置

总结

关键词: 我们需要 遇到一个问题