华为云用户手册

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

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性 链接地址：输入自定义图片的图片地址。 图片地址：选择或上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，图片不超过1MB。 图片库有如下几种类型： OBS/MINIO/OBJECTSTORAGEPROXY：通过连接器获取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代码

自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人满意的效果。利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。 标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提供某一部分的布局，多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中，“栏”组件的呈现形式，实现不同大小屏幕下不同的显示方案，如图13。 图13 分栏组件 “分栏”组件右侧属性配置面板的“行布局”中，可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。 为了方便说明，如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图14。 图14 分栏组件模拟录入员工信息 “phone”属性中，可以依据图示，选择“分栏”组件中“栏”，在移动端的布局形式，如图12所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列，此时单击页面上方的“全屏”，手机图标就可以模拟在移动端展示的效果，如图15。 图15 移动端展示效果“竖排” 如果在“phone”中，依旧选择从左到右的布局方式，则展示效果如图16。 图16 移动端展示效果“横排” 布局模式：可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的介绍请参见基础布局设置。 录入分隔比例：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”为“8:8:8”，如图17所示。 图17 “录入分隔比例”为“8:8:8” 调整“录入分隔比例”为“6:12:6”时，中间的“栏”的宽度就会按比例放大，两侧“栏”的宽度按比例缩小，如图18。 图18 “录入分隔比例”为“6:12:6”

基础布局设置 标准页面提了流式布局（Flow Layout）和弹性布局（Flex Layout），标准页面的基础布局主要是通过“容器”组件实现的。 容器组件就是基础的布局容器，可以将其理解为CSS中DIV的概念。DIV是层叠样式表中的定位技术，全称Division，即为划分，有时可以称其为图层。 DIV是HTML中的一个标签元素，用来为HTML文档内大块的内容提供结构和背景的元素，可以将“容器”简单理解为画布，通过设置外层画布的属性达到控制内容布局的效果。 流式布局 容器组件默认弹性布局未开启，处于流式布局的状态，如图1所示。 图1 流式布局 在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图2所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。 图2 流式布局中组件为块级元素 流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图3、图4所示。 图3 居中水平对齐 图4 靠右水平对齐 弹性布局 将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局，弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图5所示。 图5 弹性布局 为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。 默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图6所示。 图6 弹性布局默认效果 排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图7。 图7 排列方向“列” 水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图8、图9所示。 图8 水平对齐方式选择“中间对齐” 图9 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图10、图11所示。 图10 垂直对齐方式选择“中间对齐” 图11 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图12所示。 图12 弹性布局实现居中

属性绑定 除了值绑定外，不同组件还拥有不同的属性，例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上，类似vue中的v-bind语法。 “模态框”组件默认弹出是不可拖动的，在上例的基础上增加一个按钮，当单击该按钮让模态框变为可拖动的，以此来演示“属性绑定”，如图9所示。 图9 新增一个按钮用来控制模态框“可拖动”属性 新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定，如下图所示。 图10 模态框组件属性绑定 与上一个例子类似，在新增的“模态框拖动”按钮的点击事件中，将“modalDrag”设置为true。 图11 设置事件 图12 编辑代码 单击，保存页面后，单击，进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动，关闭模态框单击“模态框拖动”按钮后，模态框再次弹出即为可拖动效果。 图13 属性绑定演示效果

值绑定 值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明，新建一个标准页面，向页面中拖动一个“按钮”组件和一个“模态框”组件。将模态框绑定在一个数据模型上，当按钮被单击时模态框弹出，实现组件间通过数据模型交互的效果，如图2。 图2 “值绑定”示例页面 选中“模态框”组件，在右侧属性配置面板配置值绑定，选择一个数据模型进行绑定，此处新建一个自定义模型“modalShow”，如图3，单击“下一步”，再次单击“下一步”，单击“确定”，选中该模型。 图3 新建模型 图4 选择模型 图5 完成值绑定后页面展示效果 支持选择任意类型的模型，进行值绑定，更多标准页面模型内容请参见4.6 如何获取后台数据。 选中“按钮”组件，在按钮组件的事件配置面板，为按钮组件添加“点击”事件。 图6 为“按钮”组件添加“点击”事件 在弹出的编辑面板，单击左侧“设置模型实例数据”，将代码粘贴到编辑面板。将模型名称替换为待修改的模型“modalShow”，值设置为“true”。 图7 编辑单击事件 单击，保存页面后，单击，进入预览页面。在预览界面，单击“弹出模态框”按钮，“模态框”组件弹出。 图8 “值绑定”演示效果 以上示例简单说明了，如何通过“值绑定”实现组件间的交互。将组件的值（value）绑定在一个模型上，通过其他组件触发事件，改变绑定数据模型的值。例如，此例中“模态框”组件的值，绑定在“modalShow”模型上，“按钮”组件的点击事件将“modalShow”改变为true，模态框即显示，单击“模态框”关闭按钮“modalShow”模型的值变为false。

