一、前言

最近有項(xiàng)目需求我們能夠在H5及小程序中全局實(shí)時(shí)刷新消息，并且在全局做一個(gè)消息提示，提示組件也需要自定義樣式，首先實(shí)時(shí)消息的刷新無(wú)非有兩種，一種是短輪詢(xún)，一種是長(zhǎng)輪詢(xún)。
所謂短輪詢(xún)，其實(shí)就是前端使用定時(shí)器，在一定間隔時(shí)間內(nèi)向后端發(fā)起請(qǐng)求，并且后端需要對(duì)輪詢(xún)請(qǐng)求做優(yōu)化。
長(zhǎng)輪詢(xún)則是將消息請(qǐng)求發(fā)送到后端后，請(qǐng)求掛起，等待后端有新消息返回后，再重新發(fā)起消息請(qǐng)求，實(shí)則是一個(gè)websocket通信，鑒于項(xiàng)目上線時(shí)間以及成本，最后選擇短輪詢(xún)方式，且全局消息提示在App.vue中進(jìn)行。

二、實(shí)現(xiàn)

1.短輪詢(xún)請(qǐng)求-App.vue中

   async created(){
	const _this=this
	setInterval(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.全局消息提示組件

消息請(qǐng)求后需要有一個(gè)全局的自定義組件來(lái)展示消息，但是遇到一個(gè)問(wèn)題，那就是在Unipp中， 雖然App.vue是uni-app的主組件，所有頁(yè)面都是在App.vue下進(jìn)行切換的，是頁(yè)面入口文件。但App.vue本身不是頁(yè)面，這里不能編寫(xiě)視圖元素。這個(gè)文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲(chǔ)globalData。也就是App.vue中只能進(jìn)行js以及css的編寫(xiě)，而不能掛載視圖元素，那么是否可以在js中像使用this.$message一樣使用組件呢，我想到了Vue中使用vue.prototype.$message掛載全局組件的方式。

（1）定義一個(gè)GlobalMessage.vue組件

自定義一個(gè)消息提示組件，text將會(huì)是我們傳入的提示消息參數(shù)

<template>
	<div class='message-container'>
		全局消息提示 {{text}}
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	.message-container{
		position: fixed;
		top: 10%;
		z-index: 2000;
		left: 10%;
		width: 200px;
		height: 200px;
		background-color: red;
	}
</style>

（2）新建GlobalMessage.js

將自定義組件引入，vue.extend可以使用基礎(chǔ)的Vue構(gòu)造器，創(chuàng)建一個(gè)子類(lèi)，參數(shù)是一個(gè)包含組件的對(duì)象。對(duì)象示例如下：

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

但此時(shí)創(chuàng)建的并非組件實(shí)例，需要通過(guò)new 方式創(chuàng)建組件實(shí)例，參數(shù)包括創(chuàng)建的組件Dom節(jié)點(diǎn)，組件內(nèi)部屬性。然后使用document.body.appendChild將組件渲染到body中，此時(shí)我們已經(jīng)可以調(diào)用此方法，將自定義組件掛載到全局。

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

接下來(lái)我們需要將該方法掛載到vue原型上，從而能夠像this.$message一樣使用，我們?cè)?code>vue.prototype上掛載$message，并將此方法導(dǎo)出。

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進(jìn)行全局注冊(cè)，這樣就可以愉快的使用this.$message了。

import GlobalMessage from "./GlobalMessage.js";
// 這里也可以直接執(zhí)行 toastRegistry()
Vue.use(GlobalMessage);

使用

this.$message('測(cè)試數(shù)據(jù)')

3.小程序中如何實(shí)現(xiàn)

超導(dǎo)馬得，剛剛能夠全局使用this.$message，但是又遇到一個(gè)問(wèn)題，小程序中沒(méi)有document，我們看uni-app官方文檔：

uni-app的js API由標(biāo)準(zhǔn)ECMAScript的js API 和 uni 擴(kuò)展 API 這兩部分組成。
標(biāo)準(zhǔn)ECMAScript的js僅是最基礎(chǔ)的js。瀏覽器基于它擴(kuò)展了window、document、navigator等對(duì)象。小程序也基于標(biāo)準(zhǔn)js擴(kuò)展了各種wx.xx、my.xx、swan.xx的API。node也擴(kuò)展了fs等模塊。
uni-app基于ECMAScript擴(kuò)展了uni對(duì)象，并且API命名與小程序保持兼容。
uni-app的js代碼，h5端運(yùn)行于瀏覽器中。非h5端（包含小程序和App），Android平臺(tái)運(yùn)行在v8引擎中，iOS平臺(tái)運(yùn)行在iOS自帶的jscore引擎中，都沒(méi)有運(yùn)行在瀏覽器或webview里。非H5端，不支持window、document、navigator等瀏覽器的js API

uni-app的js API

那么需求不能不完成，我們采用另外一套方案，使用vuex狀態(tài)機(jī)來(lái)進(jìn)行全局狀態(tài)控制，將自定義組件放在需要的頁(yè)面中，使用狀態(tài)機(jī)來(lái)控制消息的提示內(nèi)容以及展示與隱藏。注：請(qǐng)自行安裝配置vuex。

main.js中全局注冊(cè)組件

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

在需要的頁(yè)面放置GlobalMessage組件，但是我們需要每個(gè)頁(yè)面都要加組件標(biāo)簽，實(shí)在是一個(gè)難以忍受的方式，于是在翻閱一些文檔后，在jy文章中發(fā)現(xiàn)一個(gè)工具vue-inset-loader

4.vue-inset-loader的使用

我們來(lái)看該loader的提示：編譯階段在sfc模板指定位置插入自定義內(nèi)容，適用于webpack構(gòu)建的vue應(yīng)用，常用于小程序需要全局引入組件的場(chǎng)景。（由于小程序沒(méi)有開(kāi)放根標(biāo)簽，沒(méi)有辦法在根標(biāo)簽下追加全局標(biāo)簽，所以要使用組件必須在當(dāng)前頁(yè)面引入組件標(biāo)簽），該插件剛好能夠幫助我們?nèi)肿芳咏M件標(biāo)簽。

vue-inset-loader

（1）安裝

npm install vue-inset-loader --save-dev

（2）vue.config.js注入loader

沒(méi)有vue.config.js請(qǐng)新建文件。

module: {
    rules: [
      {
        test: /.vue$/,
        use:{
            loader: "vue-inset-loader"
            // // 針對(duì)Hbuilder工具創(chuàng)建的uni-app項(xiàng)目
            // 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": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "測(cè)試頁(yè)面",
            // 單獨(dú)配置，用法跟全局配置一致，優(yōu)先級(jí)高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]

• 配置說(shuō)明

• config (default: {}) 定義標(biāo)簽名稱(chēng)和內(nèi)容的鍵值對(duì)
• label(default: []) 需要全局引入的標(biāo)簽，打包后會(huì)在所有頁(yè)面引入此標(biāo)簽
• rootEle(default: "div") 根元素的標(biāo)簽類(lèi)型，缺省值為div，支持正則，比如匹配任意標(biāo)簽 ".*"

? label 和 rootEle 支持在單獨(dú)頁(yè)面的style里配置，優(yōu)先級(jí)高于全局配置

三、總結(jié)

雖然實(shí)現(xiàn)了全局消息的提示，但是在小程序中，該方法還是過(guò)于麻煩，需要在每個(gè)頁(yè)面追加全局組件標(biāo)簽，希望大家有更好的方法能夠不吝賜教。

到此這篇關(guān)于Uniapp全局消息提示以及其組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Uniapp全局消息提示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論