当前位置: 主页 > 日志 > 个人日记 > 文章

微信小程序不同页面间通信

发布时间: 2022-10-27 09:35:19 作者: 王乐园 浏览次数: 465

使用类似eventBus的形式,通过事件发布,事件订阅实现通信,举一反三 也可以用于所有前端项目

1.事件绑定,事件解绑,触发事件的方法封装

// util/event.js
let handleSuccess = 'handleSuccess' 
var events = {};
function on(name, self, callback) {
    console.log(events)
    var tuple = [self, callback];
    var callbacks = [];
        callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.splice(name,1)
        callbacks.push(tuple);
    }
    else {
        events[name] = [tuple];
    }
  
}

function remove(name, self) {
    var callbacks = events[name];
    if (Array.isArray(callbacks)) {
        events[name] = callbacks.filter((tuple) => {
            return tuple[0] != self;
        })
    }

}

function emit(name, data) {
    var callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.map((tuple) => {
            var self = tuple[0];
            var callback = tuple[1];
            callback.call(self, data);
        })
    }
}
module.exports = {
    on,
    remove,
    emit,
    handleSuccess
}

2.使用实例

需要更新的页面

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const that = this
    // 注册监听事件
    event.on(event.handleSuccess,this,function(res){
      // res是传递回来的参数
      that.setData({
        count: that.data.count + res
      })
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 注销监听事件
    event.remove(event.handleSuccess, this)
  }

触发更新的页面

// 点击事件
  handleAdd() {
    event.emit(event.handleSuccess, 2)
  }



本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: