多個頁面傳參通信在微信小程式中的實現

剛接觸微信小程序，對裡面的語法和屬性還不怎麼了解，最近正在努力學習中，下面這篇文章主要給大家介紹了微信小程序中多個頁面傳參通信的相關資料，是最近學習的一個內容總結，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

微信小程式越來越火，不少公司都在將原生程式碼轉換為微信小程式碼。在開發過程中，由於微信小程式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），簡潔實用。

可以用於：

• #簡單的事件分發；

• 
  

#在

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)...

。

要注意：一定要在onUnload裡取消訂閱

key

的訊息，並取消綁定eventObj。 ##

 onfire.fire('key');//key为上文中订阅的消息
 //有参数时
 onfire.fire('key','test');

從程式碼可以看出訂閱on方法的時候實際呼叫_bind方法，該方法，主要是利用一個二維陣列來儲存訂閱的

物件。來遍歷訂閱者，然後通知訂閱者。 ##總結

以上是多個頁面傳參通信在微信小程式中的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！