微信小程序不同页面间通信
发布时间: 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)
}
上一篇:(转载)追忆过往青春
下一篇:(转载)时光悠悠 岁月无言