微信小程序跨页面通信

最近碰上这样一种业务：

一场拼团活动，当用户参团购买商品并支付成功后，刷新商品列表，确保用户再次进入列表购买同一件商品时该商品的状态是 " 已参团 " 状态，以及区分一写其他业务。

首先，如果使用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')
  }

 

这样就实现了跨页面通信啦~