华为云用户手册

高级设置 在高级设置中，选择设置的文本内容，在出现的配置弹窗中，可进行是否加粗、是否倾斜、字号、字体、文本颜色、背景颜色、对齐方式等配置。 图3 编辑器中文本配置 另外，若需要在文本中设置变量，变量值来自文本桥接器“TextConnector”中的配置，若配置为静态数据，变量值取自“outDatas”中配置的数据。 可变参数下标请从0开始，变量样式为“{0}”，预览页面后效果为“变量值”。带转义符“\”的变参不会被替换，例如文本组件内容为“\{1}{1\}{\1}”，预览页面后效果为“{1}{1}{1}”。连续两个转义符时，则第二个转义符失效，变参会被替换，例如文本组件内容为“\\{2}”，预览页面后效果为“\变量值”。 图4 文本中变量配置 图5 预览页面效果

高级设置 在高级设置中，可设置图片填充类型。 图3 高级设置 图4 图片设置页面 图5 上传图片/视频 单击“选择图片”，在页面单击目录后的和，可管理图片目录。单击“上传图片/视频”，可进行上传操作。 选择“填充”表示图片不保证保持原有比例，图片拉伸填满整个容器。 选择“包含”表示图片保持原有尺寸比例，可能会在容器内留有空白。 选择“覆盖”表示图片表示原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。 选择“无”表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。

属性 在属性中，设置自定义背景框组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置图片组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片地址：直接输入图片地址，来展示图片。 连接器设置 使用连接器：是否使用连接器。 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。 选择连接器：选择具体的连接器实例。 选择桶：连接器的存储桶。 使用相对地址：使用图片的相对路径。

流式布局高级页面 在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”，单击高级页面后的，进入添加高级页面。 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。 图9 新建流式布局类型高级页面示例 绝对布局类型高级页面与流式布局类型高级页面不同之处。 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在“组件属性设置”栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。 也可以通过拖拽组件最右侧边框，调节其所占列数。 图10 流式布局中调整组件宽度示例 当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。 图11 组件所占列数之和小于12 通过拖拽的方式，调整组件上下、左右的排布次序。 图12 调整组件上下、左右的排布次序示例 流式布局类型高级页面，在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。 图13 悬浮模式示例 上图中标注说明如下： 标注1：在高级页面工具栏中，开启悬浮模式。 标注2：拖入新组件。 标注3：悬浮模式下，组件相对位置设置选项。 相对定位 Screen：该组件基于当前视图的相对位置。 Layout：该组件基于当前布局的相对位置。 Widget：该组件基于其他组件的相对位置。 组件位置：设置相对定位的具体方位。 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。 最大高度：设置该组件的最大高度，单位为px或%。 宽度：设置该组件的宽度，单位为px或%。

绝对布局高级页面 创建绝对布局类型的高级页面。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”，单击高级页面后的，进入添加高级页面。 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。 图1 新建绝对布局类型高级页面 开发绝对布局类型的高级页面。 以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方，单击，设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的，保存页面。 单击，预览高级页面，查看当前页面在运行态的效果。 图8 预览高级页面

事件 在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。 表1 事件编排 事件名 说明 返回值 数据改变 已上传文件列表改变时触发。 当前已上传文件列表。 文件上传 开始上传文件时触发。 当前开始上传的文件。 当前已上传文件列表。 操作成功 上传成功后触发。 上传成功文件的地址。 选中文件 文件列表选中时或取消选中时触发。 当前文件。 已选中的文件。 文件上传前 文件上传前触发。 在“文件上传前”事件后，单击齿轮图标，在“自定义JS代码”中增加“$current.showUploadList = false”语句，可取消上传预览。 当前文件。 文件名。

使用说明 低代码平台预置了很多默认样式，供您选择使用，同时也支持对标准页面的主题样式进行自定义修改。 自定义主题时，可以自定义修改标准页面的样式。设置完成并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 默认分页大小：设置默认每页条数（分页大小）。 每页条数切换的配置：每页条数切换的配置，如[10,20,40,100]。 大小：分页显示大小，可选值为small（迷你版）或不填（默认）。 简洁版：是否简洁版显示分页样式。 AUI风格：是否展示AUI风格。 显示跳转：是否显示跳转，显示后可设置快速跳转到某一页。 显示分页：是否显示分页，显示后可设置具体的分页大小。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的 CSS 样式类名，可在 CS S代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

