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

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

微信小程序全局事件订阅

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

全局事件订阅
  1. 全局实例
    在Vue中我们有new Vue得到的全局对象,小程序中对应的则是app对象,在小程序组件或者页面中可以通过getApp()获取;
  2. 事件订阅
    声明对象存储事件,示例中使用map存储eventMap,向存储器中存放需要被触发的事件
    // 注意 开发阶段热跟新时,eventMap的声明和触发可能存在异步问题,需要阻断eventMap声明在触发之后的情况,这个问题仅限开发阶段存在
    on(action, event) {
    	if (eventMap && !eventMap.has(action)) {
    		eventMap.set(action, event)
    	}
    }
    
  3. 事件触发
    当业务逻辑需要触发时,调用emit触发指定事件
    emit(action, arg) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.get(action) && eventMap.get(action)(arg)
    	}
    }
    
  4. 事件卸载
    当订阅的事件过多或者确定事件不在被触发时,及时卸载事件可以减少内存压力
    off(action) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.delete(action)
    	}
    }
    

整体代码如下(文件:app.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也可以无参数
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携带的参数也会被传递给自定义事件
const app = getApp()
Component({
	data: {
		count: app.globalData.count,
	},
	// 触发事件
	bindEvent() {
		app.emit('countAdd', this.data.count++)
	}
})

这里changeCount是最终被触发的事件,countAdd是在订阅服务中自定义的事件名,之所以不使用相同的事件名,主要是区分下。文章来源地址https://www.toymoban.com/news/detail-652041.html

整体事件触发逻辑如下:
  1. 先订阅事件 changeCount
  2. 业务需要触发的时候触发bindEvent
  3. emit到全局来调用监听的事件

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用全局事件实现在不同页面之间共享数据或触发特定的操作

    在微信小程序中,你可以使用全局事件来实现在不同页面之间共享数据或触发特定的操作。以下是一个示例代码: 在app.js文件中,定义全局事件: 在上述代码中,我们在App对象中定义了globalData对象,用于存储全局数据。同时,我们定义了onLaunch方法,在小程序初始化时执行

    2024年02月16日
    浏览(46)
  • 微信小程序(二)--- 数据绑定,事件绑定,全局配置window,tabBar,网络数据请求,request合法域名,GET,POST

    目录 一、WXML模板语法 1、数据绑定 (1)Mustache语法 2、事件绑定  (1)常用事件  (2)属性列表  (3)target和currentTarget的区别  (4)bindtap语法格式  (5)在事件处理函数中为data中的数据赋值 (6)事件传参 (7)bindinput的语法格式 (8)实现文本框(input)和data之间的数

    2024年02月04日
    浏览(47)
  • WPF 如何设置全局的订阅发布事件

    我们需要一个全局事件订阅发布功能,实现页面通讯。使两个毫无关系的页面通过一个中间量进行通讯。 IEventAggregator:消息订阅集合 这个是Prism提供的消息订阅功能。使用如下 设置订阅类型,即 官方案例,在ViewModel中使用 Tips:订阅中传递的值和EventClass: PubSubEventstr

    2024年02月15日
    浏览(35)
  • 本地存储、自定义事件、全局事件总线、消息订阅与发布【Vue】

    存储内容大小一般支持5MB左右(不同浏览器可能还不一样) 浏览器通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制 相关API: (1) xxxxStorage.setItem(\\\'key\\\', \\\'value\\\'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。

    2023年04月21日
    浏览(36)
  • 微信小程序订阅消息

    subscribeMessage.send | 微信开放文档 由于业务需求 , 需要实现小程序订单状态发送给用户 , 于是微信小程序发送订阅消息就被找到了 这里前端是使用了uniapp , 具体实现方式不清楚,就不瞎bb了 后端这里就是上面的接口文档 , 总共需要是三个步骤 1. 获取小程序 appid 和 密钥 2. 订阅消

    2024年02月09日
    浏览(54)
  • 微信小程序--订阅消息

    关于小程序订阅消息之一次性订阅: 一次性订阅是指授权一次方可接收一次消息;这个最好的应用场景就是自己给自己发送消息,比如订单,当自己下单成功时,调用此接口,会在微信服务消息收到下单成功通知等具体详情。 如果是给别人发,一次性订阅就不适合,类似你

    2024年02月07日
    浏览(42)
  • uniapp 微信小程序订阅(一次性订阅消息)

    首先我们需要了解微信小程序的一些基本的,才能知道我们要做什么: 微信小程序消息订阅只有两种形式可以召唤出来: 1、用户手动点击按钮 2、支付回调唤起 一次调用最多可订阅3条消息 小程序弹出后,可点击的情况 1、单纯点击取消/确认键 2、勾选了总是保持以上选择

    2024年02月09日
    浏览(45)
  • 微信小程序-小程序订阅消息(四)

    小程序订阅消息 | 微信开放文档 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页面

    2024年02月11日
    浏览(43)
  • 微信小程序:发送小程序订阅消息

    文档:小程序订阅消息(用户通过弹窗订阅)开发指南 在微信公众平台(https://mp.weixin.qq.com)手动配置获取模板 ID 2.1、获取消息下发权限 文档:一次性订阅消息、长期订阅消息 示例代码 这里需要注意一个坑,如果用户未授权,需要引导用户打开设置手动设置 2.2、获取登录凭

    2024年01月25日
    浏览(39)
  • 微信小程序消息订阅功能

    消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅(用户订阅了才能接收推送的消息) 订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页

    2024年02月05日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包