华为云用户手册

用户和业务用户 在进行任务分配时，AstroZero平台提供了两种用户可以进行任务的分配，分别是用户和业务用户。 用户（User）：是租户账号或子账号开发者，用来管理应用和业务用户。购买AstroZero的租户账号默认拥有所有权限，是管理员用户，可添加子账号并为其配置需要的权限。 业务用户（即PortalUser）：是访问在AstroZero中开发的业务应用的用户账号，即业务应用的使用者。 您可以在BPM中通过用户任务图元，在用户任务配置页面的“接收人”模块，通过以下三种方式将任务分配给用户或业务用户。 当前泳道 流程发起人的主管 名称和表达式 基于规则 图1 接收人类型

当前泳道 “用户任务”图元接收人类型设置为“当前泳道”，将泳道和工作队列绑定，则处于该泳道的用户任务图元，由该泳道对应工作队列中的成员去处理。工作队列中的成员可以是多个用户、业务用户、公共组中成员、角色或带有下属的角色中成员。配置过程如下： 参考管理队列中操作，创建工作队列，将处理任务的用户或者业务用户加入工作队列中。 例如，创建派单员工作队列“Dispatcher”。 图2 创建工作队列 如图3所示，“用户任务”的接收人类型选择“当前泳道”，可以将任务分配给“当前泳道角色的任意成员”或“当前泳道中的上一个任务被分配的人员”。 图3 用户任务中设置当前泳道接收 如图4所示，单击左侧泳道区域，在“泳道配置”中设置派单员工作队列“Dispatcher”。 处于该泳道的用户任务图元，则由工作队列“Dispatcher”中的成员去处理。 图4 设置泳道

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面 CSS 属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写 CS S代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 图5 样式属性配置面板 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持“px”、“em”和“%”三种单位。 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的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(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

初识BPM 在经典版应用设计器中，将光标放在应用的某个目录上，单击“+”，选择“BPM”。在弹出的“添加工作流”中，设置BPM的标签和名称后，单击“添加”，即可进入BPM设计界面。 图1 创建BPM BPM设计界面由上方按钮区域、左侧面板图元区域、中间画布工作区域和右侧属性配置区域四部分组成。 图2 BPM设计界面 表1 BPM设计界面说明 序号 分类 功能说明 1 按钮区域 功能按钮区域，包括锁定、解锁、启用（或者禁用）、保存、另存为新版本或者新BPM、运行、操作回退、撤销回退、启用流跟踪器以及切换版本的操作。支持快捷键操作，即可脱离鼠标直接用键盘操作。 2 面板图元区域 BPM的组成图元，详细介绍请参见BPM图元。 3 画布工作区域 设计操作区域，在该区域可对BPM进行具体流程设计、组件放置。 选中图元或者泳道按“Delete”，可进行删除操作。 4 属性配置区域 整个BPM、泳道（Lane）或者图元属性设置区域。 当选择BPM中图元时，右侧配置区域为该图元的属性设置区域。 当选择BPM中空白区域时，右侧配置区域为该BPM的设置区域。 当选择泳道左侧标签时，右侧配置区域为该泳道的属性设置区域。

如何使用发送邮件图元 在基本中，拖拽“发送邮件”图元至画布中。 选中发送邮件图元，单击，设置基本信息。 表1 基本信息参数说明 参数 说明 标签 设置图元的标签，用于在服务编排设计页面展示。系统会自动填入该值，格式为Email序号，序号从“0”开始，表示同类型图元序号。 名称 设置图元的名称，名称为图元在服务编排中的标识，请确保在当前服务编排中唯一。命名要求如下： 长度范围为1~80个字符。 必须以英文字母开头，由英文字母，数字和单下划线组成，且不能以下划线结尾。 描述 请根据实际需求，在输入框中输入图元的描述信息。 取值范围：1~255个字符。 单击，在“发送邮件”页面进行配置。 图1 配置直接编辑邮件 图2 配置基于模板邮件 表2 发送邮件图元配置参数说明 参数 说明 直接编辑 手动设置邮件信息。 基于模板 基于同一租户或基线里已有的邮件模板，设置邮件主题和内容。 模板 当选中“基于模板”时，需要选择邮件模板。如何新建邮件模板，请参见邮件模板。 主题 邮件标题。 当选中“直接编辑”时，需要配置邮件标题。 当选中“基于模板”时，该参数配置区域置灰。 内容 邮件内容。 当选中“直接编辑”时，需要配置邮件内容。 当选中“基于模板”时，该参数配置区域置灰。 自定义变量 当选中“基于模板”时，需要配置模板中的参数，在“值”中进行赋值。 地址 接收人的邮箱地址。 文本：直接输入邮箱地址，多个地址请用分号分隔，或者从全局上下文拖拽变量代表一个接收人的邮箱地址。 集合：表示可以从全局上下文拖拽集合变量，集合变量即数组型变量，表示多个接收人的邮箱地址。在定义变量时勾选“是否为数组”，则该变量被定义为集合变量。 抄送 抄送人员的邮箱地址，直接输入分号分隔的字符串或者从全局上下文拖拽变量。 密送 秘密发送人员的邮箱地址，直接输入分号分隔的字符串或者从全局上下文拖拽变量。 是否同步发送 是否开启同步发送功能。

创建标准页面 参考登录AstroZero新版应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 （可选）单击页面后的，为标准页面添加目录。 标准页面默认存放在根目录下，在创建标准页面前，您可以先创建标准页面存放的目录，也可以在标准页面创建后将其拖拽到指定目录。 将鼠标放在已创建的标准页面目录上，单击。 如果无需创建标准页面目录，请直接单击页面后的。 选中“空白”，设置页面的标签和名称，单击“添加”。 图1 设置标准页面基本信息 表1 标准页面参数说明 参数 说明 标签 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~64个字符。 名称 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 说明： 名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 根据业务需求，设计标准页面。 参考为AstroZero标准页面添加组件中操作，为标准页面添加组件。 参考设置AstroZero标准页面组件属性中操作，设置标准页面组件属性。 参考添加事件实现AstroZero组件间交互中操作，添加组件交互。 设计完成后，单击页面上方的，保存标准页面。 保存成功后，单击，预览标准页面。 如果预览效果和预期不符，可返回标准页面进行修改，直至符合预期。

自定义标准模板 参考登录AstroZero新版应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的标准页面上，单击，选择“编辑”。 在标准页面的编辑页面，单击，进入另存为页面。 设置模板标签和名称，打开“另存为模板”开关，单击“创建”。 图1 另存为模板 表1 另存为模板参数说明 参数 说明 标签 输入模板的标签名，用于在页面显示，创建后可修改。 名称 输入模板的名称，名称是模板在系统中的唯一标识，创建后不可修改。 命名要求：必须以字母开头，不允许有连续的下划线，空格和特殊字符。 另存为模板（模板可在标准页面-页面模板中查看到） 勾选后，该标准页面模板，可在页面模板中查看到。 缩略图 显示当前标准页面的缩略图。 另存为完成后，当前用户或同一华为账号下的其他用户，创建类似应用时，可以直接使用该模板来创建。 图2 选择基于模板 图3 我的模板

操作场景 若应用中有与ROMA Connect对接，即如下场景。请参考本章节操作，在AstroZero中设置ROMA Connect信息。 场景一：通过配置连接器和ROMA Connect对接后，调用ROMA Connect的服务API，从而集成ROMA Connect的服务。配置连接器的操作，请参见对接ROMA Connect调用服务的API。 场景二：通过配置数据接入，可集成ROMA Connect的消息数据，将消息上报并转化为平台内部的事件。配置数据接入的相关操作，请参见通过数据接入将消息类数据接入AstroZero。

只读/编辑控件 “只读/编辑控件”内置动作，用于控制标准页面中全部或部分组件是否可编辑。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“只读/编辑控件”。 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。 图10 选择组件 设置组件是否可编辑，单击“创建”。 图11 是否可编辑 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览设置后的效果。

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

显示/隐藏控件 “显示/隐藏控件”内置动作，用于控制标准页面中全部或部分组件是否可见。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“显示/隐藏控件”。 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。 图6 选择组件 设置组件是否显示，单击“创建”。 图7 组件是否显示 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览设置后效果。

启用/禁用控件 “启用/禁用控件”内置动作，用于控制标准页面中全部或部分组件是否启用。 在标准页面设计界面，选中按钮组件。 在右侧“事件”页签中，单击，进入添加动作页面。 在“内置动作”中，单击“启用/禁用控件”。 在右侧页面中，单击“添加控件”，选择需要设置的组件，单击“确定”。 图8 选择组件 设置组件是否启用，单击“创建”。 图9 设置是否启用 返回标准页面开发界面，单击页面上方的，保存页面。 单击，预览设置后效果。

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

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

通过内置动作编排事件 参考登录AstroZero新版应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的页面上，单击，选择“编辑”。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的“+”，进入添加动作页面。 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。 图1 添加动作 本示例选择“重置表单”内置动作，其他内置动作功能介绍，如表1所示。 表1 内置动作功能说明 内置动作 功能介绍 打开页面 该预置动作，用于在当前页面中打开当前应用中已创建好的页面。 弹出页面 该预置动作，用于在当前页面中弹出当前应用中已创建好的页面。 关闭弹出页面 该预置动作，用于关闭弹出页面。 弹出消息对话框 该预置动作，用于弹出消息对话框，如成功、错误、警告和提示等。 显示/隐藏控件 该预置动作，用于控制页面上的全部或部分组件是否可见。 启用/禁用控件 该预置动作，用于控制页面上的全部或部分组件是否可用。 只读/编辑控件 该预置动作，用于控制页面上的全部或部分组件是否可编辑。 打印 该预置动作，用于将页面数据提交到表单中，和重置表单配置类似。 提交表单 该预置动作，用于打印表单中的字段。 BPM 在工作流中经常使用到“用户任务”图元，表示在业务流程中由用户参与完成某些工作，如填写表单提交数据、进行审批等。“用户任务”会关联一些页面呈现给用户进行处理。标准页面预置了几种与工作流流程相关的事件，供工作流关联标准页面时使用。 BPM-提交实例 该预置动作用于将数据提交到工作流，与预置的API“context.$工作流.submitInstance (variables:object)”效果相同。 BPM-提交任务 该预置动作用于将数据提交到工作流，与预置的API“context.$工作流.submitTask (variables:object)”效果相同。 BPM-转派任务 该预置动作用于转派工作流中的用户任务。 BPM-更改变量 该预置动作用于设置工作流中的变量值，与预置的API“context.$工作流.putVariables (variables:object, instId: string)”效果相同。 BPM-加载变量 该预置动作用于获取工作流中的参数变量，与预置的API“context.$工作流.loadVariables()”效果相同。 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

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

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

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 默认分页大小：设置默认每页条数（分页大小）。 每页条数切换的配置：每页条数切换的配置，如[10,20,40,100]。 大小：分页显示大小，可选值为“小”和“默认”。 简洁版：是否简洁版显示分页样式。 AUI风格：是否展示AUI风格。 显示跳转：是否显示跳转，显示后可设置快速跳转到某一页。 显示分页：是否显示分页，显示后可设置具体的分页大小。

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持的单位有px、em和%。 阴影：设置阴影颜色、模糊、扩散等，支持的单位有px、em和%。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的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(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

样例代码解读 通过以下详细的脚本代码内容解读，对脚本有一个更具体的认识。一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图18 引入平台标准库 定义出参、入参结构。 图19 定义入参 图20 定义出参 定义方法以及使用的对象。 图21 定义方法及使用对象 进行数据库操作。 图22 数据库相关操作 以下将通过解读一个脚本样例，带您了解脚本的总体结构框架及编写要求。 import * as decimal from 'decimal'; @action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; } @action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; } @action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; } @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } } 上述示例脚本主要分为如下三部分： 导入标准库或其他模块。 上例中，第1行表示使用平台提供的decimal库。 import * as decimal from 'decimal'; 除了平台预置的标准库，还可以声明对其他自定义模块的引用。例如，已提前开发了一个脚本cirle，可以用如下方式加载它。 import * as circle from './circle'; 定义输入、输出变量。 脚本可以有多个输入、输出参数，也可以没有。所有的输入或输出参数，必须封装在一个class中，作为实例成员。 本例中，脚本有6个输入参数，被封装为ActionInput。每个参数都必须定义其参数类型，同时还可以定义是否必填、标签、最大值、最小值等可选属性。 @action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; } 因为第6个输入参数“obj”的参数类型为自定义对象，所以还需要给出“ MyObject”的定义。 @action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; } 脚本中有1个输出参数，被封装为ActionOutput。 @action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; } 定义方法 样例中，ActionDemo是外部调用的class，使用export导出。ActionDemo定义了一个action method，使用action.method装饰，表明调用脚本时从此方法入口。greet是class的实例方法，其输入、输出参数就是前面定义的ActionInput和ActionOutput。在一个脚本文件中，action.method只能使用一次。 @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } } 脚本编辑页面不支持单步调试，样例里的console.log可实现在日志里打印过程输出，方便代码调试。

