评论

小程序自定义消息事件示例

自定义事件

小程序自定义消息事件示例
    
用于从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",
    extra3
  })
}, 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
最后一次编辑于  2020-11-11  
点赞 0
收藏
评论
登录 后发表内容