Skip to main content

快应用事件动作

快应用支持通过事件动作来实现动态交互效果，事件动作包含可视化动作和代码自定义动作两大类。

可视化动作​

可视化动作包含了常见的应用操作，可以通过可视化配置的方式快速实现交互效果。常见的可视化动作说明如下：

页面跳转​

动作说明
打开页面跳转应用内页面，支持动态传参
跳转链接打开第三方 H5 页面，webview 方式展示
刷新页面刷新当前页面数据
回退页面返回上一页，一般在内页使用

弹框消息​

动作说明
打开弹框打开当前页面指定弹框
关闭弹框关闭当前页面指定弹框
消息提醒关闭当前页面指定弹框

服务​

动作说明
发送请求请求 API 中心配置的第三方 API，支持动态传参与返回结果处理
下载文件通过接口下载文件

组件​

动作说明
组件可见性显示或者隐藏一个或多个组件
组件属性修改选择组件的可变更属性，例如修改文字颜色和按钮文字
刷新组件强制触发指定组件的重新渲染

数据​

页面的显示条件、动作的操作条件均可以根据动态数据执行，因此数据是应用显示状态的核心。数据源默认是页面级别，任意组件均可以读取或者修改数据。

动作说明
提交数据更新或新增数据，一般用于模型实体数据源，如果是 API 则会直接请求 API
刷新数据重新获取数据，已有的数据会被清空重新获取
数据源赋值对数据源进行初始化赋值，例如数据编辑时请求接口后对数据源初始化
设置字段设置数据源指定字段的值
校验表单手动触发表单校验
删除数据删除数据，提供删除 ID，一般用于内置数据源实体数据删除
清空数据源清空页面数据源数据
设置页面变量设置当前页面变量或者应用全局变量的值

小程序&APP​

这些动作主要是小程序及 APP 里使用，快应用 APP 里也支持。

动作说明
拨打电话触发手机电话拨打操作
刷新目标页面标记某个页面激活后自动刷新
发起支付唤起微信、支付宝等支付
退出登录将清空登录 token 及用户登录信息
保存图片保存图片到本机相册
发起分享唤起小程序或 APP 内置的分享
地理定位获取地理位置，使用 gcj02 国测局坐标系
打开位置打开本地地图指定位置
选择图片选择相册中的一张或者多张图片
选择视频拍摄视频或从手机相册中选视频，返回视频的临时文件路径

快应用专属动作​

快应用专属动作只能在快应用 APP 里面使用

动作说明
APP 通知触发手机消息通知
语音合成语音播报，实时播报播报的文本内容

其他动作​

动作说明
延时动作延迟执行，可以实现等待效果
操作确认询问用户是否继续操作，只有确认才会执行后续动作
复制内容复制内容到剪贴板

自定义代码动作​

如果可视化动作不能满足，可以通过自定义代码动作来实现复杂的操作。代码动作在动作面板 -> 高级 -> 自定义动作里。动作是页面级别复用的，编写的自定义动作可以在当前页面任意组件里使用。动作面板包含了快应用的基础示例动作，可以参考快应用官方文档编写更复杂的动作交互。

image

image

需要注意的是如果需要使用系统内置模块，需要使用 require 方式引入，例如:

const storage = require('@system.storage')

不支持在动作内使用 import 方式引入。

动作执行顺序及条件​

如果一个事件里添加了多个动作，默认是串行执行，异步动作会等待动作真正结束后再继续执行，例如异步请求会等待接口返回后才执行下一个动作。如果动作中途报错，后续动作将终止执行。

image

动作编辑面板和动作面板均可以设置动作执行条件，只有满足条件或者未设置条件的动作才会串行执行。条件支持复杂的条件组设置，筛选条件可以读取当前页面的动态数据或者临时变量。

image

自定义动作 API​

自定义动作可以借助平台内置 API 来实现现有可视化动作的效果，目前快应用状态管理使用类似 vuex 语法，自定义动作里 this 即相当于当前页面 page 状态对象，可以调用现有的状态管理方法，常用 API 整理如下。

triggerAction 触发动作​

触发执行平台里的支持的动作，例如跳转页面、修改变量等。常用动作说明如下

跳转 URL

// 打开百度首页
this.triggerAction({
    action: 'URL',
    url: 'https://www.baidu.com' // 支持deeplink
})

跳转页面

// 跳转应用内页面，path或page至少填写一个
this.triggerAction({
    action: 'REDIRECT-PAGE',
    path: '页面路径，可选',
    page: '页面ID, 可选'
})

返回上一页

this.triggerAction({
    action: 'BACK'
})

刷新页面数据

this.triggerAction({
    action: 'RELOAD'
})

打开弹框

this.triggerAction({
    action: 'OPEN-MODAL',
    nodeId: '组件ID'
})

关闭弹框

this.triggerAction({
    action: 'CLOSE-MODAL',
    nodeId: '组件ID'
})

数据源初始化数据

this.triggerAction({
    action: 'DATA-INIT',
    dsId: '数据源ID',
    value: {}, // 初始化数据，一般是对象
    dataType: 'output' // input输入参数, output输出参数
})

数据源字段赋值

this.triggerAction({
    action: 'DATA-ASSIGN',
    dsId: '数据源ID',
    inputFields: [ // 输入参数赋值，可选
        {
            key: 'title', // 字段标识,
            value: '值'
        }
    ],
    ouputFields: [ // 输出参数赋值，可选
        {
            key: 'title', // 字段标识,
            value: '值'
        }
    ],
})

执行自定义动作

this.triggerAction({
    action: 'CODE',
    id: '自定义动作ID'
})

消息提示

this.triggerAction({
    action: 'TOAST',
    message: '内容',
    type: 'info', // 提示类型
    duration: 2000, // 持续时间，毫秒
})

callAPI 请求接口​

this.callAPI({
    api: 'API 标识'
})

页面变量 & 参数​

  • 读取变量: this.getVariableValue('变量 ID')
  • 设置变量: this.setVariableValue('变量 ID', '变量值')
  • 读取参数: this.getParamValue('参数 ID')
  • 读取数据源: this.getDataSource('数据源 ID')
  • 读取数据源字段: this.getDynamicFieldValue('数据源 ID', '字段 key', '索引位置', '数据类型')