代码编辑器 在代码编辑区域，在符号上单击鼠标右键，会出现如图2所示代码导航功能。除此之外，脚本编辑器还提供了智能提示、代码补全、显示光标的所在行和列信息等能力。 图2 代码导航 Go to Definition 在代码编辑区域，在符号上单击鼠标右键，选择Go To Definition，可以跳转到符号的定义代码部分。 Go to References 在代码编辑区域，在符号上单击鼠标右键，选择Go to References，可以查看符号在脚本中的引用情况。 Go to Symbol 在代码编辑区域，单击鼠标右键，选择Go To Symbol，选择任意符号，可以跳转到该符号的定义代码部分。 Run 在代码编辑区域，在符号上单击鼠标右键，选择Run，执行脚本。 Peek Definition 在代码编辑区域，在符号上单击鼠标右键，选择Peek Definition，可以查看代码的定义。 Peek References 在代码编辑区域，在符号上单击鼠标右键，选择Peek References，可以查看代码的引用。 Rename Symbol 在代码编辑区域，在符号上单击鼠标右键，选择Rename Symbol，可重命名所选符号。 Change All Occurrences 在代码编辑区域，选中一个字符串，单击鼠标右键，选择Change All Occurrences，可以批量修改代码中所有包含该字符串的内容。 Format Document/Format Selection 在代码编辑区域，选择一块代码，单击鼠标右键，选择Format Selection；或者直接在任意位置单击鼠标右键，选择Format Document，可以对代码进行格式化排版。 Fix lint issue 在代码编辑区域，选择一块代码，单击鼠标右键，选择Fix lint issue；或者直接在任意位置单击鼠标右键，选择Fix lint issue，可以对代码进行静态规范错误修复。 Cut/Copy 在代码编辑区域，选择代码单击鼠标右键，选择Copy，可以剪切或者拷贝所选代码。 Command Palette 在代码编辑区域，在符号上单击鼠标右键，选择Command Palette或者按F1，进入命令面板，可以执行很多编辑功能。 图3 命令面板 Hover 把鼠标停留在符号上，可以查看符号的定义概要。再按住Ctrl键，单击符号，可以查看符号更加详细的定义。 例如，鼠标停留在“useObject”上，显示图4所示，可查看其定义概要。按Ctrl键，单击“useObject”，可查看更详细的定义，如图5。 图4 查看定义概要 图5 查看更详细的定义 Bracket matching 高亮显示与选择内容匹配的符号，如{}、()、[]等。 图6 Bracket mathching Errors & Warnings 编辑代码时，如果有语法错误，会在这个语法下面显示红色波浪线，鼠标移动上去，会显示具体错误。 图7 Errors&Warnings Go to Line 按“Ctrl + g”，再输入行号，可以跳转到指定的代码行。 Search and Replace 按“Ctrl + f”，输入关键字，可以搜索当前代码的内容。表示搜索的内容分别支持大小写匹配、全文匹配、正则表达式。 按“Ctrl + h”，输入关键字，可以查找并替换代码中的内容。 Code Complete 全局符号补全 图8 complete_symbol 对象成员补全 图9 complete_member 参数补全 图10 complete_parameter Comment Code 在代码编辑区域，选择一块代码，输入“Ctrl + /”组合键，可以注释或去注释选择的代码块。 Save File 在代码编辑区域，“按Ctrl + s” ，或者单击右上角的保存图标，可以保存脚本。

AI代码补全功能 代码补全引擎会从开发者历史创建脚本中，学习其编码习惯，从当前代码脚本中获得代码上下文语法知识。开发者在编写脚本代码过程中，系统根据代码上下文和历史代码，对将要编写的代码进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 AI代码补全功能具体使用方法：开发者在代码编辑器中，编写脚本代码过程中，敲击字符时自动触发代码推荐，选中后按Enter补全。开发者将鼠标移动到待查看详细信息的字段，将字段悬浮窗中的文字选中复制粘贴到代码中。 如果想深入了解AI代码补全功能，请继续阅读以下内容： 常规补全：开发者编码过程中，输入任意字符均会触发的补全提示。 例如：开发者键入“@u”，如下图所示，系统根据意图在代码编辑器中给出最可能使用的方法。 图11 常规补全 定制补全：低代码平台脚本开发中，提供了内部预置系统级依赖库，供开发者调用。用户也可以在前台页面配置对象数据、系统参数、错误码、事件和工作流后，在脚本中引用这些内容。定制补全是指在脚本开发中引用依赖库和各配置项时，IDE触发的对潜在内容名称的补全提示。 依赖库补全：脚本代码中引入依赖的代码行时，对依赖库的名称进行推荐提示。如下图所示，开发者输入“import * as xxx from”后，提示“z”开头的依赖库名称。 图12 依赖库补全 表名（即对象名）补全：脚本代码引入对象数据的代码行中，推荐提示对象名称。如下图所示，开发者键入“@useObject”后提示m开头的对象名。 图13 表名补全 表字段提示：脚本代码中引用表字段时，鼠标移动到表名上，悬浮窗会对表名进行提示。如下图所示，开发者鼠标放在表名上，展示所有字段。 图14 表字段提示 错误码补全：脚本中引入数据表的代码行中，对表名称进行推荐提示。如下图所示，开发者键入“setI18nError”后，提示相关错误码名。 图15 错误码补全 错误码内容提示：脚本代码中引入数据表的代码行中，对表名称进行推荐提示。如下图所示，鼠标放在错误码名称上，展示相关描述。 图16 错误码内容提示 系统参数补全：脚本代码中引入系统参数的代码行中，对参数名称进行推荐提示。如下图所示，开发者键入“sys.getParameter”后，提示相关系统参数。 图17 系统参数补全

