华为云用户手册

设置数据系列 选中基本饼图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 图2 两个数据系列不用圆心坐标设置 { "resCode": "0", "resMsg": "成功", "result": [{ "dataValue": [{ "name": "关键事件", "value": [{ "value": 635, "name": "工程管理" }, { "value": 310, "name": "社会环境" } ] }, { "name": "类别", "value": [{ "value": 435, "name": "计算机" }, { "value": 210, "name": "文学" } ] } ] }] } 配置添加的数据系列圆心坐标，如果不配置，两个数据系列会重叠。 设置完成后，单击“确定”。

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

限制和说明 华为云Astro轻应用免费版不收费，但最多支持添加10个用户（包括业务用户），且可使用的资源有限。 对于低代码应用，华为云Astro轻应用免费版仅提供低代码应用开发环境（部分功能受限），不提供运行态能力，不支持应用发布商用。 免费版提供零代码应用开发能力，不需要使用任何编程语言，通过拖、拉、拽即可快速构建应用，操作零门槛，人人都可成为开发者。关于零代码的详细介绍，请参见用户指南（零代码）。

排他网关 排他网关用来在流程中，实现一组分支的唯一决策。系统将按照“条件顺序”评估流出网关的分支，流程会执行第一个连线条件被评估为true（当多个条件为true时，将执行第一个决策）的分支，并且不再继续评估下面的分支。如果所有分支条件决策都为false且该网关定义了一个默认的连线，那么该默认分支将被执行。如果没有可到达的分支，抛出异常，流程被中断，在工作流设计上应避免这种情况发生。 图1 排他网关配置页面 图2 分支连线配置

