小程序跨页面通信实现

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

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

改良版

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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;

用法

  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方法里面写入移除事件