脚本用什么编辑器 低代码平台提供了一个方便简洁的在线开发IDE，即脚本编辑界面，脚本编辑界面开发体验接近离线的开发工具，具有如下优势： 现代化的编辑界面，语法高亮显示。 智能提示、智能补全。 精确查看定义、代码预览、查找引用。 快速在线编译。 友好的语法错误提示。 可以使用console.log，写 日志分析 复杂的问题。 脚本编辑界面如图1所示，您可以在线编辑、测试和发布脚本。 图1 脚本编辑界面 按钮区域 脚本编辑页面常用的图标按钮区，具体功能说明如表1所示。 表1 图标说明 图标 说明 / ，单击即可启用脚本，该图标高亮时，表示当前脚本已被启用。 ，单击即可禁用脚本，该图标非高亮时，表示当前脚本未启用。 说明： 脚本开发完成后，需要启用脚本。只有启用状态的脚本，才能在被其他资源（如服务编排、标准页面）调用时，搜索到。 保存脚本。 另存为脚本。 设置脚本属性，如可见性、是否开启允许覆盖等。 执行脚本。 / 操作回退、撤销回退。 对已开发好的脚本代码进行性能检查、兼容性检查和静态配置检查。 说明： 代码检查的具体操作，请参见脚本性能检查规则。 刷新当前引入的脚本到最新状态。 单击该图标，脚本编辑器可分屏显示。 脚本启用后，单击右上角的，可查看该组件的调用关系图。 说明： 脚本启用后，才会显示该图标。 跳转TS脚本说明书。 版本对比。 切换版本。 代码编辑器 在该区域开发代码，实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力，更多介绍请参见AI代码补全功能。 脚本编辑页面同样支持离线编辑器中的常规快捷键操作，例如“Ctrl+S”可以保存当前修改，“Ctrl+H”可以调出查找替换对话框，您也可以根据自己的开发习惯，尝试各种快捷键操作。 测试区 运行代码后的显示区域。在“输入参数”页签输入参数后，单击测试区右侧的运行按钮，运行脚本。即可在“输出参数”页签，查看输出结果是否正确。在“问题”和“日志”页签，查看问题和日志。除此之外，还支持清除日志输出、运行脚本并动态检查和保存输入参数。