创建对象视图 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 根据实际需求，创建所需的对象。 例如，创建对象DepartmentInfo和EmployeeInfo。其中，对象DepartmentInfo存储了部门信息，包括部门ID、部门经理姓名。对象EmployeeInfo存储了员工信息，包括员工姓名、部门ID。 对象DepartmentInfo已创建完成，如图1。 图1 部门信息 对象EmployeeInfo已创建完成，如图2。 图2 员工信息 返回应用设计器，在左侧导航栏中，选择“数据”。 单击视图后的，进入新建视图对象页面。 在添加视图对象页面，直接单击“新建”。 图3 直接单击新建 设置视图对象的基本信息，单击“下一步”。 图4 设置基本信息 表1 新建对象视图参数说明 参数 说明 标签 新建视图对象的标签，用于在页面显示。 取值范围：1~64个字符。 名称 视图对象在系统中的唯一标识，创建后不支持修改。输入标签后单击该参数的输入框，系统会自动生成视图对象的名称。同时会自动增加“__VIEW__ CS T”后缀和命名空间前缀，作为对象的唯一标识。命名要求如下： 长度不能超过60个字符，包括命名空间和后缀的长度。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，没有连续的下划线，且不能以单下划线结尾。 描述 根据实际需求，在输入框中输入视图对象的描述信息。 设置对象联结，单击“下一步”。 在A中选择主对象，单击“点击以关联另一个对象”后，在B中选择另一个对象，设置关联关系，单击加号设置关联条件。 如图5，表示当部门ID相同时，取两个对象表数据中的交集。对象联结最多支持三个Object连接，两个Object之间的连接条件由各自的字段及操作符所组成，连接条件可以有多条。 图5 配置关联关系 每个“A”对象的记录至少关联一条“B”的记录：表示结果取满足对象之间设定条件的“且”合集。 “A”对象的记录可以关联或不关联“B”的记录：表示结果取满足对象之间设定条件的“或”合集。 关联条件：表示对象之间的关联条件。 在映射信息页面，单击“字段映射”中的“添加”，选择所需的字段（选择的字段将作为视图对象展示的字段），设置标签。 支持增加记录筛选条件，只有满足该条件，才会展示在视图中。本示例不涉及。 图6 映射信息配置 单击“下一步”， 预览视图对象对应的SQL语句。 核对信息无误后，单击“保存”，进入视图对象的详情页面。 “自定义字段”页签中，显示了配置的展示字段。 在“关联对象”页签中，单击，可查看视图对象对应的SQL语句。

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

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

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

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

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

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 标签：设置组件的标签名，用于在界面展示。 文本：上传按钮上，显示的文本。 图4 设置后效果 默认已上传的文件列表：默认已上传的文件列表。 存储：上传文件的存储类型，单击该参数后的，可进行配置。 存储：存储器类型。 OBS：通过OBS类型连接器，存储到OBS上。 MINIO：通过MINIO类型连接器，存储到MINIO上。 OBJE CTS TORAGEPROXY：通过OBJECTSTORAGEPROXY类型连接器，存储到相应服务器上。 CUSTOMAPI：通过自定义接口，来上传和展示文件。 连接器：当存储配置为OBS、MINIO或OBJECTSTORAGEPROXY时，该参数才会显示，表示具体的连接器。 桶：当存储配置为OBS、MINIO或者OBJECTSTORAGEPROXY时，该参数才会显示，表示具体的存储桶。 上传服务：当存储配置为CUSTOMAPI时，该参数才会显示，选择自定义接口实现上传文件的功能。 展示服务：当存储配置为CUSTOMAPI时，该参数才会显示，选择自定义接口实现展示文件的功能。 过滤文件类型：接受上传的文件类型，为文件原生的属性，会在选择文件时按照文件类型过滤，多个类型格式间以“,”符号隔开，如“image/jpeg,application/msword,text/plain”。 支持文件类型：支持的文件类型，与“过滤文件类型”不同的是，该参数是识别文件的后缀名，“过滤文件类型”为原生的属性，会在选择文件时过滤，可以两者结合使用。 支持多文件：文件是否支持多选。 自定义文件名：上传单个文件时，可自定义上传的文件名。 同名处理：防止同名文件覆盖，同名文件名后自动增加随机数，也可在“on-before-upload”事件中自定义处理文件名。 上传路径：自定义服务器端上传路径，默认为uistudio/upload，上传路径不能是以“./”或“../”等开头的相对路径。 文件数量：多文件上传时，最大文件数量限制，即允许上传的文件数量，超过此数量后，将不允许上传。 文件大小：单个文件大小限制，单位kb。 文件大小错误描述：当文件超过限制大小时，提示的错误描述。 预览：是否开启预览，只在图片时生效。 图片压缩：是否开启图片压缩功能，当前仅支持jpg、jpeg和png格式的图片。 压缩尺寸：当“图片压缩”开关打开时，该参数才会显示。图片压缩尺寸，分为保持原尺寸和自定义尺寸。 保持原尺寸压缩： 如果设置宽度，高度没设置或高度和宽度都设置了，宽度以设置的为准，高度则按照原来的宽高比例生成。 如果设置高度，宽度没设置，高度以设置的为准，宽度则按照原来的宽高比例生成。如果宽度和高度都没设置，宽高以原图片宽高为准。 自定义尺寸压缩：宽度和高度两个属性都没有设置或者只设置了其中一个，没有设置值的属性以原图片的同属性值为准。 压缩宽度(px)：指定图片压缩的宽度。当“图片压缩”开关打开时，该参数才会显示。 压缩高度(px)：指定图片压缩的高度。当“图片压缩”开关打开时，该参数才会显示。 图片压缩至指定大小(kb)：将图片压缩至指定的大小以下。当“图片压缩”开关打开时，该参数才会显示。 公开读：文件的访问控制权限，默认为“private”（私有），否则为“public-read”（公共读）。 可选择：文件列表是否可以选择，仅为图片时有效。 九宫格：九宫格形态展示图片列表，仅当上传全部为图片时开启效果较好，移动端每行展示4个并且大小自适应。 是否多选：文件列表是否支持多选。当“可选择”开关打开时，该参数才会显示。 选择类型：选择时，展示的样式，包含“遮罩层选择”或“选择框选择”两种类型。当“可选择”开关打开时，该参数才会显示。 选择框内容：设置选择框的内容。当“选择类型”设置为“选择框选择”时，该参数才会显示。 选中时显示内容：选中时，选择框显示的内容。当“选择类型”设置为“选择框选择”时，该参数才会显示。 列表展示位置：相对于上传按钮，上传列表的展示位置，移动端仅下方展示。 列表只显示进度条：上传列表的展示内容仅展示进度条，且文件上传完后进度条消失，目前适用于文档和压缩包。 图片宽高：上传列表中单个图片的宽高，单位像素，移动端不生效。 最大宽度：限制最大的宽度。

在脚本中调用连接器 在脚本中，调用已创建的连接器，实现用户登录微信公众号。 在微信客户端的H5页面，发起AJAX请求，用于获取code。 请求示例如下： https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。 参考创建空白华为云Astro轻应用脚本中操作，创建一个空白脚本。 在脚本编辑器中，输入如下代码。 import * as wechat from 'wechat'; let connectorID = "whchat" let code = "xxxxx" let client = wechat.NewClient(connectorID) let res = client.GetAccessToken(code) console.log(res) 其中，“connectorID”为连接器的名称，“code”为1获取的code取值。 单击脚本编辑器页面上方的，保存脚本。 保存成功后，单击，执行脚本。 不用输入请求报文，直接单击测试窗口右上角的。 在日志页签，查看到已获取“access_token”和“openid”，可用于登录微信公众号。 { "access_token":"AC CES S_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE" }

操作场景 创建一个定时任务“OfferingOffline”，用于实现从2021-11-25开始，每天零点自动将过期商品下架。其中，将过期商品下架的功能由“OfferingOffline”脚本实现。在创建定时任务之前，需要先开发实现定时任务功能的Script脚本，Script脚本的开发可参考脚本。 除了在环境配置中创建定时任务，您还可以在应用开发时创建定时任务，详情请参见定时任务。两者的区别是在应用开发设计器中创建的定时任务，可在打包发布应用时，将定时任务一起打包发布出去。在环境配置中创建的定时任务，无法随应用发布出去。除此之外，在应用开发时创建的定时任务仅对当前应用有效，而在环境配置中创建的定时任务可在多个应用中使用。

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

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

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

样例代码解读 通过以下详细的脚本代码内容解读，对脚本有一个更具体的认识。一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图16 引入平台标准库 定义出参、入参结构。 图17 定义入参 图18 定义出参 定义方法以及使用的对象。 图19 定义方法及使用对象 进行数据库操作。 图20 数据库相关操作 以下将通过解读一个脚本样例，带您了解脚本的总体结构框架及编写要求。 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可实现在日志里打印过程输出，方便代码调试。

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

代码编辑器 在代码编辑区域，在符号上单击鼠标右键，会出现如图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，进入命令面板，可以执行很多编辑功能。 Hover 把鼠标停留在符号上，可以查看符号的定义概要。再按住Ctrl键，单击符号，可以查看符号更加详细的定义。 例如，鼠标停留在“useObject”上，显示图3所示，可查看其定义概要。按Ctrl键，单击“useObject”，可查看更详细的定义，如图4。 图3 查看定义概要 图4 查看更详细的定义 Bracket matching 高亮显示与选择内容匹配的符号，如{}、()、[]等。 图5 Bracket mathching Errors & Warnings 编辑代码时，如果有语法错误，会在这个语法下面显示红色波浪线，鼠标移动上去，会显示具体错误。 图6 Errors&Warnings Go to Line 按“Ctrl + g”，再输入行号，可以跳转到指定的代码行。 Search and Replace 按“Ctrl + f”，输入关键字，可以搜索当前代码的内容。表示搜索的内容分别支持大小写匹配、全文匹配、正则表达式。 按“Ctrl + h”，输入关键字，可以查找并替换代码中的内容。 Code Complete 全局符号补全 图7 complete_symbol 对象成员补全 图8 complete_member 参数补全 图9 complete_parameter Comment Code 在代码编辑区域，选择一块代码，输入“Ctrl + /”组合键，可以注释或去注释选择的代码块。 Save File 在代码编辑区域，“按Ctrl + s” ，或者单击右上角的保存图标，可以保存脚本。

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

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