绑定数据模型 设置组件绑定的数据模型，有自定义对象、对象、服务和事件四种。 向页面中拖入一个表格（新）组件，单击“表格”页签，在表格属性“数据绑定”中单击，绑定数据模型。 图3 数据绑定 在弹出页面中，单击“新增模型”。 设置表格的数据模型，添加对象模型，模型名称“equipmentInstance”，单击“下一步”。 图4 创建数据模型 “选择对象”选择一个提前创建好的对象，例如“HW__Equipment__CST”，“选择字段”中选择表单中需要展示的字段，单击“下一步”。 图5 选择展示字段 在方法页面，单击“确定”，返回选择模型页面。 勾选刚建好的数据模型，单击“确定”。 绑定对象模型后，显示如图6所示。系统默认添加了斑马纹，如果不需要，可在表格属性的“基本设置”中关闭“斑马纹”。 图6 绑定数据模型后的结果列

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 无数据显示：无数据时，显示的名称。 列数(PC)：设置PC端显示列数。 列数(Mobile)：设置移动端显示列数。 列数排列方式：选择列数排列方式，如居中、左对齐和右对齐等。 显示加载中：当要展示的内容较多时，用户看到页面内容可能需要稍长时间，开启加载中效果，体验会更好。 移动端配置：列表视图在移动端的设置。 下拉刷新：下拉是否刷新列表。 默认数据条数：设置移动端列表视图，默认展示数据的数量。 显示加载文字：是否显示上拉加载文字。 异步加载：和事件（on-load-data）配合使用，上拉加载时，异步获取数据。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性值绑定 在列表视图的“属性”页签，单击“数据绑定”中的，绑定数据模型。 模型实例化必须为数组，详情请参见绑定数据模型、增加查询条件、工具栏。 图3 绑定数据模型 向列表视图中拖入栅格容器，将栅格容器设置为6行2列，再向前5行中拖入标签组件，并设置标签属性。 属性值绑定。 选择第一行、第二列中的标签，单击右侧“属性值绑定”的“+”，新增属性值绑定。 其中，“属性”设置为“文本内容”，再单击，添加模型字段，将模型字段绑定到当前标签上。 重复上一步，为其他行的标签组件进行属性值绑定。 在第6行拖入一个按钮，设置为“Handle”。 在页面上方，单击，保存页面。 保存成功后，单击，进入预览页面，预期效果如图4。 进行属性值绑定的标签组件，显示绑定的模型字段内容。 图4 通过属性值绑定获取模型中的数据

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 配置菜单：单击“设置”，可设置菜单。 图标：配置菜单的图标。 文本内容：配置菜单的显示名称。 RUL类型：菜单跳转页面的URL类型，如“常量”、“选择页面”。 地址：当“URL类型”为“常量”时，需要配置跳转页面的具体URL地址。当“URL类型”为“选择页面”时，需要选择系统中创建的具体跳转页面。 链接目标：跳转后页面显示形式。 新窗口：在新窗口页，显示跳转页面。 当前框架：在当前框架，显示跳转页面。 父框架：在父框架区域，显示跳转页面。 整个窗口：在当前整个窗口，显示跳转页面。 分隔符：菜单名之间的分隔符。 跳转：单击面包屑组件的菜单标签，是否开启自动跳转，默认为开启。若不开启跳转，可在“事件”页签定义跳转的实现方法，即进行事件编排。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 扩展 ：单击“新增行”后的或者，可在当前“分栏”上方或者下方新增分栏（即新增行）。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性 链接地址：输入自定义图片的图片地址。 图片地址：选择或上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，图片不超过1MB。 图片库有如下几种类型： OBS/MINIO/OBJE CTS TORAGEPROXY：通过连接器获取OBS或MINIO桶中的图片，需要提前配置OBS/MINIO/OBJECTSTORAGEPROXY类型连接器，选择具体的存储桶、连接器实现获取图片功能。 连接器：OBS/MINIO/OBJECTSTORAGEPROXY类型的连接器。 桶：OBS/MINIO类型连接器的存储桶。 SFTP：选择SFTP后，图片将加密上传至nginx服务器的本地文件系统中。 OBS/MINIO/OBJECTSTORAGEPROXY图片库，支持按目录管理图片： 单击目录后的和，新增根图片目录和子图片目录。 单击“上传图片”，可上传图片。 选中图片时，单击，可以在图片库中删除此图片。 预览：预览时，是否支持单击放大图片。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 禁用：是否禁用该组件。 只读：值是否只读。 样式 图片宽度：设置图片的宽度和高度，单位为px。 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 移动端配置：页面在移动端的配置，如当页面下拉时，是否刷新页面。 公共 控件名称：当前组件的名称。 保持会话：开启后将会与服务端维持心跳连接，若用户长时间未操作，当监听到用户的鼠标或键盘事件时，会向后台发送请求刷新访问凭证。 ElementUI样式：低代码平台默认加载了ElementUI，开启后即可使用。 背景图片：单击，设置页面的背景图片。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 水印 启用水印：页面是否启用水印。 水印内容：启用水印后，支持设置水印内容。 当前用户：当需要设置水印内容为当前用户名时，可开启该项。开启后，“水印内容”中的文本不生效。 水印长度：设置水印矩形框的长度。 水印宽度：设置水印矩形框的宽度。 重复渲染：当需要设置满页面水印时，可开启该项。 水平起始位置：关闭“重复渲染”时，才可设置，表示单个水印在页面的水平起始位置。 垂直起始位置：关闭“重复渲染”时，才可设置，表示单个水印在页面的垂直起始位置。 字体颜色：设置水印字体的颜色。 字体大小：设置水印字体的大小。 旋转角度：水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度：水印的透明度设置。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 扩展 ：单击“新增行”后的或者，可在当前“分栏”上方或者下方新增分栏（即新增行）。 行布局 在“行布局”中，系统支持设置PC或者Phone手机端布局，并默认提供了一些常见的行布局，如单栏、二等分栏等。单击在“行布局”中的某一个模式，例如单击，当前分栏将被分割成3栏，如图3所示。 图3 默认行布局 您也可以通过单击，手工输入的方式自行设置列的分隔比例，比例相加份数总和必须为24，例如12:12、6:18、3:21、8:8:8等。自定义比例以英文冒号分隔。 分栏组件会根据分辨率大小自适应，当画布宽度小于992像素，PC会展示为单列模式，此时可以通过调整左侧菜单收缩或者画布分辨率来查看不同的效果。 图4 自定义行布局 布局模式：设置PC或Phone屏幕，每一个分栏的栏布局模式。 流式布局：页面元素的宽度，按照屏幕分辨率进行适配调整，但整体布局不变。 弹性布局：可以简便、完整、响应式的实现各种页面布局，选择“弹性布局”时还可以设置垂直对齐方式、水平排列方式以及分栏间隔。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。

