华为云用户手册

操作场景 在如下两个场景，可以基于已有脚本，创建新脚本： 场景1：在已有脚本基础上新建版本。 因业务需要，脚本要实现的能力发生了变化，此时可以基于原有脚本修改，并保存为脚本的新版本。在此场景下，原有脚本作为老版本自动失效。 场景2：在已有脚本基础上新建脚本。 需要开发的新脚本与已有的某个脚本类似，此时可以基于原有脚本修改，再保存为新的脚本名称。在此场景下，原有脚本仍然有效。新脚本和老脚本也没有关联关系，各自独立。

场景1：在已有脚本基础上新建版本 因业务需要，脚本要实现的能力发生了变化，此时可以基于原有脚本修改，并保存为脚本的新版本。在此场景下，原有脚本作为老版本自动失效。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“逻辑”。 在脚本列表中，单击对应的脚本，进入脚本编辑器。 单击编辑器上方的，选择“新建版本”，单击“保存”。 图1 保存新建版本 编辑新脚本版本的内容，完成后单击，保存脚本。 在脚本编辑器中，可查看到脚本当前的版本为1.0.2，即在原有脚本版本的基础上自动加“1”。 图2 修改版本后保存与启用 调试脚本。 单击编辑器上方的，执行脚本。 在“输入参数”页签中，输入请求报文，单击测试窗口右上角的。 检查输出参数页签中的结果，是否符合预期。 脚本执行完后，在日志页签检查输出日志。 调试结果符合预期后，单击，启用脚本。 脚本启用后，才可以在其他脚本、服务编排等操作中使用。如果未启用，其他组件无法查询到该脚本，查询时会报错该脚本不存在或未启用。

检查页面性能 打开要进行性能检查的高级页面，在浏览器 开发者工具 中，勾选“Disable cache”属性。 在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 在“Network”页签，勾选“Disable cache”属性（即禁用缓存）。 在进行页面性能检查时，如果不勾选该选项，性能检查会读取缓存中的数据，导致性能检查结果不准确。 图1 勾选“Disable cache”属性 在已发布的高级页面上方，单击“性能分析”，进入页面性能分析报告页面。 开发者工具请保持打开状态，关闭后“Disable cache”属性会自动不勾选。同时请确保高级页面已发布，如果未发布，单击高级页面上方的，发布页面。 图2 查看性能分析报告 在页面性能报告中，单击各指标后的“展开”，可查看性能指标详情。 图3 查看性能指标详情

位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。

边框 设置组件的边框样式，支持全边框和角边框两种。 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。

操作场景 连接器是华为云Astro轻应用提供的调用第三方服务的集成工具。华为云Astro轻应用封装了不同类型的连接器用于对接相应的第三方服务，如OBS、MINIO、Redis、 云搜索 、OCR、智能边缘平台和 SMS 等。通过连接器，开发者无需关注实现代码，只需要配置服务地址和鉴权信息，即可在服务编排或脚本中快速集成第三方系统。 在华为云Astro轻应用中安装应用后，何时需要重新创建连接器，与在应用开发创建连接器时，是否勾选“打包当前位置”有关（默认为勾选）。打包连接器时，连接器包含的敏感信息会一并打包发布，对信息敏感的场景，建议勿勾选。

基本属性 流式布局 容器组件默认弹性布局未开启，处于流式布局的状态，如图5所示。 图5 流式布局 在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图6所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。 图6 流式布局中组件为块级元素 流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图7、图8所示。 图7 居中水平对齐 图8 靠右水平对齐 弹性布局 将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局。在弹性布局的属性配置中，会出现“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图9所示。 图9 弹性布局 为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。 默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图10所示。 图10 弹性布局默认效果 排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图11。 图11 排列方向“列” 水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图12、图13所示。 图12 水平对齐方式选择“中间对齐” 图13 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图14、图15所示。 图14 垂直对齐方式选择“中间对齐” 图15 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图16所示。 图16 弹性布局实现居中

数据绑定 将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 在“数据绑定”中，单击“属性值绑定”后的“+”。 图2 单击添加图标 在“属性”下拉框中，选择容器的某个属性。 在模型字段中，单击，进入选择模型页面。 图3 选择设置图标 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 图4 定义模型 华为云Astro轻应用支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的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); 在新建模型“设置”页面，执行如下操作。 如果上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 如果上一步来源选择“对象”，需要配置模型关联的对象以及字段。 如果上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 如果上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

