跳到主要内容

事件系统

事件为页面/组件等实例内部封装逻辑与自定义逻辑的交互方式。当触发事件时逻辑层根据事件绑定的响应,执行对应的处理函数。

微搭中事件流是一组通过各种规则串联动作的集合。事件流分两种:事件内联事件流和独立事件流。

  • 内联事件流:内联在组件或页面等事件内的事件流,由绑定的事件触发,不可复用,没有独立引用。
  • 独立事件流:独立定义事件流,可复用,默认通过类似实例 $w.eventflow1 来引用,需要主动触发 $w.eventflow1.trigger()

事件对象 event

在处理函数的上下文中,特殊的有 event 对象用于访问当前事件的相关信息,event.detail 为当前事件携带的数据,不同事件各不相同。

event

属性说明
detail事件携带的额外数据,由触发事件时决定,不同事件各不相同

事件调度逻辑

事件处理除了绑定单个处理函数外,还可实现简单的流程调度。例如如下配置:

{
"listeners": [
{
"id": "wgdu718n1n8",
"eventName": "tap",
"type": "platform",
"handler": {
"name": "showLoading",
"module": "platform",
"params": {}
}
},
{
"id": "wop5v6q51hg",
"eventName": "wgdu718n1n8.success",
"type": "platform",
"handler": {
"name": "navigateTo",
"module": "platform",
"params": {
"mode": "weDa",
"packageName": "",
"pageId": "u43or8cdj0g",
"params": {}
}
}
},
{
"id": "wecc06m9th8",
"eventName": "wop5v6q51hg.success",
"type": "rematch",
"handler": {
"name": "delay",
"module": "index",
"params": {}
}
},
{
"id": "wf23d9rgp7g",
"eventName": "wecc06m9th8.success",
"type": "platform",
"handler": {
"name": "showModal",
"module": "platform",
"params": {
"cancelColor": "#000000",
"cancelText": "取消",
"confirmColor": "#576B95",
"confirmText": "确认",
"content": "请输入弹窗内容",
"showCancel": true,
"title": "弹窗标题"
}
}
}
]
}

事件绑定

  1. 同个事件上可以绑定多个不同的处理函数,这些处理函数在事件触发时被按顺序,并发调用,同事件多个处理函数之间不互相阻塞。
  2. 当某个事件(上述 tap 事件为例)绑定处理函数(id 为 wgdu718n1n8 的 showLoading)被触发后,会根据当前函数执行成功与否,分别触发 wgdu718n1n8.successwgdu718n1n8.fail 事件,成功时事件 event.detail 为处理函数(showLoading)返回值,失败时为 error 对象。通过每个事件的成功失败分叉和链式串行调用来完成流程调度。
  3. 由于调用链中可能存在异步方法,在调用执行过程中页面生命周期状态可能发生变化,当前页面不在处于激活态(例如:页面发生跳转),此时调用链会在处理完当前任务后发生中断,即每个事件处理节点再进入时都会校验当前页面是否激活,若非激活态则直接不再执行,并不会触发后续的成功/失败事件。

事件处理 handler

事件处理节点中可以定义处理方法,自定义处理方法 (handler) 完全由开发者定义,自定义 handler 方法在适当的定义了入参和返回值后也能够完成事件流的传递。

典型的 handler 处理函数的第一个入参会有 eventdata 两个参数,其中 event.detail 事件数据或者上一个处理节点的返回值或异常,data.target 为事件面板中的配置的入参。当 handler 函数正常通过返回内容时,成功分支的下个节点会被触发,而当 handler 函数抛出异常时,失败分支的下个节点会被触发。

比如,假设事件流中存在 function1/successHandler/failHandler 三个自定义方法的动作节点,调用关系为 function 成功时执行 successHandler,失败时执行 failHandler,代码如下:

index/handler/function1
export default async function ({ event, data }) {
const result = await fetch("http://example.com/movies.json").then(response => response.json());
if (result.code) {
// 接口返回错误时抛出异常
throw new Error(result.message);
// return Promise.reject(result); // Promise.reject 也会走到异常分支
}else {
// 正常返回
return result;
}
}

假设 successHandler 绑定了额外的入参 params,则 event.detail 为前一节点 function1 的返回值,data.target 为额外入参 params

index/handler/successHandler
export async default function ({ event, data }) {
const result = event.detail; // event.detail 指向上一节点的返回值
const params = data.target; // data.target 指向动作节点额外入参

console.log('done', result, params);
// ... 成功处理过程
}

function1 异常时,failHandlerevent.detailfunction1 的异常信息。

index/handler/failHandler
export async default function ({ event, data }) {
const error = event.detail; // event.detail 指向上一节点的错误信息
const params = data.target; // data.target 指向动作节点额外入参

console.log('fail', error, params);
// ... 失败处理过程
}