微信小程序全局事件订阅eventBus

微信小程序全局事件订阅

在Vue开发中,我们可能用过eventBus来解决全局范围内的事件订阅及触发逻辑,在微信小程序的开发中我们可能也也会遇到同样的需求,那么我们尝试下在小程序(原生小程序开发)中实现类似eventBus的事件订阅功能。

全局事件订阅

  1. 全局实例
    在Vue中我们有new Vue得到的全局对象,小程序中对应的则是app对象,在小程序组件或者页面中可以通过getApp()获取;

  2. 事件订阅
    声明对象存储事件,示例中使用map存储eventMap,向存储器中存放需要被触发的事件

    js 复制代码
    // 注意 开发阶段热跟新时,eventMap的声明和触发可能存在异步问题,需要阻断eventMap声明在触发之后的情况,这个问题仅限开发阶段存在
    on(action, event) {
    	if (eventMap && !eventMap.has(action)) {
    		eventMap.set(action, event)
    	}
    }
  3. 事件触发
    当业务逻辑需要触发时,调用emit触发指定事件

    js 复制代码
    emit(action, arg) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.get(action) && eventMap.get(action)(arg)
    	}
    }
  4. 事件卸载
    当订阅的事件过多或者确定事件不在被触发时,及时卸载事件可以减少内存压力

    js 复制代码
    off(action) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.delete(action)
    	}
    }

整体代码如下(文件:app.js):

js 复制代码
const eventMap = new Map()
App({
	globalData: {
		count: 1
	},
  // 事件订阅
	on(action, event) {
		if (eventMap && !eventMap.has(action)) {
			eventMap.set(action, event)
		}
   },
  // 事件卸载
	off(action) {
		if (eventMap && eventMap.has(action)) {
			eventMap.delete(action)
		}
   },
  // 事件触发
	emit(action, arg) {
		if (eventMap && eventMap.has(action)) {
			eventMap.get(action) && eventMap.get(action)(arg)
		}
	}
})
页面或者组件中使用
  1. 订阅on,订阅自定义事件countAdd(自定义事件名),并且传入事件被触发后需要被触发的逻辑,这里的changeCount就是在事件被触发是订阅触发的数据,当然触发事件的参数可以来自emit也可以无参数
js 复制代码
const app = getApp()
Page({
	data: {
		count: app.globalData.count,
	},
	created() {
		// 注册事件
		app.on('countAdd', this.changeCount.bind(this))
	},
	changeCount(count) {
		this.setData({
			count
		})
	}
})
  1. 发布emit,发布自定义事件countAdd(自定义事件名)来触发所有监听该事件的订阅者(既注册了on的组件或者页面),emit携带的参数也会被传递给自定义事件
js 复制代码
const app = getApp()
Component({
	data: {
		count: app.globalData.count,
	},
	// 触发事件
	bindEvent() {
		app.emit('countAdd', this.data.count++)
	}
})

这里changeCount是最终被触发的事件,countAdd是在订阅服务中自定义的事件名,之所以不使用相同的事件名,主要是区分下。

整体事件触发逻辑如下:

  1. 先订阅事件 changeCount
  2. 业务需要触发的时候触发bindEvent
  3. emit到全局来调用监听的事件
相关推荐
说私域1 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔4 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54588 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui