2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 微信小程序 自定义全局事件监听实现

微信小程序 自定义全局事件监听实现

时间:2019-10-06 11:22:03

相关推荐

微信小程序 自定义全局事件监听实现

一般app页面都需要关联刷新,比如登录后刷新登录前页面,故此,需要一个全局事件监听类,怎么实现呢?

根目录创建文件夹utils,新建文件eventBus.js(致敬java平台的EventBus),码入以下代码:

/**by ppg1282797911@.8.26**/const eventBus = {post: function ({ // 发送事件params: params, // 事件参数event: event // 事件名称}) {for (var eventMap of _map) {for (var obj of eventMap[1]) {if (obj[0] == event) {obj[1](params)}}}},off: function ({ // 移除使用该key添加的所有监听事件key: key, // key,通过newKey()获取}) {_map.delete(key)},/*** {* 'key': {* 'event': listener* }* }* **/on: function ({ // 开始监听event事件key: key, // key,通过newKey()获取event: event, // 事件名称listener: listener // 回调}) {var eventMap = _map.get(key)if (eventMap == null) {eventMap = new Map()_map.set(key, eventMap)}eventMap.set(event, listener)},newKey: function (params) { // 获取key_key ++return _key}}var _key = -1 // 根keyconst _map = new Map() // 储存key和监听的关联数组module.exports = {eventBus}

主要就是newKey、on、off、post方法,分别是创建key、开始监听、结束监听、发出事件等功能实现。

来看看用法:

首先是添加调用方式,打开app.js,这里onLaunch方法里添加一下代码,将调用方法添加到wx对象下:

// app.jsApp({onLaunch() {wx.eventBus = require('utils/eventBus.js').eventBus}})

然后在是调用:

Page({onLoad() {this.key = wx.eventBus.newKey()wx.eventBus.on({key: this.key,event: 'change',listener: function (params) {console.log('change回调')console.log(params)}})},onReady() {wx.eventBus.post({params: {tips: '回调的参数'},event: 'change'})},onUnload() {wx.eventBus.off({key: this.key})}})

说明一下代码:

1.onLoad()里调用newKey()生成key,这个key将作为页面的标识符,添加和移除全部的事件监听时需要;

2.onReady()里调用post()发出事件,并携带了参数;

3.onUnload()里移除了当前页面全部的监听事件。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。