微信小程序跨页面通信

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：62

最近碰上这样一种业务：

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

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