事件流(eventflow)是一系列前端行为动作(action)的集合,可按照开发者指定的顺序和逻辑执行。事件流主要应用于页面中同一类行为动作的抽象和复用(例如提交数据后跳转页面),以及自定义代码和数据查询回调等场景。
注意:
目前事件流仅支持页面内作用域,暂不支持应用全局作用域。
事件流的使用
新建事件流。
在编辑器左下角的代码区可通过单击 + 号新建。
![](https://qcloudimg.tencent-cloud.cn/image/document/96fe85c8e8f03ee319543790c6daf407.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/96fe85c8e8f03ee319543790c6daf407.png)
配置事件流。
1.1 进入事件面板,选择所需要的事件动作节点。
![](https://qcloudimg.tencent-cloud.cn/image/document/f6ea298ce2d47407e8a63437e552c1ea.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f6ea298ce2d47407e8a63437e552c1ea.png)
1.2 进入任意事件动作节点后,可以继续配置节点执行成功或失败时的下一个动作,其余节点以此类推,就可以完成一个完整事件流的配置和复用了。
![](https://qcloudimg.tencent-cloud.cn/image/document/afc9bedf7539ae8b5e88c35dae7d5388.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/afc9bedf7539ae8b5e88c35dae7d5388.png)
事件流的调用/触发方式
通过事件面板的调用事件流节点触发,参考如下:
为按钮添加点击事件,选择调用事件流。
![](https://qcloudimg.tencent-cloud.cn/image/document/ca6320af6c79d7f629dac73358713d61.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ca6320af6c79d7f629dac73358713d61.png)
其中,如果要对事件流传参,则可以在入参输入框中切换到 fx 表达式模式,填入对应的 JS 对象和变量即可,例如:
{name:'test'}
。![](https://qcloudimg.tencent-cloud.cn/image/document/31f730e9a41d799248661d9018f755c4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/31f730e9a41d799248661d9018f755c4.png)
在 数据查询(query) 的回调中触发。
![](https://qcloudimg.tencent-cloud.cn/image/document/d139cfab28c237f48751c27312e6b5c1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d139cfab28c237f48751c27312e6b5c1.png)
如果需要在数据查询 query 的回调中对事件流传参,可在入参输入框切换到 fx 表达式模式,填入对应的 JS 对象和变量即可,例如:
{foo: 1, bar: 2}
,或者在 query 的回调中,可直接填入 query 执行的返回值,例如:$w.query1.data
。在自定义 JS 代码中触发。
在 JavaScript 代码中触发方式:
$w.eventflow1.trigger({...})
,其中 trigger() 括号中传入 JS 对象,例如:$w.eventflow1.trigger({foo: 1, bar: 2})
。获取调用事件流时的入参
事件流的入参方式,默认通过表达式传入对象(JS Object)的方式进行传参,在事件流中可以通过对
event.detail
对象来读取入参对象的属性值,如下图所示:示例:如
query1
执行成功时,调用事件流 eventflow1
,对应入参结构如下所示:{..."pcd": "河北省,石家庄市,长安区","createdAt": 1706514887398,"createBy": "1727993690338758658","updateBy": "1727993690338758658","phone": "13166666666","name": "test",...}
![](https://qcloudimg.tencent-cloud.cn/image/document/c49dd850d72318eff1209e873bedc340.png)
在事件流
![](https://qcloudimg.tencent-cloud.cn/image/document/c49dd850d72318eff1209e873bedc340.png)
eventflow1
中获取入参值方式示例如下:![](https://qcloudimg.tencent-cloud.cn/image/document/0ac2c4407cddcf1f045e697d78a8bf9c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0ac2c4407cddcf1f045e697d78a8bf9c.png)
当
query_one
执行成功后,则会回调事件流 eventflow1
,效果如下图所示:![](https://qcloudimg.tencent-cloud.cn/image/document/2da7ad1dfe8c6f401a5b945c66be3c01.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2da7ad1dfe8c6f401a5b945c66be3c01.png)