常见问题 是否拥有执行触发器设定的操作权限，取决于触发器的创建人还是触发人？ 回答：是否有执行触发器设定的操作权限，取决于触发者本人是否有相关权限，和触发器创建人无关。例如，某个触发器关联了对象“D__ CS T”，触发类型是“插入或更新记录时”，触发时执行事件C，即对象“D__CST”数据有新增或更新时，会触发该触发器，从而执行事件C。用户A是触发器的创建人，没有对象“D__CST”的操作权限和事件C的执行权限，用户B有“D__CST”的操作权限和事件C的执行权限，当用户B更新“D__CST”对象数据时，会触发该触发器，执行事件C。

创建触发器 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，单击“逻辑”。 （可选）单击触发器后的，为触发器添加目录。 触发器默认存放在根目录下，在创建触发器前，您可以先创建触发器存放的目录，也可以在触发器创建后将其拖拽到指定目录。 将鼠标放在已创建的触发器目录上，单击，进入增加触发器页面。 如果未创建触发器目录，请直接单击触发器后的，进入增加触发器页面。 设置触发的对象、标签、名称和触发类型，单击“添加”，即可进入触发器编辑页面。 图1 创建一个新的触发器 表1 新建触发器参数说明 参数 说明 对象 在下拉框中，选择关联的对象，支持选择当前应用中已有的对象，或其他应用中创建的对象。 标签 输入触发器的标签，用于在页面展示，创建后可修改。 取值范围：1~64个字符。 名称 输入触发器的名称。名称是触发器在系统中的唯一标识，系统根据标签取值自动生成，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 描述 根据实际需求，在输入框中输入触发器的描述信息。 取值范围：1~255个字符。 触发类型 在下拉框中，选择触发器的启动类型。 仅在插入记录时：当系统创建某条记录时。 仅在更新记录时：当系统更新某条记录时。 插入或更新记录时：当系统创建或更新某条记录时。 被别的触发器调用时：被其他触发器所调用时。 收到平台事件时：被事件（event）触发时。选中该条件时，请在“事件”中配置具体事件。 单击“添加条件”，设置规则条件，并单击“保存”。 图2 创建规则条件 条件名称：新建条件规则的名称。 执行操作条件：进入该条件规则的条件。例如，设置为“当条件满足时”。 设置条件：“字段”配置为“name”，“操作符”配置为“等于”，“类型”配置为“常量”，“值”配置为“"zhangsan"”。 单击“添加操作”，设置满足规则条件后执行的动作，单击“保存”。 图3 创建动作 操作类型：设置动作类型，例如设置为“邮件告警”。 操作名称：新建动作的名称。 电子邮件告警：选择配置好的邮件告警。 单击触发器编辑页面上方的，启用触发器。 结果验证。 基于“Employee__CST”对象，创建一条记录，对象“name”字段取值为“zhangsan”。用户“test123@qq.com”成功收到邮件通知，表明触发器创建成功。

通过自定义JavaScript代码编排事件 通过手动编写JavaScript代码，实现按钮的事件逻辑。系统支持在手动编写JavaScript代码时，进行代码联想提示。同时，系统还封装了一些常用功能的接口，并将其中典型接口做成模板，可以从左侧拖动相关模板至右侧事件定义区域，直接使用。 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的标准页面上，单击，选择“编辑”。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JavaScript代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 图2 自定义JavaScript代码 自定义JavaScript代码示例如下： //当前组件 var _component = context.$component.current; //当前Form var _form = context.$component.form; // 重置表单 _form.resetFields(); 在标准页面的自定义事件中，还内置了一些与工作流BPM交互的API： 获取变量：context.$工作流.loadVariables(): Promise 提交任务、流程： context.$工作流.submitTask(variables: {[key: string]: any}): Promise 修改变量： context.$工作流.putVariables(variables: {[key: string]: any}): Promise 图3 在标准页面的事件代码中与工作流交互 返回标准页面开发界面，单击页面上方的，保存页面。

