1. 程式人生 > 實用技巧 >微信小程式跨頁面通訊

微信小程式跨頁面通訊

最近碰上這樣一種業務:

一場拼團活動,當用戶參團購買商品並支付成功後,重新整理商品列表,確保使用者再次進入列表購買同一件商品時該商品的狀態是 " 已參團 " 狀態,以及區分一寫其他業務。

首先,如果使用getCurrentPages()的話,過於繁雜;主要是因為我們的業務有分享功能,邀請好友參團後,好友是直接從商品詳情進入並付款,沒有上級頁面。

因為app我們使用的也是跨頁面通訊的方法,所有想想,肯定小程式也可以實現,終於找到了方法,在這裡記錄一下~】

一、在utils下面新建一個bridge.js (頁面名稱按需求起,我這裡是比較形象化,bridge是橋樑的意思,可以理解成給頁面之間搭一座橋)

var bridge = {};

// on 繫結事件
function on(key, func) {
  if(!bridge[key]){
    bridge[key] = [func];
  }else{
    bridge[key].push(func)
  }
 }

// emit 觸發事件
 function emit(key, params) {
  if(!bridge[key]) return;
  for(let v of bridge[key]){
    v(params)
  }
}

// 移除事件
function remove(key) {
  bridge[key] && delete bridge[key];
}

exports.on = on;
exports.emit = emit;
exports.remove = remove;

二、在提交訂單頁面,支付成功後,觸發事件

// 引入
var bridge = require('../../../utils/bridge.js')

// 觸發事件
refresh () {
    bridge.emit('refreshParentData')
}

三、在需要重新整理資料的頁面繫結方法。

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    bridge.on('refreshParentData',() => {
     // 這是我要重新整理列表的方法
      this.activityInfo()
    })
  } 

    /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    bridge.remove('refreshParentData')
  }

這樣就實現了跨頁面通訊啦~