控制组件只可读不可编辑 在用户填写调查问卷页面，选中“提交”按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“只读/编辑控件”。 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。 图1 选择组件 设置组件是否可编辑，单击“创建”。 图2 设置是否可编辑 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，填写问卷项后，单击“提交”按钮，可预览按钮的事件效果。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性 弹性布局：是否开启弹性布局。开启后，可以简便、完整、响应式的实现各种页面布局。 列数：设置表单的列数。开启弹性布局时，才显示该配置。 标签对齐方式：设置标签对齐方式，如左对齐、右对齐和上侧对齐。 动态表单数据：请输入SON格式的选项内容。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 禁用：是否禁用该组件。 只读：值是否只读。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

通过自定义JS代码编排事件 通过手动编写JS代码，实现按钮的事件逻辑。系统支持在手动编写JS代码时，进行代码联想提示。同时，系统还封装了一些常用功能的接口，并将其中典型接口做成模板，可以从左侧拖动相关模板至右侧事件定义区域，直接使用。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JS代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 内置JS事件说明及使用方法，请参见如何通过JS代码，实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下： //获取当前组件var _component = context.$component.current;//获取当前表单var _form = context.$component.form;// 重置表单_form.resetFields(); 返回标准页面开发界面，单击页面上方的，保存页面。

弹出消息对话框 该预置动作，用于弹出消息对话框。以单击“确定”按钮，弹出“创建实例成功”的消息对话框为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”，单击“弹出消息对话框”，设置相关参数，单击“创建”。 图4 关闭弹出页面 消息类型：弹出的消息类型，如成功、错误、警告和提示。 标题：消息对话框左上角，显示的标题。 消息内容：消息对话框中，显示的消息内容。 内容作为HTML渲染：内容是否作为HTML渲染。动态渲染HTML容易导致XSS攻击，开启此属性时，请确保传入的内容是可信的。 按钮：消息对话框中，显示的按钮名称。 弹出后延时自动关闭：弹出后，是否支持延时自动关闭。勾选后，需要设置延时秒数。 例如：勾选该参数，并设置延时3秒。效果为弹出消息对话框后，3秒后自动关闭该弹框。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“确定”按钮，可预览按钮的事件效果。

通过内置动作编排事件 系统预置了多种常用的事件交互动作，您可以根据需要直接使用，来实现页面或组件之间的交互。 下面以编排一个重置功能的按钮为例，介绍如何通过内置动作编排事件。本示例主要是通过内置动作“重置表单”实现该功能，即重置表单数据。“提交表单”是指将页面数据提交到表单中，和重置表单配置类似，不再单独介绍。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。 图3 添加动作 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

弹出页面 以单击“提交”按钮，弹出“提交成功”的提示页面为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“弹出页面”，配置目标页面、窗口选项，单击“创建”。 图2 弹出页面 目标页面：设置弹出的目标页面类型。 当前应用页面：当前应用中，已创建好的页面。 URL：某个页面的URL。 窗口可拖拽：窗口是否可来回拖拽。 窗口标题：弹出窗口的标题内容。 窗口位置：弹出窗口在屏幕的位置，如屏幕中央或屏幕顶部居中。 窗口宽度：窗口的宽度，单位像素。 窗口高度：窗口的高度，单位像素。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“提交”按钮，可预览按钮的事件效果。

AI代码补全功能 功能描述：开发者在JS代码编写过程中，键入特定的字符，界面会进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 使用方法：开发者在JS代码编辑器中，编写代码过程中敲击字符时，会自动触发代码推荐，选中后按Enter补全。 事件内置API补全：输入“context”后，提示事件代码内可调用的API。 模型名称补全：输入“context.$model.ref”后，提示当前页面中的模型。 服务编排名称补全：输入“context.flow”后，提示当前租户下的服务编排。 脚本名称补全：输入“context.script”后，提示当前租户下的脚本。 服务名称补全：输入“context.service”后，提示当前租户下的 API服务 ，选择API服务名称后自动补全服务地址。 华为OneMobile API补全：输入“xm”后，提示华为OneMobile小程序中的API。 WeLink API补全：输入“HWH5”后提示WeLink小程序中的API。

打开页面 以单击“立即体验”按钮，打开新的产品体验入口页面为例，进行介绍。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“打开页面”，配置目标页面、打开方式等参数，单击“创建”。 图1 打开页面 目标页面：设置待打开的目标页面。 当前应用页面：当前应用中，已创建好的页面。 URL：某个页面的URL。 重新加载当前页面：加载刷新当前的页面。 打开方式：设置目标页面的打开方式，如在新标签页中打开或在当前窗口打开。 参数绑定：当打开的页面URL中，有参数时，可单击“添加”，设置页面URL路径中的参数。 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览页面，单击“立即体验”按钮，可预览按钮的事件效果。

定义页面数据模型 打开一个标准页面，在标准页面的左下方，单击“模型视图”。 图1 单击模型视图 在“模型视图”中，单击“新增模型”。 添加模型，定义模型名称与来源，单击“下一步”，如图2所示。 图2 定义模型 低代码平台支持四类模型（如图2），每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义 开发者自行定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的详细介绍，请参见什么是对象。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见7.1 什么是服务编排和8.1 什么是脚本？。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 若上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 若上一步来源选择“对象”，需要配置模型关联的对象以及字段。 若上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 若上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。 图2 单击文件上传后的加号 在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。 图3 使用“debugger”设置断点 返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。 在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。 在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。 图4 “Console”页签查看日志相关信息 图5 在“Network”页签查看网络请求信息 单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码

什么是执行后台逻辑 在标准页面执行后台逻辑，即在标准页面组件的事件中，调用其他服务补充和实现当前事件的行为。 例如，在员工信息录入页面中，在信息“提交”按钮的“点击”事件中，调用API，将表单中的员工信息发送到数据库进行保存。或者调用在标准页面中的服务编排或脚本，并对需要保存的信息进行预处理。 标准页面执行后台逻辑一般是通过调用标准页面服务和调用第三方接口两种方式实现。本章节主要介绍调用标准页面服务，关于标准页面调用第三方接口的内容请参见如何调用第三方接口。 标准页面的服务主要分为服务编排（Flow）、脚本（Script）和公共接口（API）三种，对应的页面模型为“服务”。 图1 页面模型（服务）