小程序--event对象

1.在event对象中的dataset属性使用实例:

 <image src="{{serverUrl}}{{item.coverPath}}" style='width:{{screenWidth}}px;height:210px;' mode="aspectFit" bindtap='showVideoInfo' data-arrindex='{{index}}'></image>


在JS中获取index的值:
 var arrIndex = e.target.dataset.arrindex;

 

2.在event对象中的detail属性的使用实例:

 <picker name="reasonIndex" value="{{index}}" range="{{reportReasonArray}}" bindchange="changeMe">


在JS界面进行获取index的值:var index = e.detail.value;

 

### 如何在微信小程序中使用 Event-Bus #### 创建事件管理器 为了实现在微信小程序中的发布/订阅模式,可以构建一个简单的 `EventBus` 类作为事件管理器。该类将提供接口用于注册监听器、触发事件以及移除监听器。 ```javascript // event-bus.js 文件内容 class EventBus { constructor() { this.events = {}; } on(eventName, callback) { // 注册事件监听器 if (!this.events[eventName]) { this.events[eventName] = []; } this.events[eventName].push(callback); } emit(eventName, data) { // 触发特定名称的事件并传递数据给所有已注册回调函数 const callbacks = this.events[eventName]; if (callbacks && Array.isArray(callbacks)) { callbacks.forEach((callback) => callback(data)); } } off(eventName, callback) { // 移除指定事件上的单个或全部监听器 if (!eventName || !this.events[eventName]) return; if (!callback) delete this.events[eventName]; // 如果未传入具体要删除的回调,则清除此事件下的所有回调 let index = -1; while ((index = this.events[eventName].indexOf(callback)) !== -1) { this.events[eventName].splice(index, 1); // 删除找到的第一个匹配项直到找不到为止 } } } const bus = new EventBus(); export default bus; // 导出实例供其他模块引入使用 ``` 此部分代码展示了如何创建一个基本的 `EventBus` 对象[^1]。 #### 使用 TypeScript 和 mini-core 框架优化开发体验 考虑到现代前端开发的需求和技术趋势,在实际项目里可能更倾向于采用支持静态类型检查的语言如 TypeScript 来编写更加健壮可靠的程序;而像 [mini-core](https://github.com/dntzhang/miniprogram-core) 这样的第三方库可以帮助简化一些繁琐的操作流程,提高编码效率和维护性[^2]。 #### 防止内存泄漏的最佳实践 为了避免因不当处理导致的潜在性能问题——特别是内存泄漏现象的发生,每当页面卸载或者组件销毁之前都应该记得清理掉不再需要使用的事件绑定关系: ```javascript Page({ onLoad() { this.eventHandler = function(message){ console.log('Received message:', message); }; bus.on('changeCount', this.eventHandler); // ... 页面加载逻辑 ... }, onUnload() { bus.off('changeCount', this.eventHandler); }, }); ``` 上述例子说明了在一个典型的生命周期钩子内完成对 `onLoad()` 方法里的事件监听设置及其对应的反向操作即 `onUnload()` 中解除这些关联的重要性[^3]。 #### 完整的工作流描述 整个工作流程涉及先通过调用 `bus.on()` 订阅感兴趣的事件(比如这里的 `changeCount`),之后可以在适当时候利用 `bus.emit()` 发送消息至全局范围内任何已经订阅相同主题的对象那里去接收响应。这种设计使得不同页面间能够轻松共享状态变化信息而不必依赖于复杂的父子级联结构或其他间接方式[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶人超有料

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值