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

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

根目录创建文件夹utils，新建文件eventBus.js（致敬java平台的EventBus），码入以下代码：

/**by ppg1282797911@qq.com2023.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 // 根key
const _map = new Map() // 储存key和监听的关联数组module.exports = {eventBus
}

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

来看看用法：

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

// app.js
App({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()里移除了当前页面全部的监听事件。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！