数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。 值绑定：表单、表格、列表视图对应的数据绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。 属性绑定：将组件的某个属性，如只读、禁用、必填等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 图1 数据绑定配置面板

如何使用服务编排查询数据 使用服务编排中“记录查询”图元，查询自定义对象Class（CNAME__Class__CST），实现“select name,CNAME__number__CST from CNAME__Class__CST”。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“逻辑”。 单击编排后的，进入新建服务编排页面。 设置服务编排的标签和名称为“flowSearchData”，单击“添加”。 图4 设置服务编排信息 在服务编排设计器中，单击，在全局上下文中创建变量“name”、“number”，类型分别为“文本”、“数字”。 图5 创建变量 在服务编排的“基本”图元目录下，拖拽一个“记录查询”到画布中。 图6 拖拽记录查询到画布中 参考图7，配置对象和输出。 图7 配置“记录查询” 连接开始图元和记录查询图元，配置服务编排出参。 图8 配置服务编排出参 配置完成后，单击页面上方的，保存服务编排。 单击，运行服务编排。 本服务编排中不需要输入参数，直接单击“运行”，查看输出的json格式结果。 图9 服务编排实现查询自定义对象的字段

支持自动审批 AstroZero支持用户任务自动审批功能，例如设置“主管审核”任务自动审批。在用户任务配置界面，指定该任务具体某一接收人，可使用表达式的形式将任务指派某一用户，在自动审批中进行设置。 流程触发人自动通过：若勾选该选项，任务接收人是流程触发人时，该用户任务会被自动审批。 已审批过该流程的审批人自动通过：若勾选该选项，任务接收人在当前工作流实例中已审批过其他用户任务，则该用户任务会被自动审批。 图1 自动审批设置 当任务接收人设置为“当前泳道”对应的工作队列或用户组时，将无法使用自动审批功能。只有任务接收人设置为某一用户时，才可进行自动审批。 父主题： 深入了解用户任务

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在主菜单中，选择“检查”，进入立即检查页面。 图1 选择检查 检查完成后，在页面上方的“检查”中，会显示问题个数。 图2 查看问题个数 单击下方立即检查后的，选择当前工程的内核版本，单击“确定”。 查看异常信息，根据异常信息内容解决问题。 立即检查：执行应用检查，检测应用中的元素是否存在问题。 异常描述：给出异常问题的描述信息，指明错误原因。 资源类型：出现异常问题的元素类型。 来自应用：出现异常问题的应用。 资源：出现异常问题的具体元素，单击则可跳转至对应组件元素。 检测完成后，若无异常信息，应用可以正常打包发布。

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 单击页面右上方的，进入协作页面。 单击“开发者”，开启“开发者管理已关闭”功能。 开启后，可以指定哪些用户可以访问和编辑该应用，并设置权限。默认该开关关闭，表示环境上所有开发者，都可以访问并编辑该应用。 只有拥有“应用管理”权限的用户，才能开启关闭此开关，有权添加用户、删除用户及修改用户权限。 当用户新创建一个应用时（包括克隆、导入），该用户默认具备应用的所有权限，因此该用户可以开启和关闭开关。 图1 开发者 图2 开启后效果 单击“添加”，选择所需开发人员，单击“下一步”。 应用的管理者或应用的创建者，可以为当前应用添加开发者用户。被添加的开发者用户，可以访问或编辑该应用，由权限控制。 图3 选择用户 为添加的用户设置权限，单击“确定”。 选择“是”，按需为开发人员分配对应权限。用户必须要有查看应用权限项，才能通过应用设计器（包括新版和经典版）打开应用，否则进入应用设计器时会提示“您没有访问该应用的权限”。 图4 为用户设置权限 选择“否”，表示默认拥有原有的开发权限。被添加到应用中的标准用户，已在环境中具备了某种角色，在该应用中，此用户默认按其系统角色包含的权限来操作应用。 设置完成后，单击“确定”，完成用户的添加。 单击已添加用户后的，可修改用户权限。 单击已添加用户后的，可移除已添加的用户。开启“开发者管理”权限的用户，无法修改其应用权限，也不可以删除该用户。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 内容或链接：设置扫描二维码后，要展示的文本内容或者跳转的链接地址。 宽度：二维码的宽度，单位像素。默认值为150。 容错级别：二维码被遮挡或残破时依然能被识别的几率，容错级别越高抗残破或遮挡的能力就越强。 空白间距：四周空白间距，单位像素。 前景色：二维码的颜色。 背景色：背景颜色。 中间Logo：二维码中间Logo图片，可不用设置。设置Logo后，如果扫描二维码识别失败，可以调高容错级别或调大二维码。 Logo大小：设置Logo的大小，单位像素。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

