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

皮皮高2023-08-27 17:18

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

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

javascript 复制代码

/**
  by ppg
  1282797911@qq.com
  2023.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[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对象下：

javascript 复制代码

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

然后在是调用：

javascript 复制代码

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

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

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