自定义服务编排的URL 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“集成”。 在开放接口后，单击，进入新建开放接口页面。 设置开放接口参数。 图1 开放接口配置页面 表1 新建开放接口参数说明 参数 说明 标签 输入新建接口的标签，用于在页面展示。 取值范围：1~64个字符。 操作名称 输入新建接口的操作名称。命名要求如下： 长度不能超过40个字符。 名称必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 版本 URL对应的版本号，如1.0.0。 URL 新URL地址，其中“/service”为固定值，其次是“/App名称/版本号”，剩下部分进行自定义。 自定义的URL需要符合一定规则，规则如下： 必须以单个“/”开头。 可以配置多级路径，两个或者多个“/”之间必须有内容。 内容类型 请求中的body类型。 application/json multipart/form-data binary-data “multipart/form-data”和“binary-data”用于文件上传接口，选择该内容类型，只能调用POST类型的事件。 默认值：application/json。 分类 根据实际需求，在输入框中输入新建接口的分类。 取值范围：1~255个字符。 描述 根据实际需求，在输入框中输入新建接口的描述信息。 取值范围：1~255个字符。 允许匿名访问 是否可匿名访问运行环境中，该API接口。 勾选表示允许匿名访问，通过运行环境子 域名 访问此接口时，如果无有效的Token认证信息，则以匿名用户身份继续访问此接口，且不需要做CSRF校验。匿名用户的权限为“Anonymous User Profile”，请确保该权限具备访问该接口的业务权限凭证或者相关资源权限。如当该接口有配置业务权限凭证时，给“Anonymous User Profile”权限添加相应业务权限凭证，即可通过运行环境子域名匿名访问该接口。 须知： 需要支持匿名访问自定义接口的账号，必须要设置运行环境子域名。 带有合法认证信息来访问允许匿名访问的自定义接口时，优先以合法认证的身份权限来访问。 匿名用户身份访问自定义接口，不需要做CSRF校验。 不论以什么方式来访问， 认证身份后做的权限校验保持一致。如果配置了业务权限凭证，还会查看用户权限，是否配置了相应的业务权限凭证。 例如：登录业务应用接口“login”的URL为“/service/命名空间__MyApp/1.0.0/login”，运行环境子域名为“test.example.com”，期望可匿名访问该自定义接口，则配置接口时请勾选“允许匿名访问”，且“Anonymous User Profile”权限配置了该接口的业务权限凭证，则匿名用户通过“https://test.example.com/service/命名空间__MyApp/1.0.0/login”，即可访问该接口。 类型 根据实际需要，选择新建接口的类型。 服务编排：表示该定义URL调用的接口类型是服务编排。 脚本：表示定义URL调用的接口类型是脚本。 对象：表示该定义URL是操作对象数据，包括对象数据的增删改查。 默认值：服务编排，本示例直接使用默认值即可。 自定义响应 是否需要格式化，调用该URL后返回的响应消息。如果勾选，表示对响应消息进行格式化，删除resCode、resMsg、result外层信息，只透传返回的消息。 不勾选“自定义响应”，返回如下响应消息 { "resCode": "0", "resMsg": "成功", "result": [ { "equipments": [ { "createdBy": "aaa", "createdBy.__objectType": "User" }, { "createdBy": "aaa", "createdBy.__objectType": "User" } ], "total": "2" } ] } 勾选“自定义响应”后，只返回如下响应消息 { "equipments": [ { "createdBy": "aaa", "createdBy.__objectType": "User" }, { "createdBy": "aaa", "createdBy.__objectType": "User" } ], "total": "2" } 资源 选择调用的服务编排、事件或操作的对象名称。 对象操作 请选择具体的操作。当“类型”选择为“对象”时，该参数才会显示。 Insert Record：新增对象数据。 Update or Insert Record：更新或者新增对象数据。 Update By ID：按记录ID更新对象数据。 Delete By ID：按记录ID删除对象数据。 Query By ID：按记录ID查询对象数据。 Update By Condition：按条件更新对象数据。 Delete By Condition：按条件删除对象数据。 Query By Condition：按条件查询对象数据。 方法 映射后调用的方法名，如GET（查询）、PUT（增加）、POST（修改）和DELETE（删除）等。 输入参数/输出参数 展示服务编排的入参、出参，同时支持修改未受保护资源的参数描述。由于开发人员在开发服务编排过程中，可能未设置或未精确添加参数的描述信息，导出自定义接口的yaml描述文档时对参数的描述就会缺失或模糊。在开放接口二次封装服务编排时，可对参数描述进行编辑补充。 当“类型”选择为“服务编排”时，该参数才会显示。 设置完成后，单击“保存”。 保存后，进入接口详情页。在接口详情页的“基本信息”区域，勾选“是否已废弃”后，可配置是否推荐使用该接口。如果不推荐使用，勾选“是否已废弃”，勾选后，在后续使用到该接口时，会显示该接口“已废弃”的提示，但接口仍可被调用。 接口创建完成后，支持在线进行测试。 在应用开发设计器左侧的导航栏中，选择“集成”。 在开放接口中，将鼠标放在对应的接口上，单击，选择“查看”，进入接口预览页面。 在接口预览页面，单击URL后的。 图2 预览页面 单击“测试一下”，如果有输入参数，设置输入参数后，单击“执行”。 返回成功响应，表示接口调用成功 。