什么是技能 开发技能前，请先了解什么是技能。技能用于完成一系列特定交互功能的一个独立的对话机器人，具体的交互功能由技能内的意图定义。 在Astro Bot中，您可以通过如下三种方式，创建技能。 创建自定义技能：通过自定义模板，创建并设计对话流程，帮助用户实现自定义的智能对话。 通过副本创建技能：通过创建技能副本，快速创建自定义技能，节省用户时间，帮助用户快速准确的创建技能。 创建知识库问答技能：通过FAQ问答模板，快速创建知识库问答技能，实现话语的语义匹配，帮助用户精确匹配问题，给出最优的答案。

初识Astro Bot开发环境 图2 Astro Bot开发环境 表1 Astro Bot开发环境功能介绍 功能 功能介绍 技能管理 技能列表：单击“新建技能”，创建一个新技能。 技能审核：具备“OneTalk FullAccess”权限的用户，可以在该页签下对已申请发布且待审核的技能进行技能审核，也可以查看已通过和已拒绝的审核记录 API管理 后端服务管理：用于配置同一个API，在不同环境下对应的不同域名。 API定义：用户自定义意图时，需要设置对话流程。对话流程中使用“调用操作”节点时，会使用到API，需要提前配置API。 系统管理 订购华为云Astro智能助手后，会自动分配一个项目ID，后续调用对话机器人服务时，需要使用到该项目ID。 技能分析 针对不同的技能，统计用户的话语、对话量和用户数量。

步骤4：新建自定义意图 在意图页签，单击“新增意图”。 在新建意图页面，设置意图名称，单击“确定”。 图5 新建全局变量 添加触发短语。 在添加短语的输入框中，输入“[我要|我想]”。 单击选择实体后的，选择步骤3：添加辅助词中，创建的辅助词“reserved”。 图6 选择辅助词 在选择实体中，选中步骤2：新建实体中新建的实体，输入“会议室”，按Enter。 图7 选择实体 图8 输入会议室 再添加一个触发短语“我要预订会议室”，单击“保存”。 图9 添加短语 添加提出问题。 在意图编辑页面，单击触发短语下的，选择“提出问题”。 图10 选择提出问题 在提出问题下，输入“你要预订哪间会议室？”，设置机器人的提出问题。 图11 设置提出问题 在识别中，选择步骤2：新建实体中新建的实体“meeting_with_room”。 图12 选择实体 修改参数名为“room”，单击编辑响应下的“点击编辑”。 图13 设置参数名 选择步骤2：新建实体中创建的实体“meeting_with_room”，按Enter键后，单击“确定”。 图14 编辑用户响应 添加显示消息。 在意图编辑页面，单击提出问题下的，选择“显示信息”。 将鼠标悬浮在显示消息上，单击设置参数后的，选择4中设置的参数。 图15 选择room参数 在显示信息输入框中，输入“预订成功！”后，按Enter键。 图16 显示信息设置效果 单击显示信息下的，选择“结束对话”。 单击页面上方的“保存模型”，保存已创建的模型。 保存成功后，单击“建立模型”。 单击“模型版本”，可查看模型各版本构建结果。 图17 查看模型构建结果