脚本主要用什么语言和库 低代码平台的脚本引擎采用TypeScript语言。脚本执行时，TypeScript语言会被翻译成JavaScript语言，由JavaScript引擎执行。TypeScript模块import语法，请参考TypeScrip官方网站。 在JavaScript es5的官方标准库外，低代码平台还扩展了10+预置标准库（即预置API），帮助您更高效地开发脚本，有关系统预置的标准库说明请参见脚本中预置的API。 库的使用方法举例： import * as http from 'http';

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的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(); 服务 服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。 参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。 属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。 图3 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 文本类型：设置文本类型，如输入框、密码。 标签：输入框在界面的展示标签名，必须是输入框存在于某个表单组件中，该标签设置才生效。 占位符：设置占位符，可辅助元素对齐，让页面更整齐。 可清空：是否可清空输入值。 默认值：输入框默认值。 图标：输入框图标，仅在输入框类型下有效。 图标位置：输入框中的图标位置。 最大字符长度：输入框取值最大字符长度。 最大宽度：输入框最大的宽度。

前提条件 自定义“我的仓库”前，您需要拥有一个华为账号或一个可用于访问OBS的 IAM 用户，即先 注册华为账号 开通华为云、完成实名认证、创建IAM用户、充值以及购买资源包，具体操作请参见使用OBS前需要做的准备工作。 参考获取AK/SK中操作，获取AK（Access Key ID）、SK（Secret Access Key），即访问密钥对。 在华为OBS上创建存储桶（例如“bing.testonly.1”），用于后续存储资产包使用，具体操作请参见如何创建桶，并记录创建桶时选择的区域。

