您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)小程序跨頁(yè)面之間通信的方式有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
應(yīng)用場(chǎng)景:A->B/B->A 都可
優(yōu)點(diǎn):簡(jiǎn)單操作,易理解
缺點(diǎn):調(diào)用到storage,有可能設(shè)置失?。磺以O(shè)置后是持久緩存,可能污染原邏輯,應(yīng)及時(shí)刪除
應(yīng)用示例:
// 以A->B示例 // A 頁(yè)面 Page({ onShow(){ if(wx.getStorageSync('$datas')){ console.log(wx.getStorageSync('$datas')) // 11111 } }, }) // B 頁(yè)面 Page({ someActions(){ wx.setStorageSync('$datas','11111') }, })
應(yīng)用場(chǎng)景:A->B/B->A 都可
優(yōu)點(diǎn):簡(jiǎn)單操作,易理解;直接操作globalData對(duì)象,相比于storage執(zhí)行效率更高
缺點(diǎn):設(shè)置后是小程序生命周期內(nèi)都可訪問(wèn),可能污染原邏輯,應(yīng)及時(shí)刪除
應(yīng)用示例:
// 以A->B示例 // A 頁(yè)面 const app = getApp(); Page({ onShow(){ if(app.globalData.$datas){ console.log(app.globalData.$datas) // 11111 } }, }) // B 頁(yè)面 const app = getApp(); Page({ someActions(){ app.globalData.$datas = '11111'; }, })
應(yīng)用場(chǎng)景:主要是 B->A
優(yōu)點(diǎn):小程序原生提供,可隨時(shí)銷(xiāo)毀
缺點(diǎn):僅限制在navigateTo
中,且要求基礎(chǔ)庫(kù)版本不低于2.7.3
應(yīng)用示例:
// A頁(yè)面 wx.navigateTo({ url: 'B?id=1', events: { // 為指定事件添加一個(gè)監(jiān)聽(tīng)器,獲取被打開(kāi)頁(yè)面?zhèn)魉偷疆?dāng)前頁(yè)面的數(shù)據(jù) acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: function(data) { console.log(data) } ... }, success: function(res) { // 通過(guò)eventChannel向被打開(kāi)頁(yè)面?zhèn)魉蛿?shù)據(jù) res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } }) // B頁(yè)面 Page({ onLoad: function(option){ console.log(option.query) const eventChannel = this.getOpenerEventChannel() eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'}); eventChannel.emit('someEvent', {data: 'test'}); // 監(jiān)聽(tīng)acceptDataFromOpenerPage事件,獲取上一頁(yè)面通過(guò)eventChannel傳送到當(dāng)前頁(yè)面的數(shù)據(jù) eventChannel.on('acceptDataFromOpenerPage', function(data) { console.log(data) }) } })
應(yīng)用場(chǎng)景:A->B/B->A 都可
優(yōu)點(diǎn):自定義實(shí)現(xiàn),可擴(kuò)展
缺點(diǎn):對(duì)wx進(jìn)行擴(kuò)展自定義變量,相同eventName可能會(huì)重復(fù)綁定監(jiān)聽(tīng)事件
EventBus: 參考這篇EventBus實(shí)現(xiàn)
應(yīng)用示例:
// app.js const EventBus = require('./utils/eventBus.js'); App({ onLaunch(){ // 將eventBus初始到wx上 wx['$uhomesBus'] = (function () { if (wx['$uhomesBus']) return wx['$uhomesBus']; return new EventBus(); })(); } }) // A頁(yè)面 Page({ someActions(){ wx.$uhomesBus.$on('$datas',(data)=>{ console.log(data); // 11111 }) }, }) // B頁(yè)面 Page({ emitActions(){ wx.$uhomesBus.$emit('$datas', '11111'); }, })
應(yīng)用場(chǎng)景:主要是 B->A
優(yōu)點(diǎn):小程序原生提供,處理邏輯基本都在B頁(yè)面
缺點(diǎn):需要增加匹配頁(yè)面的相應(yīng)規(guī)則,且路由棧至少有兩個(gè)頁(yè)面存在
應(yīng)用示例:
// A頁(yè)面 Page({ someActions(datas){ console.log(datas); // 11111 }, }) // B頁(yè)面 Page({ someActions(){ const pages = getCurrentPages(); if (pages.length < 2) return; // 如果頁(yè)面層級(jí)較多,可用循環(huán)去匹配到A頁(yè)面; // 此處僅做2個(gè)頁(yè)面的示例 const prevPage = pages[pages.length - 1]; // 路由匹配到A if (prevPage.route === 'A') { prevPage.someActions('11111'); } }, })
暫時(shí)未試驗(yàn)這種方式,原理上可行;
相應(yīng)的原理可參考Vue3的數(shù)據(jù)劫持和訂閱通知相結(jié)合;
感謝各位的閱讀!關(guān)于“小程序跨頁(yè)面之間通信的方式有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。