在脚本中，调用动作 创建一个脚本，通过在脚本中调用Rest服务中添加的动作，将第三方提供的业务功能集成到华为云Astro轻应用中使用。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“逻辑”。 单击脚本后的，设置脚本名称，单击“添加”。 图11 新增一个空脚本 在脚本编辑器中，输入如下代码。 // Here's your code. import * as connector from "connector"; let client = connector.newClient("命名空间__Rest1", "命名空间__test1"); let result = client.invoke("命名空间__flapRefund", {}); console.log(result) 其中，“命名空间__Rest1”表示连接器的名称，“命名空间__test1”为创建自定义连接器对接Rest服务配置的认证信息名称，“命名空间__flapRefund”为创建并启用Rest动作中配置的动作名称。 如果连接器中有设置输入参数，此时脚本中还需要定义一个“input2”，示例脚本如下： // Here's your code. import * as connector from "connector"; let client = connector.newClient("命名空间__Rest1", "命名空间__test1"); let input2 = { "参数名": "参数取值" } let result = client.invoke("命名空间__flapRefund", {}); console.log(result) 单击脚本编辑器页面上方的，保存脚本。 脚本保存成功后，单击，运行脚本。 在页面底部“输入参数”页签中，输入请求参数，单击测试窗口右上角的。 在“日志”页签，查看打印的日志。

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

使用说明 在华为云AstroZero专享版实例中，支持将平台备份的数据（当前备份到华为云RDS数据库）恢复至临时数据库，再从临时数据库中将数据找回到当前环境。 数据找回功能为白名单特性，需要联系后台管理人员开通后方可使用。使用数据找回功能存在如下约束和限制，请提前了解。 找回范围：自定义对象（实体）。 找回限制：30天可创建10个任务，每个任务的有效期为3天。 导入策略：如果ID存在重复，则覆盖当前环境数据。如果ID不存在重复，则写入当前环境。

