前言
微信小程序越來越火,不少公司都在將原生代碼轉為微信小程序代碼。在開發過程中,由于微信小程序wx.navigateBack方法并不支持返回傳參,導致一些頁面,尤其是從列表頁面跳入詳情頁,用戶在詳情頁改變了狀態,返回后無論是否刷新頁面,體驗都不是很好。在android中,我們一般采用setresult方法來返回參數,或者直接使用rxjava框架或者eventbus框架來解決此類問題。
業務分析
此類需求大概意思是:A頁面進入B頁面,B頁面返回并傳值給A。
探索之路
剛開始我想采用一個比較偷懶的方法,利用微信的wx.setStorage緩存在B頁面存儲,返回A頁面,在onshow方法里調用wx.getStorage讀取緩存來實現此功能。但是想想解決方式過于投機取巧,也會給日后維護帶來大量隱患。
隨后我在網上找到獲取前一個page的方法,也可以實現此功能,部分代碼如下:
var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //當前頁面var prevPage = pages[pages.length - 2]; //上一個頁面//直接調用上一個頁面的setData()方法,把數據存到上一個頁面中去prevPage.setData({ mdata:1 })仔細想了下,代碼也不是很安全,因為進B頁面的入口可能是多個,這樣會導致獲取的page出錯。
本來是沒招了,突然想到微信小程序支持js,然后就找了個輕量級的js庫,而且是觀察者模式,是我想要的類型。于是,好戲開始了
onfire.js介紹
onfire.js 是一個很簡單的事件分發的Javascript庫(僅僅 0.9kb),簡潔實用。
github地址:https://github.com/hustcc/onfire.js [作者不是我]
本地下載地址:http://xiazai.Vevb.com/201705/yuanma/onfire.js(Vevb.com).rar
可以用于:
簡單的事件分發; 在 react / vue.js / angular 用于跨組件的輕量級實現; 事件訂閱和發布;實踐
整理下思路如下:
A頁面先訂閱一個事件,并定義處理方法。 B頁面返回時發送消息。 A頁面卸載時,解除訂閱。A頁面代碼:
var onfire = require("../utils/onfire.js");var that;var eventObj = onfire.on('key', function () { //做具體的事});Page({ data: { }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onUnload: function (e) { onfire.un('key'); onfire.un(eventObj2); }})直接調用onfire.on方法訂閱一個名字為key的消息,并且無傳參。如果需要傳參的話,直接在function里增加參數即可,如var eventObj = onfire.on('key', function (data)... 。
需要注意:一定要在
新聞熱點
疑難解答