步骤2：新建实体 实体用于对用户输入文本中的关键信息，进行标注。例如，用户预定会议室，可能输入“预定XXX会议室”，其中“会议室”可以定义为“meeting_with_room”实体。 在实体页签，单击“新建实体”。 在新建实体页面，设置实体名称和实体值。 图3 新建实体 实体英文名称：新建实体的英文名称，本示例设置为“meeting_with_room”。 实体中文名称：新建实体的中文名称，本示例设置为“会议室名称”。 实体值：实体值组成了实体。例如，“会议室”做为实体，实体值可以是N1、N2和N3。 设置完成后，单击“保存”。 在实体列表中，可查看到已添加的实体。

有什么应用类型可以打包 在对轻应用或者行业应用打包时，打包类型支持打资产包或者源码包，它们的区别请参见源码包与资产包对比。打包说明如下： 源码包：该类型包中的所有组件，都不受保护和限制，源码包只能发布到“我的仓库”。在其他环境安装后可编辑包中组件，即在原有基础上可进行再开发。若后续其他用户在开发环境安装后，会显示在开发环境首页的“项目”页签下。 资产包：该类型支持设置包中的组件是否受保护。打包时不做编译设置，默认打出的包都是资产包，包中组件都为只读保护模式，将包安装到其他环境时，只能运行和预览。不可编辑包中组件。若后续其他用户在其他开发环境安装资产包后，应用会显示在开发环境首页的“库”页签下。 发布应用包时，在应用开发页面左侧单击，会出现如下图所示界面，AstroZero资产包支持多种发布方式。 图1 应用发布方式 表1 发布说明 发布方式 说明 我的仓库 即发布到租户私仓，开发好应用后，将应用发布到我的仓库，可供其他用户在其他开发环境、沙箱环境、运行环境中下载安装软件包，以便于测试或者使用该软件。更多介绍，请参见如何将应用发布到“我的仓库”。 华为OneMobile 可将应用中的标准页面和高级页面发布到华为OneMobile。需要输入华为OneMobile的用户名和密码或扫码进行授权登录。选择该方式发布后，在华为OneMobile上可生成应用程序二维码，扫码后按照提示可体验该应用。更多介绍，请参见如何将应用发布到华为OneMobile。 华为OneMDOS 将应用小程序发布到OneMDOS，更多介绍请参见如何将应用发布到华为OneMDOS。 发布到华为OneMDOS为白名单特性，需要联系后台管理人员开通后方可使用。 WeLink-We码 华为云的企业WeLink，融合消息、会议、邮件、音视频、小程序等服务，打造企业数字化办公协作平台，实现团队、知识、业务、设备的全面连接。AstroZero允许将标准页面或高级页面以小程序（即应用）的方式发布到企业WeLink，提供给企业用户使用。 发布到蓝标WeLink-We码的具体操作，请参见发布WeLink We码应用。 WeLink-轻应用 AstroZero支持将应用发布成WeLink轻应用，提供给WeLink企业用户使用。 发布到蓝标WeLink-轻应用的具体操作，请参见发布WeLink轻应用。 微信 可将应用中的标准页面和高级页面发布到微信小程序。 如何发布到微信的具体操作，请参见发布成微信小程序。 下载前端运行包 选择该方式可生成前端运行包，获取包后可运行在如下容器中： 华为OneMobile 蓝标WeLink Web容器（当前只支持高级页面） 更多介绍，请参见如何将应用发布成下载前端运行包。 开天企业工作台 将应用小程序发布到华为开天企业工作台，更多介绍请参见如何将应用发布到开天企业工作台。 发布到华为开天企业工作台为白名单特性，需要联系后台管理人员开通后方可使用。

使用说明 连接器图元中有一种特殊的图元，用于对接开天集成工作台，调用开天集成工作台上已有的API。在服务编排中，如何使用连接器图元的更多介绍，请参见连接器图元。 开天集成工作台是面向应用开发者和API开发者，提供基于元数据的可扩展的集成框架，打造开放、共生、智能、协同的技术标准体系，从而降低应用间的集成工作量，并沉淀多种集成资产，如连接器、领域信息模型资产等的平台。更多相关介绍，请参考开天集成工作台产品文档。 该能力为白名单特性，需要联系后台管理人员开通后方可使用。