事件系统
事件为页面/组件等实例内部封装逻辑与自定义逻辑的交互方式。当触发事件时逻辑层根据事件绑定的响应,执行对应的处理函数。
事件对象 event
在处理函数的上下文中,特殊的有 event 对象用于访问当前事件的相关信息,event.detail 为当前事件携带的数据,不同事件各不相同。
event
属性 | 说明 |
---|---|
detail | 事件携带的额外数据,由触发事件时决定,不同事件各不相同 |
事件调度逻辑
事件处理除了绑定单个处理函数外,还可实现简单的流程调度。例如如下配置:
{
"listeners": [
{
"id": "wgdu718n1n8",
"eventName": "tap",
"type": "platform",
"handler": {
"name": "showLoading",
"module": "platform",
"params": {}
},
"isCapturePhase": false
},
{
"id": "wop5v6q51hg",
"eventName": "wgdu718n1n8.success",
"type": "platform",
"handler": {
"name": "navigateTo",
"module": "platform",
"params": {
"mode": "weDa",
"packageName": "",
"pageId": "u43or8cdj0g",
"params": {}
}
},
"isCapturePhase": false
},
{
"id": "wecc06m9th8",
"eventName": "wop5v6q51hg.success",
"type": "rematch",
"handler": {
"name": "delay",
"module": "index",
"params": {}
},
"isCapturePhase": false
},
{
"id": "wf23d9rgp7g",
"eventName": "wecc06m9th8.success",
"type": "platform",
"handler": {
"name": "showModal",
"module": "platform",
"params": {
"cancelColor": "#000000",
"cancelText": "取消",
"confirmColor": "#576B95",
"confirmText": "确认",
"content": "请输入弹窗内容",
"showCancel": true,
"title": "弹窗标题"
}
},
"isCapturePhase": false
}
]
}
- 同个事件上可以绑定多个不同的处理函数,这些处理函数在事件触发时被按顺序,并发调用,同事件多个处理函数之间不互相阻塞。
- 当某个事件(上述 tap 事件为例)绑定处理函数(id 为 wgdu718n1n8 的 showLoading)被触发后,会根据当前函数执行成功与否,分别触发
wgdu718n1n8.success
和wgdu718n1n8.fail
事件,成功时事件event.detail
为处理函数(showLoading)返回值,失败时为 error 对象。通过每个事件的成功失败分叉和链式串行调用来完成流程调度。 - 由于调用链中可能存在异步方法,在调用执行过程中页面生命周期状态可能发生变化,当前页面不在处于激活态(例如:页面发生跳转),此时调用链会在处理完当前任务后发生中断,即每个事件处理节点再进入时都会校验当前页面是否激活,若非激活态则直接不再执行,并不会触发后续的成功/失败事件。