操作场景 页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。 图1 页面间组件交互场景示例 页面间的组件交互原理如下图所示，在配置事件时，选择“默认”类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。 图2 Page传值原理 主要实现原理如下： widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }] }]; 表1 页面宏数据配置项说明 配置项 参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型，本例中配置为text（文本）。 name 配置项的变量名称，本例中设置为“pageMacro”。通过获取组件自定义配置属性的API，来获取该值。 label 配置项的展示标签。 value 配置项的默认值，本例中设置为${pm.pageMacro}。 其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。 在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。 ... var pageMacro = widgetProperties.pageMacro || ""; $("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro，即表1中name配置项设置的变量名称。 widgetEventTemplate：关于widgetEventTemplate的介绍，请参见通过事件动作实现高级页面内组件的交互。

添加应用依赖关系 如果当前应用引用了其他应用中的元素，此时需要通过添加依赖关系将被引用应用添加到当前应用中，以确保应用正常运行。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“设置”，进入应用设置页面。 选择“依赖与开放”，单击“添加依赖”，进入添加应用依赖关系页面。 图1 添加应用依赖关系 选择需要添加依赖关系的一个或多个应用，单击“确认”。 图2 选择需要添加依赖关系的应用 （可选）在应用依赖页签，单击已添加应用后的，可查看依赖的应用。 （可选）在应用依赖页签，单击已添加应用后的，可删除依赖的应用。 如果当前应用添加了与另一个应用的依赖关系，但实际上并没有引用该应用内的任何元素，则可以通过此按钮，一次性将这些虚假依赖关系删除掉。

应用前端开发概述 前端开发是指通过拖拉拽预置或自定义组件，进行页面配置开发。华为云Astro轻应用低代码平台提供了标准页面、高级页面和报表三种类型的前端页面。在开发前端页面前，请先了解三者的区别。 标准页面主要适用于对样式要求相对简单的场景（如表单类应用），这种页面一般用于业务数据的增、删、改、查等基础功能，例如绩效管理、请假电子流、健康打卡、在线投票等。标准页面中的组件是基于Vue.js的通用基础组件，常用于管理端表格表单类的页面开发，如布局容器、数据容器、输入、显示、按钮等。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面，您也可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。由此可见，高级页面主要用于对呈现效果要求比较高的场景，而标准页面主要用于后台管理类的表格表单类的开发。在沙箱环境、运行环境中，标准页面不支持匿名访问，高级页面则支持匿名访问。 报表：报表是华为云Astro轻应用对内部数据提供的一种汇总方式的视图。利用报表功能，可以让数据进行可视化的展示，并进行分析与洞察。 父主题： 使用华为云Astro轻应用开发应用前端

步骤2：配置连接器认证信息 自定义连接器在服务编排或事件中调用时，需要先配置认证信息。 参考步骤1：创建自定义连接器中操作，进入自定义连接器页面。 在“认证信息”页签，单击“新建”，进入添加认证信息页面。 设置认证信息，单击“保存”。 华为云Astro轻应用提供了丰富的认证类型供用户选择，请按照自身业务需求，配置对应的认证信息。 图7 添加认证信息-基本信息 图8 添加认证信息-鉴权设置 表7 添加认证信息参数说明 参数 说明 标签 认证的标签名，用于在页面显示。 取值范围：1~64个字符。 名称 认证的名称，名称是认证在系统中的唯一标识。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 目录 认证所属的目录分类名称。 描述 根据实际需求，输入认证的描述信息。 取值范围：1~255个字符。 使用证书 服务端是否需要客户端证书，是否需要进行双向认证。勾选“使用证书”时，需要配置证书类型，证书和密钥。 默认为选中。 证书类型 勾选“使用证书”时，才会显示该参数。 证书所属的类型，支持“CRT”和“P12”两种。 证书 勾选“使用证书”时，才会显示该参数。 从本地上传“CRT”和“P12”类型的证书。 密钥 勾选“使用证书”时，才会显示该参数。 输入已上传证书的访问密钥。 使用根证书 客户端是否需要服务端证书，是否需要进行双向认证。 勾选“使用根证书”时，需要提前开启根证书校验并上传根证书，具体操作请参见开启华为云Astro轻应用根证书认证对方服务端身份。上传后，在根证书下拉框中选择对应的证书即可。 API主机地址 配置此地址后，可以限定REST操作的请求前缀，防止敏感信息泄露。每次更改此地址，都需要重新配置鉴权信息。 打包当前配置 选中该选项后，应用打包时会将当前配置的连接器信息一并打出。例如，如果应用包发布到运行环境，当前配置默认为被同步到运行环境中。默认为选中，对信息敏感的场景，建议不勾选。 鉴权设置 鉴权协议：设置鉴权协议，支持OAuth、简单消息头和JWT（JSON Web Tokens）三种。 鉴权模式：设置为“client credentials”，此处只支持OAuth2的client credentials鉴权模式。 鉴权地址：第三方系统OAuth2协议，获取的token地址。例如，AstroZero获取token的地址为“https://{host}:{port}/baas/auth/v1.0/oauth2/token”，这里需要填入第三方系统的。 Client ID：OAuth2协议中的client id。如果该REST Service是AstroZero提供的，请参考客户端模式接入认证中操作获取。 Client Secret：OAuth2协议中的client secret。如果该REST Service是AstroZero提供的，请参考客户端模式接入认证中操作获取。 消息体属性 从鉴权接口返回的，消息字段的映射规则。 根据OAuth2标准协议，返回体一般如图9所示。由于不同的第三方实现的情况可能不一样，返回的不一定是标准的键值。例如，有些第三方接口返回的是“accessToken”，而不是“access_token”，所以平台需要对这些不标准的键值映射成标准的。 图8中配置的消息体属性是第三方返回的“accessToken”，AstroZero使用“access_token”这个键值来存储。最终存储的结果如下： { “access_token”: ${accessToken} } 消息头属性 定义调用业务接口时，所用的消息头的映射规则。 当使用获取的token，去返回具体rest action时，按照OAuth2的标准一般是将token放到请求头上。例如，Authorization: Bearer ${access_token}。 但是由于各个第三方接口实现的差异性，不一定叫Authorization，也不一定会在token前面加Bearer，例如访问平台的接口，token直接放在请求头Access-Token上，且不需要Bearer前缀，所以需要配置消息头属性。 图8中配置的消息头属性，意思是将从消息体属性获取到的“access_token”放到请求头“Access-Token”上。 图9 返回体

操作场景 通过使用华为云Astro轻应用的自定义连接器、服务编排或事件功能，带您快速对接一个外部服务的接口。例如，对接一个已有的Rest服务，通过Rest服务获取数据并加工，并在华为云Astro轻应用中使用。 表1 Rest服务接口 参数 值 路径 https://example.com/path/to/data?key=value 请求方法 POST 请求头 X-Header 请求体类型 application/json 请求体参数 { “request”: “value” } 响应体类型 application/json 响应体参数 { “response”: “value” }

克隆标准页面 标准页面创建后，支持将标准页面克隆到当前应用中。例如，应用A中存在两个或多个功能类似的标准页面，此时可基于已创建的标准页面克隆出一个新标准页面，基于克隆后的标准页面进行修改，减少重复创建的操作。 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的标准页面上，单击，选择“克隆”。 输入标准页面的名称和唯一标识，单击“确认”。 克隆成功后，自动进入克隆后的标准页面。

移动标准页面 标准页面创建后，支持将标准页面移动到拥有开发权限的应用中。例如，A应用中创建的标准页面，在B应用中也会用到，为避免多次重复创建，可以将A中的标准页面先克隆，再移动到B应用中。 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的标准页面上，单击，选择“移动”。 选中需要移动的标准页面，单击“下一步”。 选择目标应用，单击“确认”。

位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。

边框 设置组件的边框样式，支持全边框和角边框两种。 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。

高级设置 在高级设置中，可设置轮播时长、切换方式等。 图2 高级设置 轮播设置 切换方向：广告图片的轮播切换样式，支持横向滚动切换、右下角滚动切换和纵向滚动切换。 加载自动播放：是否自动轮播。开启后，支持设置图片轮播时间间隔（不大于24秒）。 切换方式：设置图片切换时，展示的样式，如淡出、推出等。 定位标志：设置分页图标样式。 图片管理：对图片进行管理，并支持为图片配置跳转链接。 单击“添加”，在“我的图片”页签中，将鼠标放在目录上，单击可新建目录，单击可删除该目录。单击“上传图片”，可上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，每张图片不超过1MB，推荐图片尺寸为800x800像素。在“网络图片”页签中，可以通过输入图片的地址，来获取图片。 选中图片，单击，可删除图片。 单击，可编辑图片跳转链接。

什么是标准页面 标准页面是一种将一个或多个组件拖进画布，进行低代码甚至无代码的配置，即可快速完成业务功能的前端页面。对于一般的业务应用系统，例如请假电子流、出差报销、在线投票等企业常见业务场景，其功能主要是针对业务数据的增、删、改、查，且前端界面的样式相对简单的页面，可以使用华为云Astro轻应用提供的标准页面。 标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。

标准页面常用操作入门 在进行标准页面设计前，建议您先对开发界面的常用操作进行简单的了解。 在应用设计器的“界面”中，单击页面后的“+”，设置页面标签和名称，单击“添加”，即可创建一个标准页面（空白页面或基于模板创建）。 标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”。 图2 拖拽组件到设计视图 在配置使用组件前，可以将光标放在每个组件上，单击组件右上角的图标，可查看组件的详细介绍。如果需了解更多预置组件的使用及配置方法，请参见设置华为云Astro轻应用标准页面组件属性。 图3 组件的帮助图标 在“设计视图”中，选中某个组件，在右侧“属性”页签，可设置该组件的绑定数据、样式等属性，如图4所示。 图4 组件属性面板 在“设计视图”中，选中某个组件，在右侧“事件”页签，可设置组件的关联事件。例如，选择一个“按钮”，在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。 图5 编辑组件的关联事件 利用组件导航，快速选中组件。 当选中某个组件时，页面上方会在组件导航上显示组件的html标签层级。当组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，单击图5组件导航中的“页面”，可直接选中页面上的最外层页面组件。 利用组件树，快速选中组件。 在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树。在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。 图6 利用组件树快速选中组件

位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。

边框 设置组件的边框样式，支持全边框和角边框两种。 图2 全边框 图3 角边框 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。

设置数据系列 选择基本柱图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 图5 配置数据系列 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "保洁", "安管", "工程", "绿化", "消杀", "特约" ], "dataValue": [{ "title": "工单总数", "value": [ 411, 965, 427, 630, 85, 800 ] }, { "title": "费用", "value": [ 500, 1065, 327, 730, 185, 1000 ] } ] } }] } 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。 设置完成后，单击“确定”。

