這篇文章給大家分享的是有關(guān)微信小程序中如何實現(xiàn)多個頁面?zhèn)鲄⑼ㄐ诺膬?nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
前言
微信小程序越來越火，不少公司都在將原生代碼轉(zhuǎn)為微信小程序代碼。在開發(fā)過程中，由于微信小程序wx.navigateBack方法并不支持返回傳參，導致一些頁面，尤其是從列表頁面跳入詳情頁，用戶在詳情頁改變了狀態(tài)，返回后無論是否刷新頁面，體驗都不是很好。在android中，我們一般采用setresult方法來返回參數(shù)，或者直接使用rxjava框架或者eventbus框架來解決此類問題。
業(yè)務(wù)分析
此類需求大概意思是：A頁面進入B頁面，B頁面返回并傳值給A。
探索之路
剛開始我想采用一個比較偷懶的方法，利用微信的wx.setStorage緩存在B頁面存儲，返回A頁面，在onshow方法里調(diào)用wx.getStorage讀取緩存來實現(xiàn)此功能。但是想想解決方式過于投機取巧，也會給日后維護帶來大量隱患。
隨后我在網(wǎng)上找到獲取前一個page的方法，也可以實現(xiàn)此功能，部分代碼如下：
重慶分公司
重慶分公司
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //當前頁面
var prevPage = pages[pages.length - 2]; //上一個頁面
//直接調(diào)用上一個頁面的setData()方法，把數(shù)據(jù)存到上一個頁面中去
prevPage.setData({
mdata:1
})仔細想了下，代碼也不是很安全，因為進B頁面的入口可能是多個，這樣會導致獲取的page出錯。
本來是沒招了，突然想到微信小程序支持js，然后就找了個輕量級的js庫，而且是觀察者模式，是我想要的類型。于是，好戲開始了
onfire.js介紹
onfire.js 是一個很簡單的事件分發(fā)的Javascript庫（僅僅 0.9kb），簡潔實用。
github地址：https://github.com/hustcc/onfire.js [作者不是我]
本地下載地址：http://xiazai.jb51.net/201705/yuanma/onfire.js(jb51.net).rar
可以用于:
簡單的事件分發(fā)；
在 react / vue.js / angular 用于跨組件的輕量級實現(xiàn)；
事件訂閱和發(fā)布；
實踐
整理下思路如下：
A頁面先訂閱一個事件，并定義處理方法。
B頁面返回時發(fā)送消息。
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);
}
})直接調(diào)用onfire.on方法訂閱一個名字為key的消息，并且無傳參。如果需要傳參的話，直接在function里增加參數(shù)即可，如var eventObj = onfire.on('key', function (data)...。
需要注意：一定要在onUnload里取消訂閱key的消息，并取消綁定eventObj。
B頁面里代碼在回調(diào)的地方加入
onfire.fire('key');//key為上文中訂閱的消息
//有參數(shù)時
onfire.fire('key','test');分析庫代碼
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方法的時候?qū)嶋H調(diào)用_bind方法，該方法，主要是利用一個二維數(shù)組來存儲訂閱的對象。
function _fire_func(eventName, args) {
if (hasOwnKey(__onfireEvents, eventName)) {
_each(__onfireEvents[eventName], function(key, item) {
item[0].apply(item[2], args); //執(zhí)行訂閱時的方法
if (item[1]) delete __onfireEvents[eventName][key]; // 當類型為只訂閱一次時，通知后即移除自己。
});
}
}而fire發(fā)送消息方法實質(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];
//如果找到這個對象則卸載
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;
}因為卸載支持按key、對象、方法卸載，所以需要先判斷類型，然后按各自規(guī)則去解除綁定。
感謝各位的閱讀！關(guān)于“微信小程序中如何實現(xiàn)多個頁面?zhèn)鲄⑼ㄐ拧边@篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
