微信小程序自定义全局事件监听实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序自定义全局事件监听实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

/**
  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.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()里移除了当前页面全部的监听事件。文章来源地址https://www.toymoban.com/news/detail-674969.html

到了这里，关于微信小程序自定义全局事件监听实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！