查看运行态报表 报表运行态可以对报表进行进一步的数据筛选和可视化呈现，也是对报表的一种预览和检查。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“界面”。 在报表中，单击对应的报表，进入报表设计页面。 单击页面上方的，运行报表。 单击右上角“显示图表”，可以设置报表的展示样式。 您需要在创建报表时设置分组字段（参考6.b），该界面才会有“显示图表”。 图1 设置报表的展示样式 式样与类型：可以为数据选择合适的图表类型，如柱状图、堆叠图、折线图、饼图、仪表图、漏斗图、散点图等，不同的图表有不同的选项，可以在“设置”页签中配置。 柱状图、堆叠图、折线图的设置页签配置如下： 图例位置：图例的位置。 X轴：选择一个分组字段作为X轴。 X轴标签：X轴显示名称。 次级分组：可以额外地指定一个分组字段作为次级分类，在同一个柱状图上显示，或者作为堆叠图中的堆叠。 Y轴：选择一个公式字段（默认记录计数）作为Y轴。 Y轴标签：Y轴显示名称。 显示参考线：在图中显示一个参考线，以便比较不同分组的Y轴的值。 显示数值：显示每个柱状的数值。 饼图的设置页签配置如下： 图例位置：图例的位置。 值：可以指定一个公式字段（默认位记录计数）。 切片：可以指定一个分组字段。 显示数值：显示每个饼的数值。 仪表图：仪表图是一种相对简单的图表，用于展示一个具体数值，以及该数值在3 段范围内的状态（最小、中等、最差）。仪表图的设置页签配置如下： 测量：可以指定一个公式字段（默认位记录计数）。 最小值：指定一个度量的最小值。 最大值：指定一个度量的最大值。 漏斗图的设置页签配置如下： 值：选择一个公式字段作为数值度量。 着色依据：选择一个分组字段作为分组度量。 显示数值：显示每层的数值。 散点图的设置页签配置如下： X轴：指定一个公式度量。 Y轴：指定一个公式度量。 详情：指定一个分组度量。 显示数值：显示每点的数值。 调色板：可以为图表选择不同的配色方案，以便制作出个性化的图表。 运行报表界面上的操作仅为用户提供一种快速的数据探索的途径，并不会保存到数据库中。 单击图标，设置展示数据，可以对数据进行过滤展示。 图2 数据过滤展示 分组汇总：是否显示每个分组的汇总信息。 整体汇总：在表格底部显示汇总信息。

位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 开启：勾选该按钮，下方可见页面适配功能。 页面适配：勾选页面适配下方的“开启”，表示组件开启自适应高度。该属性使页面其它位于其下方的组件，根据该组件的高度变化自动调整位置，一个页面只支持一个组件。

边框 设置组件的边框样式，支持全边框和角边框两种。 全边框 样式：设置组件边框的样式，如实线、点线、虚线和双实线。 宽度：设置边框的宽度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 角边框 宽度：设置组件边框的宽度，单位px。 长度：设置组件边框的长度，单位px。 颜色：设置组件边框的颜色。 弧度：设置组件边框四个角的弧度，单位px。 边距：设置组件边框和图表之间的间距，单位px。

背景信息 根据图元的不同使用场景，工作流图元可以分为以下三类： 事件（Events）：驱动流程流转的事件图元，用来表明工作流的生命周期中发生的事件，例如开始、捕获信号等。 网关（Gateways）：根据条件，分发的网关图元。网关用来控制流程的执行流向，可理解为决策、判断。 活动（Activities）：提供用户交互或系统调用的图元，是工作流的核心图元，可理解为节点或步骤，例如调用事件、用户需要做的任务。 图1 工作流组成图元