一般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()里移除了当前页面全部的监听事件。