小程序頁面之間如何通信?

首先將通信的模型列舉出來, 分為以下幾種

• 兄弟頁面間通信
• 父路徑頁面向子路徑頁面通信
• 子路徑頁面向父路徑頁面通信

通信的方式

• localStorage 本地存儲
• globalData 全局對象
• eventBus 發(fā)布訂閱
• PageModel 緩存整個pageModel至globalData

LocalStorage

利用onShow/onHide激活方法，通過localStorage傳遞數(shù)據(jù)

onShow(){ let newHello = wx . getStorageSync ( '__data'); if (newHello ){ this .setData({ helloMsg: newHello }); // 清空上次通信數(shù)據(jù) wx.clearStorageSync ( '__data' ); }}

GlobalData

同localStorage一樣，利用onShow/onHide激活方法，通過讀寫小程序globalData完成數(shù)據(jù)傳遞

let app = getApp(); onShow(){ let newHello = app.$$data.helloMsg; if (newHello){ this.setData({ helloMsg: newHello }); // 清空上次通信數(shù)據(jù) app.$$data.helloMsg =null; } }

EventBus

eventBus基本適用合任何ＪＳ可以運行的環(huán)境, 通過訂閱一個事件，然后再發(fā)布事件的時間點收到消息

// 首先你得實現(xiàn)一個eventBus, 這里假設(shè)你已經(jīng)實現(xiàn)了..// Page A onLoad(){ app.pubSub.on('hello',(msg)=>{ this.setData({ helloMsg:'hello :'+ msg }); }); },// Page B onLoad(){ app.pubSub.emit('hello', 'JS每日一題') },

PageModel

緩存頁面PageModel, 通信時，直接找到要通信頁面的PageModel,進而可以訪問通信頁面PageModel所有的屬性，方法

// 在app.js中add及get實現(xiàn) this.$$cache ={} add(pageModel){ // 添加時以__route__做為key，方便在其它頁面調(diào)用 let pagePath =this.__route__; this.$$cache[pagePath]= pageModel; } get(pagePath){ // 同時直接取走相應(yīng)的pageModel return this.$$cache[pagePath]; }// Page A 在onLoad 時將本身(this)存放到GlobalData中 onLoad(){ app.pages.add(this); },// Page B onLoad(){ // 拿到Page A所有屬性及方法 console.log(app.pages.get( 'pages/a/b'))},

總結(jié)

• localstorage 同步會阻塞進程，異步可能會錯過最佳取值時機
• globalData 直接操作內(nèi)存，比localstorage更快，注意全局變量污染
• eventBus 方便靈活,推薦使用,注意解綁及重復(fù)綁定
• PageModel 思路很棒,但globalDatac存放的pageModel過多時內(nèi)存會不會爆不知道~_~

總結(jié)

以上是生活随笔為你收集整理的小程序引用其他页面js_来聊聊小程序页面之间如何通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。