Mari kita bincangkan tentang cara menggunakan Uniapp untuk melaksanakan gesaan mesej global dan komponennya

Bagaimana untuk melaksanakan gesaan dan komponen mesej global dalam Uniapp? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan gesaan mesej global Uniapp dan komponennya. Saya harap ia akan membantu anda!

Baru-baru ini, terdapat keperluan projek bahawa kami boleh memuat semula mesej secara global dalam masa nyata dalam program H5 dan mini, dan membuat gesaan mesej secara global juga perlu menyesuaikan gaya , Pertama sekali, terdapat dua jenis penyegaran semula mesej masa nyata, satu tinjauan pendek dan satu lagi tinjauan panjang.
Apa yang dipanggil pengundian pendek sebenarnya bermaksud bahawa bahagian hadapan menggunakan pemasa untuk memulakan permintaan ke bahagian belakang dalam selang waktu tertentu, dan bahagian belakang perlu mengoptimumkan permintaan pengundian.
Tinjauan panjang bermakna selepas menghantar permintaan mesej ke bahagian belakang, permintaan itu digantung, menunggu mesej baharu dikembalikan dari bahagian belakang, dan kemudian memulakan semula permintaan mesej itu daripada masa dan kos pelancaran projek, akhirnya Pilih kaedah pengundian pendek, dan gesaan mesej global dilakukan dalam App.vue.

Pelaksanaan

1 Permintaan tinjauan ringkas-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 🎜>

memerlukan komponen tersuai global untuk memaparkan mesej selepas permintaan mesej, tetapi kami menghadapi masalah, iaitu, dalam Unipp, Walaupun

ialah komponen utama uni-app, semua halaman ditukar di bawah App.vue, iaitu fail kemasukan halaman. Tetapi App.vue itu sendiri bukan halaman, dan elemen paparan tidak boleh ditulis di sini. Fungsi fail ini termasuk: memanggil fungsi kitaran hayat aplikasi, mengkonfigurasi gaya global dan mengkonfigurasi globalData storan global. Maksudnya, hanya js dan css boleh ditulis dalam App.vue, tetapi elemen paparan tidak boleh dipasang, jadi, bolehkah saya menggunakan komponen dalam js seperti App.vue? mereka. Bagaimana untuk memuatkan komponen global. this.$messageVuevue.prototype.$message
(1) Tentukan komponen GlobalMessage.vue

Sesuaikan komponen gesaan mesej, teks akan menjadi parameter mesej gesaan yang kita lalui

(2) Cipta GlobalMessage.js baharu

<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>

Perkenalkan komponen tersuai, Anda boleh menggunakan pembina Vue asas untuk mencipta subkelas, parameternya ialah An objek yang mengandungi komponen. Contoh objek adalah seperti berikut:

vue.extendTetapi apa yang dibuat pada masa ini bukanlah contoh komponen Anda perlu mencipta contoh komponen melalui kaedah baharu Parameter termasuk nod Dom komponen yang dibuat sifat dalaman komponen. Kemudian gunakan

untuk memaparkan komponen ke dalam badan Pada masa ini, kita sudah boleh memanggil kaedah ini untuk memasang komponen tersuai secara global.

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

document.body.appendChildSeterusnya kita perlu memasang kaedah ini pada prototaip vue supaya ia boleh digunakan seperti

Kami memasang

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

pada

dan mengeksport kaedah ini. this.$messagevue.prototype$message

Semua kod GlobalMessage.js

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

(3) Main.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

akan kami Kaedah lontaran diperkenalkan, dan digunakan untuk pendaftaran global, supaya anda boleh menggunakan

dengan gembira.

Vue.usethis.$message

Gunakan

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

3 Cara melaksanakan

this.$message('测试数据')

kuda superkonduktor dalam applet, sebentar tadi. Anda boleh menggunakan secara global, tetapi anda menghadapi masalah lain Tiada

dalam program mini Mari lihat dokumentasi rasmi

: this.$messagedocumentuni-app
's API js diseragamkan oleh Ia terdiri daripada API js ECMAScript dan API sambungan uni.

JS ECMAScript standard hanyalah js yang paling asas. Penyemak imbas memanjangkan tetingkap, dokumen, navigator dan objek lain berdasarkannya. Program mini juga memanjangkan pelbagai API wx.xx, my.xx dan swan.xx berdasarkan js standard. Node juga memanjangkan fs dan modul lain.

uni-app memanjangkan objek uni berdasarkan ECMAScript dan penamaan API kekal serasi dengan applet. Kod js

uni-app, hujung h5 dijalankan dalam penyemak imbas. Pada hujung bukan h5 (termasuk program dan apl kecil), platform Android berjalan dalam enjin v8, dan platform iOS berjalan dalam enjin jscore yang disertakan dengan iOS.
Penghujung bukan H5, tidak menyokong API js bagi tetingkap, dokumen, pelayar dan penyemak imbas lain

uni-appAPI js uni-app

Kemudian keperluan perlu dipenuhi Kami menggunakan penyelesaian lain, menggunakan mesin keadaan vuex untuk kawalan keadaan global, meletakkan komponen tersuai pada halaman yang diperlukan, dan menggunakan mesin keadaan untuk mengawal kandungan segera, paparan dan penyembunyian mesej. Nota: Sila pasang dan konfigurasikan vuex sendiri.

Komponen yang didaftarkan secara global dalam 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教程》

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan Uniapp untuk melaksanakan gesaan mesej global dan komponennya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!