使用错误码 在应用开发时，用户也可以根据需要在应用开发设计器中，导入账号下其他的错误码。导入后，可在应用开发设计器中，使用该错误码。以在“A”应用为例，介绍如何导入错误码。 参考登录华为云Astro轻应用应用设计器中操作，进入“A”应用设计器。 在左侧菜单栏中，选择“逻辑”，单击页面下方的“自定义错误码”。 图2 选择自定义错误码 在自定义错误码页签，单击“导入”，选择账号下已有的错误码进行导入。 在脚本中，使用错误码。 这里通过新建脚本，将上文创建的错误码抛出，在脚本中增加抛出错误信息的context函数setI18nError('错误码名称','变量1','变量2')为例。 参考创建空白华为云Astro轻应用脚本中操作，创建一个空白脚本。 在脚本编辑器中，录入如下代码，并单击上方按钮区域的，保存脚本。 import*as context from'context'; context.setI18nError('命名空间__Error001','测试用例','脚本使用错误码的用例解读') 测试执行脚本。 单击编辑器上方的执行图标，在页面底部，单击测试窗口右上角的。在“输出参数”页签，显示如图3所示，可查看到抛出的错误码信息。 图3 运行脚本后显示界面 单击脚本编辑器上方的，启用脚本。 参考创建空白华为云Astro轻应用服务编排中操作，创建服务编排时可使用错误码。 在“全局上下文”中，新建公式变量，使用表达式SETI18NERROR(ErrorCodeName','变量1','变量2')方式引入错误码。 图4 服务编排中使用错误码 目前工作流中的错误码，由工作流调用的脚本和服务编排抛出。

操作场景 调用接口出错后，用户可根据每个接口对应的错误码来定位错误原因。华为云Astro轻应用支持用户自定义错误码，并支持对错误码描述进行多语言国际化配置，实现根据语言的不同将错误码描述信息进行不同的展示。 除了在环境配置中设置错误码，用户还可以在应用开发设计器中设置错误码，详情请参见自定义华为云Astro轻应用接口错误码。两者的区别是在应用开发设计器中配置的错误码，可在打包发布应用时，将错误码一起打包发布出去。例如将应用打包发布到运行环境，错误码也会同步打包到运行环境，不需要在运行环境重复创建。在环境配置中设置的错误码，无法随应用发布出去。

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

初识高级页面开发界面 图1 高级页面开发界面 高级页面开发工作台，功能模块布局说明如下： 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如保存、发布，电脑端或者移动端页面设置等。 ：用于展开、收起高级组件列表。 /：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 ：保存当前开发页面的修改。 ：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 ：页面发布后，可以预览该页面运行态效果。 ：页面开发完成后，可将该页面发布为模板。 /：页面开发过程中如果出现误操作，可执行撤销、复原操作。 ：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 /：用于调节页面画布在开发工作台中的大小比例。 ：自动适应页面画布在开发工作台中的大小比例。 ：开启画布网格线功能，用于标定组件在画布中的位置。 ：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 ：设置页面的状态。 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 高级组件展示、选择区域（序号2、3） 选定序号2的组件分类后，属于该功能分类的组件将显示在序号3的区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。 图2 搜索框 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3 应用场景筛选 预置和自定义筛选：用于筛选当前选定组件分类，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见设置华为云Astro轻应用高级页面预置组件属性。自定义组件为用户自主开发的高级组件，详情请参见为华为云Astro轻应用高级页面添加自定义组件。 画布（序号4） 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。下面以绝对布局方式的高级页面为例进行介绍。 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4 拖拽组件到画布中 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5 调整组件 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（如果已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6 格式刷操作示例 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见设置华为云Astro轻应用高级页面预置组件属性。 组件属性设置区域（序号5） 未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见为华为云Astro轻应用高级页面添加自定义组件。 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见使用桥接器为高级页面组件绑定数据。 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见添加事件或宏实现高级页面组件交互。 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code; } 其中，参数说明如表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*/ /*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/ @media screen and (min-width: 1200px) { body { background-color:blue; } } /*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/ @media screen and (min-width: 992px){ body { background-color:red; } } 避免固定尺寸 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。