由于微信小程序 wx.navigateBack 方法并不支持返回傳值,導(dǎo)致頁面在返回后,不能方便地即時更新數(shù)據(jù)。
一.需求分析
此類需求大概意思是:A 頁面進(jìn)入 B 頁面,B 頁面返回并傳值給 A或在B頁面觸發(fā)事件時,A頁面也有事件觸發(fā)改變。
業(yè)務(wù)分析
第一種:利用微信的 wx.setStorage,將數(shù)據(jù)緩存在小程序?qū)嵗齼?nèi)。從 B 頁面返回 A 頁面時,B 頁面先將數(shù)據(jù)緩存;然后在 A 頁面的 onshow 方法里,調(diào)用 wx.getStorage 讀取緩存來實(shí)現(xiàn)。但為日后維護(hù)帶來大量隱患。(用全局變量方法類似)
第二種:獲取前一個 page 實(shí)例的方法,也可以實(shí)現(xiàn)此功能。部分代碼如下:
這種方法的弊端:因?yàn)檫M(jìn)入 B 頁面的入口可能是很多個。這樣做,可能會導(dǎo)致獲取到的頁面實(shí)例不正確。
二.方法介紹
下面進(jìn)入正題介紹onfire.js()
onfire.js 是一個很簡單的事件分發(fā) JavaScript 庫(僅僅 0.9kb),簡潔實(shí)用。它可以應(yīng)用于:
1.簡單的事件分發(fā)。
2.在 React、Vue.js、Angular 中用于跨組件的輕量級實(shí)現(xiàn)。
3.事件訂閱和發(fā)布。
使用思路:(做過移動端開發(fā)的都知道,類似于iOS的通知和安卓的廣播)
a.A 頁面先訂閱一個事件,并定義處理方法;
b.從 B 頁面返回時,發(fā)送消息;
c.A 頁面卸載時,解除訂閱。
我的使用方法為:
A 頁面代碼:
我們可以在 A 頁面直接調(diào)用 onfire.on 方法,訂閱一個名字為 key 的消息。在上面的代碼中,消息附帶的參數(shù)無傳參。
如果需要傳參的話,直接在 function 里增加參數(shù)即可,例如:
需要注意的是,一定要在 onUnload 里(在頁面被關(guān)閉時)取消訂閱消息,并取消綁定 eventObj。
B 頁面里代碼在回調(diào)的地方加入以下代碼:
三.分析庫代碼
從代碼中可以看出訂閱 on 方法的時候,實(shí)際調(diào)用 _bind 方法。該方法利用一個二維數(shù)組,來存儲訂閱的對象。
而 fire 發(fā)送消息方法的實(shí)質(zhì),是調(diào)用 _fire_func 方法,通過名字(key)來遍歷訂閱者,然后通知訂閱者。調(diào)用un方法,通過名字(key)來遍歷訂閱者,找到后移除。
推薦:《小程序開發(fā)教程》