开启日志监控 选择以下任意一种方式，进入日志跟踪页面。 方式一：在AstroZero经典版应用设计器中，单击左下角的，进入日志跟踪页面。 图1 在App开发页面开启日志跟踪 方式二：在AstroZero经典版环境配置中，单击页面右下角的，进入日志跟踪页面。 图2 进入日志跟踪页面 单击，可以开启十分钟内的AstroZero的后台日志追踪。 如果需要停止跟踪，可单击，将停止追踪且不会获取日志文件。 图3 开启日志跟踪 表1 日志跟踪参数说明 参数 说明 日志级别 日志级别，取值说明如下： 会话级：只打印当前会话的日志。 租户级：打印租户所有会话的日志。 日志类型 日志类型，取值说明如下： 业务日志：输出业务相关的跟踪日志。 完整日志：输出业务日志，以及数据库、中间件等的详细日志，主要用于AstroZero问题定位。 下载日志文件。 单击下载，可下载日志文件。下载后会自动停止跟踪，日志格式为“时间|操作ID|业务部件|动作描述”。 单击，可从新窗口打开日志跟踪页面。 单击，可最小化显示日志跟踪页面。 单击最小化图标后，日志跟踪页面将会被隐藏。在AstroZero管理中心页面的右下角，可以看到日志跟踪剩余时间。单击该时间，将重新弹出日志跟踪页面。 图4 日志跟踪时间