您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序中如何實(shí)現(xiàn)多個(gè)頁(yè)面?zhèn)鲄⑼ㄐ诺膬?nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
前言
微信小程序越來越火,不少公司都在將原生代碼轉(zhuǎn)為微信小程序代碼。在開發(fā)過程中,由于微信小程序wx.navigateBack
方法并不支持返回傳參,導(dǎo)致一些頁(yè)面,尤其是從列表頁(yè)面跳入詳情頁(yè),用戶在詳情頁(yè)改變了狀態(tài),返回后無論是否刷新頁(yè)面,體驗(yàn)都不是很好。在android中,我們一般采用setresult
方法來返回參數(shù),或者直接使用rxjava框架或者eventbus框架來解決此類問題。
業(yè)務(wù)分析
此類需求大概意思是:A頁(yè)面進(jìn)入B頁(yè)面,B頁(yè)面返回并傳值給A。
探索之路
剛開始我想采用一個(gè)比較偷懶的方法,利用微信的wx.setStorage
緩存在B頁(yè)面存儲(chǔ),返回A頁(yè)面,在onshow
方法里調(diào)用wx.getStorage
讀取緩存來實(shí)現(xiàn)此功能。但是想想解決方式過于投機(jī)取巧,也會(huì)給日后維護(hù)帶來大量隱患。
隨后我在網(wǎng)上找到獲取前一個(gè)page
的方法,也可以實(shí)現(xiàn)此功能,部分代碼如下:
var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //當(dāng)前頁(yè)面 var prevPage = pages[pages.length - 2]; //上一個(gè)頁(yè)面 //直接調(diào)用上一個(gè)頁(yè)面的setData()方法,把數(shù)據(jù)存到上一個(gè)頁(yè)面中去 prevPage.setData({ mdata:1 })
仔細(xì)想了下,代碼也不是很安全,因?yàn)檫M(jìn)B頁(yè)面的入口可能是多個(gè),這樣會(huì)導(dǎo)致獲取的page出錯(cuò)。
本來是沒招了,突然想到微信小程序支持js,然后就找了個(gè)輕量級(jí)的js庫(kù),而且是觀察者模式,是我想要的類型。于是,好戲開始了
onfire.js介紹
onfire.js 是一個(gè)很簡(jiǎn)單的事件分發(fā)的Javascript庫(kù)(僅僅 0.9kb),簡(jiǎn)潔實(shí)用。
github地址:https://github.com/hustcc/onfire.js [作者不是我]
本地下載地址:http://xiazai.jb51.net/201705/yuanma/onfire.js(jb51.net).rar
可以用于:
簡(jiǎn)單的事件分發(fā);
在 react / vue.js / angular 用于跨組件的輕量級(jí)實(shí)現(xiàn);
事件訂閱和發(fā)布;
實(shí)踐
整理下思路如下:
A頁(yè)面先訂閱一個(gè)事件,并定義處理方法。
B頁(yè)面返回時(shí)發(fā)送消息。
A頁(yè)面卸載時(shí),解除訂閱。
A頁(yè)面代碼:
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); } })
直接調(diào)用onfire.on
方法訂閱一個(gè)名字為key的消息,并且無傳參。如果需要傳參的話,直接在function
里增加參數(shù)即可,如var eventObj = onfire.on('key', function (data)...
。
需要注意:一定要在onUnload
里取消訂閱key
的消息,并取消綁定eventObj
。
B頁(yè)面里代碼在回調(diào)的地方加入
onfire.fire('key');//key為上文中訂閱的消息 //有參數(shù)時(shí) onfire.fire('key','test');
分析庫(kù)代碼
function _bind(eventName, callback, is_one, context) { if (typeof eventName !== string_str || typeof callback !== function_str) { throw new Error('args: '+string_str+', '+function_str+''); } if (! hasOwnKey(__onfireEvents, eventName)) { __onfireEvents[eventName] = {}; } __onfireEvents[eventName][++__cnt] = [callback, is_one, context]; return [eventName, __cnt]; }
從代碼中可以看出訂閱on
方法的時(shí)候?qū)嶋H調(diào)用_bind
方法,該方法,主要是利用一個(gè)二維數(shù)組來存儲(chǔ)訂閱的對(duì)象。
function _fire_func(eventName, args) { if (hasOwnKey(__onfireEvents, eventName)) { _each(__onfireEvents[eventName], function(key, item) { item[0].apply(item[2], args); //執(zhí)行訂閱時(shí)的方法 if (item[1]) delete __onfireEvents[eventName][key]; // 當(dāng)類型為只訂閱一次時(shí),通知后即移除自己。 }); } }
而fire
發(fā)送消息方法實(shí)質(zhì)調(diào)用_fire_func
方法,通過名字key
來遍歷訂閱者,然后通知訂閱者。
function un(event) { var eventName, key, r = false, type = typeof event; if (type === string_str) { // 如果存在key值,則移除數(shù)組 if (hasOwnKey(__onfireEvents, event)) { delete __onfireEvents[event]; return true; } return false; } else if (type === 'object') { eventName = event[0]; key = event[1]; //如果找到這個(gè)對(duì)象則卸載 if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) { delete __onfireEvents[eventName][key]; return true; } //否則返回false return false; } else if (type === function_str) { //兩層循環(huán)來判斷是否是方法名 _each(__onfireEvents, function(key_1, item_1) { _each(item_1, function(key_2, item_2) { if (item_2[0] === event) { delete __onfireEvents[key_1][key_2]; r = true; } }); }); return r; } return true; }
因?yàn)樾遁d支持按key
、對(duì)象、方法卸載,所以需要先判斷類型,然后按各自規(guī)則去解除綁定。
感謝各位的閱讀!關(guān)于“微信小程序中如何實(shí)現(xiàn)多個(gè)頁(yè)面?zhèn)鲄⑼ㄐ拧边@篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(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)容。