• 微信小程序跨页面通信


    最近碰上这样一种业务:

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

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

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

  • 相关阅读:
    畅通工程续
    find the safest road
    Window Pains
    什么是DO / DTO / BO / VO /AO ?
    编程四大件
    1.Redis简介和安装
    0.Redis课程大纲
    8.docker容器虚拟化与传统虚拟机比较
    7.docker私有仓库
    6.Docker服务编排
  • 原文地址:https://www.cnblogs.com/Awen71815iou/p/14087530.html
Copyright © 2020-2023  润新知