表达式

最近更新时间:2024-03-19 15:01:01

我的收藏
微搭的表达式采用的 JavaScript 语法,您可以在表达式中直接执行原生的 JavaScript 代码,也可以直接在表达式中引用微搭内置的变量、函数以及组件属性 API 等。表达式是微搭可视化组件连接动态数据的重要桥梁,也是低代码平台区分无代码灵活度的体现。 当进入微搭编辑器时,您可以在组件面板的属性配置以及事件面板的属性配置处,切换到 fx 表达式输入框或面板中自定义的 JavaScript 表达式来读取、转换和操作页面上所有页面变量和数据,以及全局变量。

表达式的使用

可通过组件配置面板,单击任意输入框右上角的 fx 图标来激活表达式模式(默认为静态文本),如下图所示:




访问数据

当表达式的输入框聚焦时,会列出变量以及组件属性等内置表达式的自动提示,Hover 时可展示对应表达式运行态的值,选中任意变量后效果,如下图所示:



其中单击上图中的红框放大 icon,可以打开放大版表达式面板,放大模式下,可便于输入更长文本的表达式代码。放大版表达式界面如下所示:




绑定数据

1. 在编辑器中选择输入框组件,在组件属性面板,输入值切换表达式模式显示。



2. 输入框组件输入值绑定表达式,在这里以“应用名称”字段为例。



3. 输入框组件输入值绑定字段显示。




访问对象数据

在微搭编辑器中,Query、组件 API 以及部分系统变量等都是 JS 对象。针对这些 JS 对象,它们都有相应的内置方法或属性。当输入表达式时,在对象名后添加一个 .,就会弹出一个下拉的自动提示列表。您可以在提示列表中单击选择相应的属性或方法,也可以使用上下键进行选择。




访问数组数据

页面中创建自定义变量 array_1



如果要访问存储在数组中的值,可通过数组的下标索引值来访问,数组下标索引从 0 开始,例如访问数组变量 array_1的第一个元素,则可使用 $w.page.dataset.state.array_1[0](输入数组 array_1 相应索引自动提示选择对应变量即可),如下所示:




操作数据

在表达式中支持使用 JavaScript 语法以及调用第三方 JS 库,同时也支持对组件 API、Query 对外暴露的数据进行转换操作。 例如:
对日期的格式进行转换:$w.DateText(Date.now(), "YYYY-MM-DD HH:mm:ss"); //'2024-01-17 17:54:28',更多参考内置 函数表达式
对某个数字类型变量值执行加9527: $page.dataset.state.count + 9527
对一个用户列表的对象数组进行遍历并返回用户的名字:queryUsers.data.map((user) => user.name)



注意:
表达式中的 JS 需满足一定的语法规范,支持类型包括:内置系统方法、自定义 JS 方法以及标准 JS 方法如:map()/reduce()/filter() 结合箭头函数、三目运算符等单行代码。如需编写多行代码,建议使用 自定义 JS 方法 实现业务逻辑后,在表达式中调用即可,例如自定义 JS 方法 function1,则可通过 $page.handler.function1({...}) 在表达式中进行调用。
编辑器左侧状态面板:



说明:
了解更多表达式使用过程中的编写规范和注意事项,请参见 表达式编写规范

表达式可引用的资源类型

在表达式中,除了可以写常规的 JavaScript 表达式代码和自定义变量,也可以引用微搭内置的系统变量系统函数公式,以及开放的组件属性(WidgetAPI),以上几种引用资源类型的具体介绍参考如下:

内置系统变量

微搭内置的系统变量详细介绍请参见 微搭内置系统变量说明文档

组件属性(WidgetAPI)

详细的组件属性 API 介绍请参见 组件属性 API 文档

内置函数公式

微搭内置的函数公式详细介绍请参见 微搭内置函数公式说明文档

其他微搭平台方法

微搭内置的其他平台方法,例如调用数据源、调用云端能力等,请参见 微搭内置平台方法文档

表达式应用示例

从输入框的输入值动态显示在文本组件中。



从数据表或 API 中获取数据绑定到数据列表中。



写一段 JavaScript 代码,例如 filter/transformer。
例如有这样一个场景:从数据源中拿到一个用户列表的数据(例如 queryUsers.data),它的数据结构是:
[
{
"id": 1,
"name": "rocky luo"
},
{
"id": 2,
"name": "judy li"
},
{
"id": 3,
"name": "elon ma"
}
]
如果您希望将用户列表中的 name 字段拆分成姓氏 surname 和名字 givename,则可通过如下方式在表达式中完成数据结构的转换,将下述内容复制到表达式面板中即可。
queryUsers.data.map((row) => {
return {
...row,
givename: row.name.split(' ')[0],
surname: row.name.split(' ')[1],
};
})