借助一个 weapp-event 的第三方插件可以轻松实现小程序跨页面通信

原作者的这个插件有时候会出现发送两次的问题,为此我改良了一下

改良版 Link to heading

在发射事件里面添加了一个判断来检测

var events = {};

function on(name, self, callback) {
  var tuple = [self, callback];
  var callbacks = events[name];
  if (Array.isArray(callbacks)) {
    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 cb = events[name],callbacks;
  if(cb){
    callbacks = [];
    callbacks.push(cb[0]);
  }
  console.log(callbacks);
  if (Array.isArray(callbacks)) {
    callbacks.map((tuple) => {
      var self = tuple[0];
      var callback = tuple[1];
      callback.call(self, data);
    })
  }
}

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

用法 Link to heading

  1. 在需要发送和监听事件的页面引入此js

  2. 发送事件:event.emit(‘事件名’, 发送的数据) eg: event.emit(‘chat’, ‘success’)

  3. 监听事件:event.on(‘事件名’,this,data => { console.log(data) }) eg: event.on(‘chat’,this,data => { console.log(data) })

  4. 移除事件:event.remove(‘事件名’, this) eg: event.remove(‘chat’, this) 监听事件后,必须在页面的onUnload方法里面写入移除事件