小程序自定义消息事件示例
用于从A页面发送数据到B页面,或者从B页面提前发送事件到A页面改变数据
需求解决:
1、B页面更新数据成功,需要调用系统的 wx.showToast 吐司提示,如果刚调用立马返回A页面,会造成吐司立刻消失。
2、如果B页面停留两秒吐司完毕再关闭B页面,再进入A页面,可能这个时候用户立马按系统返回,会造成跟定时器两秒同时
返回两次的现象
/**
* 使用示例
*/
messageEvent.addEventListener({
name: "sum"
}, function (res) {
console.log("addEventListener res=>", res);
})
setTimeout(() => {
messageEvent.sendEvent({
name: "sum",
extra: 3
})
}, 1500)
setTimeout(() => {
messageEvent.removeEventListener({
name: "sum",
})
}, 3000)
setTimeout(() => {
console.log(messageEvent)
}, 5000)
消息事件
addEventListener 监听事件
addEventListener({params}, callback(res))
removeEventListener 移除事件监听
removeEventListener({params})
sendEvent 将任意一个自定义事件广播出去,该事件可在任意页面通过 addEventListener 监听收到。
sendEvent({params})
代码片段:https://developers.weixin.qq.com/s/N0EqPfmv7Hkb
如果,想通过小程序构建npm 方式,推荐使用mitt工具:
/*
使用方法:
$ npm init
$ npm install --save mitt
小程序开发工具(工具-构建npm)
https://github.com/developit/mitt/
*/
import mitt from 'mitt'
const emitter = mitt()
// listen to an event
emitter.on('foo', e => console.log('foo', e) )
// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )
// fire an event
emitter.emit('foo', { a: 'b' })
// clearing all events
emitter.all.clear()
// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo) // listen
emitter.off('foo', onFoo) // unlisten