Parlons de la façon d'utiliser Uniapp pour implémenter des invites de message globales et ses composants

Comment implémenter des invites et des composants de messages globaux dans Uniapp ? L'article suivant vous présentera comment implémenter l'invite de message globale Uniapp et ses composants. J'espère qu'il vous sera utile !

Récemment, il existe des exigences de projet selon lesquelles nous pouvons actualiser les messages globalement en temps réel dans les programmes H5 et mini, et créer une invite de message globalement. Le composant d'invite doit également personnaliser le style. deux types d'actualisation des messages en temps réel. L'un est une interrogation courte et l'autre est une interrogation longue.
Le soi-disant sondage court signifie en fait que le front-end utilise une minuterie pour lancer des requêtes vers le back-end dans un certain intervalle, et le back-end doit optimiser la demande d'interrogation.
Une interrogation longue signifie qu'après l'envoi de la demande de message au backend, la demande est suspendue, en attendant que de nouveaux messages soient renvoyés par le backend, puis en réinitialisant la demande de message. En fait, il s'agit d'une communication websocket. temps et coût de lancement du projet, une interrogation courte a finalement été choisie, et des invites de message globales sont effectuées dans App.vue.

Mise en œuvre

1. Demande d'interrogation courte-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. Composant d'invite de message global

Après la demande de message, un composant personnalisé global est nécessaire pour afficher le message, mais j'en ai rencontré un. le problème c'est que dans Unipp, Bien que App.vue soit le composant principal d'uni-app, toutes les pages sont commutées sous App.vue, qui est le fichier d'entrée de page. Mais App.vue lui-même n'est pas une page et les éléments de vue ne peuvent pas être écrits ici. Les fonctions de ce fichier incluent : l'appel des fonctions de cycle de vie de l'application, la configuration des styles globaux et la configuration du stockage global globalData. C'est-à-dire que App.vue ne peut écrire que du js et du css, mais ne peut pas monter d'éléments de vue. Alors, peut-il être utilisé en js comme this.$message ? pour les composants, j'ai pensé à utiliser vue.prototype.$message dans Vue pour monter des composants globaux. App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。也就是App.vue中只能进行js以及css的编写，而不能挂载视图元素，那么是否可以在js中像使用this.$message一样使用组件呢，我想到了Vue中使用vue.prototype.$message挂载全局组件的方式。

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

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

<template>
	<div class=&#39;message-container&#39;>
		全局消息提示 {{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可以使用基础的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由标准ECMAScript的js API 和 uni 扩展 API 这两部分组成。
标准ECMAScript的js仅是最基础的js。浏览器基于它扩展了window、document、navigator等对象。小程序也基于标准js扩展了各种wx.xx、my.xx、swan.xx的API。node也扩展了fs等模块。
uni-app基于ECMAScript扩展了uni对象，并且API命名与小程序保持兼容。
uni-app

(1) Définir un composant GlobalMessage.vue

Personnaliser un composant d'invite de message, le texte sera le paramètre de message d'invite que nous transmettons

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

(2) Créez un nouveau GlobalMessage.js

Introduisez des composants personnalisés, vue.extend peut utiliser le constructeur de base de Vue pour créer une sous-classe, les paramètres Est un objet contenant composants. L'exemple d'objet est le suivant :

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')
// }

Mais ce qui est créé à ce moment n'est pas une instance de composant. Vous devez créer une instance de composant via la nouvelle méthode. Les paramètres incluent le nœud Dom du composant créé et les propriétés internes du composant. . Utilisez ensuite document.body.appendChild pour restituer le composant dans le corps. À ce stade, nous pouvons déjà appeler cette méthode pour monter le composant personnalisé globalement.

"insetLoader": {
    "config":{
        "message": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "测试页面",
            // 单独配置，用法跟全局配置一致，优先级高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]

🎜Ensuite, nous devons monter cette méthode sur le prototype vue afin qu'elle puisse être utilisée comme this.$message Nous la montons sur vue.prototype code>$. message et exportez cette méthode. 🎜rrreee🎜🎜Code complet de GlobalMessage.js🎜🎜rrreee

🎜(3) Dans main.js🎜🎜🎜Présentez la méthode que nous lançons, utilisez Vue.use code>Inscrivez-vous globalement pour pouvoir utiliser avec plaisir <code>this.$message. 🎜rrreee🎜🎜Utilisation de 🎜🎜rrreee

🎜3. Comment implémenter 🎜🎜🎜cheval supraconducteur dans l'applet, je viens de pouvoir utiliser this.$message, mais a rencontré un autre problème. Il n'y a pas de <code>document dans le mini programme. Regardons le document officiel de uni-app : 🎜🎜🎜🎜uni-app</code.>L'API js se compose de deux parties : l'API js ECMAScript standard et l'API d'extension uni. 🎜Standard ECMAScript js n'est que le js le plus basique. Le navigateur étend la fenêtre, le document, le navigateur et d'autres objets basés sur celui-ci. Le mini-programme étend également diverses API wx.xx, my.xx et swan.xx basées sur la norme js. Node étend également fs et d'autres modules. 🎜uni-app étend l'objet uni basé sur ECMAScript et le nom de l'API reste compatible avec l'applet. Le code js de 🎜uni-app, la fin h5 s'exécute dans le navigateur. Du côté non-h5 (y compris les petits programmes et applications), la plate-forme Android s'exécute dans le moteur v8 et la plate-forme iOS s'exécute dans le moteur jscore fourni avec iOS. Ni le navigateur ni la vue Web ne s'exécutent. 🎜Le côté non-H5 ne prend pas en charge l'API js des fenêtres, documents, navigateurs et autres navigateurs🎜🎜🎜🎜🎜API js d'uni-app🎜🎜🎜Ensuite, la demande doit être satisfaite, nous adoptons une autre solution, en utilisant la vuex machine à états Effectuez un contrôle d'état global, placez des composants personnalisés sur les pages requises et utilisez des machines à états pour contrôler le contenu des invites, l'affichage et le masquage des messages. Remarque : veuillez installer et configurer vuex vous-même. 🎜🎜🎜Composants enregistrés mondialement dans main.js🎜

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

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

4.vue-inset-loader的使用

我们来看该loader的提示：编译阶段在sfc模板指定位置插入自定义内容，适用于webpack构建的vue应用，常用于小程序需要全局引入组件的场景。（由于小程序没有开放根标签，没有办法在根标签下追加全局标签，所以要使用组件必须在当前页面引入组件标签），该插件刚好能够帮助我们全局追加组件标签。

vue-inset-loader

（1）安装

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

（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": "<GlobalMessage></GlobalMessage>",
   
    },
    // 全局配置
    "label":["confirm"],
    "rootEle":"div"
},
"pages": [
    {
        "path": "pages/tabbar/index/index",
        "style": {
            "navigationBarTitleText": "测试页面",
            // 单独配置，用法跟全局配置一致，优先级高于全局
            "label": ["confirm","abc"],
            "rootEle":"div"
        }
    },
]

4. 配置说明

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

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

总结

虽然实现了全局消息的提示，但是在小程序中，该方法还是过于麻烦，需要在每个页面追加全局组件标签，希望大家有更好的方法能够不吝赐教。

推荐：《uniapp教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!