Lassen Sie uns darüber sprechen, wie Sie mit Uniapp globale Nachrichtenaufforderungen und deren Komponenten implementieren

Wie implementiert man globale Nachrichtenaufforderungen und -komponenten in Uniapp? Der folgende Artikel stellt Ihnen vor, wie Sie die globale Nachrichtenaufforderung von Uniapp und ihre Komponenten implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

In letzter Zeit gibt es Projektanforderungen, nach denen wir Nachrichten global in Echtzeit in H5- und Mini-Programmen aktualisieren und eine Nachrichtenaufforderung global erstellen können. Zunächst einmal gibt es solche Es gibt zwei Arten der Aktualisierung von Echtzeitnachrichten: Die eine ist die kurze Abfrage und die andere die lange Abfrage.
Das sogenannte Short Polling bedeutet eigentlich, dass das Front-End einen Timer verwendet, um innerhalb eines bestimmten Intervalls Anfragen an das Back-End zu initiieren, und das Back-End die Polling-Anfrage optimieren muss.
Lange Abfragen bedeuten, dass nach dem Senden der Nachrichtenanforderung an das Backend die Anforderung angehalten wird, auf die Rückgabe neuer Nachrichten vom Backend gewartet und die Nachrichtenanforderung dann erneut initiiert wird Projektstartzeit und -kosten, kurze Abfragen wurden schließlich ausgewählt und globale Nachrichtenaufforderungen werden in App.vue durchgeführt.

Implementierung

1. Kurze Abfrageanforderung – 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. Globale Nachrichtenaufforderungskomponente

Nach der Nachrichtenanforderung ist eine globale benutzerdefinierte Komponente erforderlich, um die Nachricht anzuzeigen, aber ich bin auf eine gestoßen Das Problem ist, dass in Unipp Obwohl App.vue die Hauptkomponente von uni-app ist, werden alle Seiten unter App.vue, der Seiteneintragsdatei, umgeschaltet. Aber App.vue selbst ist keine Seite und Ansichtselemente können hier nicht geschrieben werden. Zu den Funktionen dieser Datei gehören: Aufrufen von Anwendungslebenszyklusfunktionen, Konfigurieren globaler Stile und Konfigurieren des globalen Speichers globalData. Das heißt, App.vue kann nur js und css schreiben, aber keine Ansichtselemente bereitstellen. Kann es also in js wie this.$message verwendet werden? Für Komponenten dachte ich darüber nach, vue.prototype.$message in Vue zu verwenden, um globale Komponenten bereitzustellen. 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) Definieren Sie eine GlobalMessage.vue-Komponente

Passen Sie eine Nachrichtenaufforderungskomponente an. Text ist der Eingabeaufforderungsnachrichtenparameter, den wir übergeben

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

(2) Erstellen Sie eine neue GlobalMessage.js

Benutzerdefinierte Komponenten einführen, vue.extend kann den grundlegenden Vue-Konstruktor verwenden, um eine Unterklasse zu erstellen, Parameter Ist ein Objekt, das enthält Komponenten. Das Objektbeispiel lautet wie folgt:

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

Aber was zu diesem Zeitpunkt erstellt wird, ist keine Komponenteninstanz. Sie müssen eine Komponenteninstanz über die neue Methode erstellen. Die Parameter umfassen den erstellten Komponenten-Dom-Knoten und die internen Eigenschaften der Komponente . Verwenden Sie dann document.body.appendChild, um die Komponente im Körper zu rendern. Zu diesem Zeitpunkt können wir diese Methode bereits aufrufen, um die benutzerdefinierte Komponente global bereitzustellen.

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

🎜Als nächstes müssen wir diese Methode auf dem Vue-Prototyp mounten, damit sie wie this.$message verwendet werden kann. Wir mounten sie auf vue.prototype code>$ message und exportieren Sie diese Methode. 🎜rrreee🎜🎜GlobalMessage.js vollständiger Code🎜🎜rrreee

🎜(3) In main.js🎜🎜🎜Stellen Sie die Methode vor, die wir werfen, verwenden Sie Vue.use code>Registrieren Sie sich global, damit Sie <code>this.$message gerne verwenden können. 🎜rrreee🎜🎜Mit 🎜🎜rrreee

🎜3. Wie man 🎜🎜🎜superconducting horse im Applet implementiert, konnte ich gerade this.$message, aber es gibt kein <code>document im Miniprogramm. Schauen wir uns das offizielle Dokument von uni-app an: 🎜🎜🎜🎜uni-appDie js-API besteht aus zwei Teilen: der Standard-ECMAScript-js-API und der Uni-Erweiterungs-API. 🎜Standard ECMAScript js ist nur das grundlegendste js. Der Browser erweitert Fenster, Dokumente, Navigatoren und andere darauf basierende Objekte. Das Miniprogramm erweitert außerdem verschiedene wx.xx-, my.xx- und swan.xx-APIs basierend auf Standard-JS. Node erweitert auch fs und andere Module. 🎜uni-app erweitert das Uni-Objekt auf Basis von ECMAScript und die API-Benennung bleibt mit dem Applet kompatibel. 🎜uni-apps js-Code, das h5-Ende läuft im Browser. Auf der Nicht-h5-Seite (einschließlich kleiner Programme und Apps) läuft die Android-Plattform in der v8-Engine und die iOS-Plattform läuft in der jscore-Engine, die mit iOS geliefert wird. Weder läuft sie im Browser noch in der Webansicht. 🎜Die Nicht-H5-Seite unterstützt nicht die js-API von Fenster-, Dokument-, Navigator- und anderen Browsern🎜🎜🎜🎜🎜js-API von uni-app🎜🎜🎜Dann muss die Anforderung erfüllt werden, wir übernehmen eine andere Lösung, indem wir Vuex verwenden Zustandsmaschine Führen Sie eine globale Zustandssteuerung durch, platzieren Sie benutzerdefinierte Komponenten auf erforderlichen Seiten und verwenden Sie Zustandsmaschinen, um den Inhalt von Eingabeaufforderungen sowie das Anzeigen und Ausblenden von Nachrichten zu steuern. Hinweis: Bitte installieren und konfigurieren Sie vuex selbst. 🎜🎜🎜Global registrierte Komponenten in 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教程》

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie mit Uniapp globale Nachrichtenaufforderungen und deren Komponenten implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!