微信小程式多頁面傳參通訊的探索與實踐

邵磊發表於2017-05-02
微信小程式

一、前言

最近微信小程式越來越火，不少公司都在將原生程式碼轉為微信小程式程式碼。在開發過程中，由於微信小程式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.com/hustcc/onfi… [作者不是我]
可以用於:

  • 簡單的事件分發；
  • 在 react / vue.js / angular 用於跨元件的輕量級實現；
  • 事件訂閱和釋出；

三、實踐

整理下思路如下：

  1. A頁面先訂閱一個事件，並定義處理方法。
  2. B頁面返回時傳送訊息。
  3. 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。
B頁面裡程式碼在回撥的地方加入

   onfire.fire('key');//key為上文中訂閱的訊息
   //有引數時
   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方法的時候實際呼叫_bind方法，該方法，主要是利用一個二維陣列來儲存訂閱的物件。

  function _fire_func(eventName, args) {
    if (hasOwnKey(__onfireEvents, eventName)) {
      _each(__onfireEvents[eventName], function(key, item) {
        item[0].apply(item[2], args); //執行訂閱時的方法
        if (item[1]) delete __onfireEvents[eventName][key]; // 當型別為只訂閱一次時，通知後即移除自己。
      });
    }
  }複製程式碼

而fire傳送訊息方法實質呼叫_fire_func方法，通過名字key來遍歷訂閱者，然後通知訂閱者。

  function un(event) {
    var eventName, key, r = false, type = typeof event;
    if (type === string_str) {
      // 如果存在key值，則移除陣列
      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) {
        //兩層迴圈來判斷是否是方法名
      _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、物件、方法解除安裝，所以需要先判斷型別，然後按各自規則去解除繫結。

五、總結

有了這個事件分發庫，很多問題遊刃而解。
轉載時請註明出處juejin.im/post/5907f1…

相關文章