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.
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)
} 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
<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>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
{
template:'',
data(){
return {
属性
}
}
}document.body.appendChildSeterusnya kita perlu memasang kaedah ini pada prototaip vue supaya ia boleh digunakan seperti
function showMessage(text,duration){
const MessageDom=new MessageConstructor({
el:document.createElement('div'),data(){
return {text:text,
}
}
})document.body.appendChild(MessageDom.$el)
} dan mengeksport kaedah ini. this.$messagevue.prototype$message
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 registryMessageVue.usethis.$message
import GlobalMessage from "./GlobalMessage.js"; // 这里也可以直接执行 toastRegistry()Vue.use(GlobalMessage);
3 Cara melaksanakan
this.$message('测试数据')
: this.$messagedocumentuni-app
<🎜. >'s API js diseragamkan oleh Ia terdiri daripada API js ECMAScript dan API sambungan uni.
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 lainuni-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.jsimport GlobalMessage from '@/components/common/GlobalMessage.vue'; Vue.component('GlobalMessage',GlobalMessage)
在需要的页面放置GlobalMessage组件，但是我们需要每个页面都要加组件标签，实在是一个难以忍受的方式，于是在翻阅一些文档后，在jy文章中发现一个工具vue-inset-loader
我们来看该loader的提示：编译阶段在sfc模板指定位置插入自定义内容，适用于webpack构建的vue应用，常用于小程序需要全局引入组件的场景。（由于小程序没有开放根标签，没有办法在根标签下追加全局标签，所以要使用组件必须在当前页面引入组件标签），该插件刚好能够帮助我们全局追加组件标签。
npm install vue-inset-loader --save-dev
没有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')
// }"insetLoader": {
"config":{
"message": "<GlobalMessage></GlobalMessage>",
},
// 全局配置
"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，支持正则，比如匹配任意标签 ".*"✔ 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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
