华为云用户手册

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似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 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

前提条件 华为云Astro轻应用提供了默认对接的ROMA Connect服务器，也支持对接自有ROMA Connect实例。本章节以华为云Astro轻应用对接自有ROMA Connect为例进行说明，默认对接的ROMA Connect服务器配置类似。 已在ROMA Connect平台上完成应用创建（创建时，应用的“Key”字符长度必须小于60，否则后续向华为云Astro轻应用同步时会失败）、函数API创建、API分组创建、API创建、调试、发布和授权操作。关于ROMA Connect的具体操作，请参见使用ROMA Connect集成服务与配置API授权。 已在ROMA Connect上，设置“app_secret”和“app_route”值为“on”。 修改方法：在ROMA Connect实例控制台的“实例信息”页面，选择“配置参数”，修改“app_secret”和“app_route”的“参数运行值”为“on”。 对接自有ROMA Connect实例时，请确保已参考设置应用中对接的ROMA Connect信息中操作，在华为云Astro轻应用中设置ROMA Connect实例信息。

在脚本中调用连接器 在脚本中，调用连接器，实现调用ModelArts的接口。 参考创建空白华为云Astro轻应用脚本中操作，创建一个空白脚本。 在脚本编辑器中，输入如下代码。 import * as modelarts from 'modelarts'; export class Input { @action.param({ type: "String", required: false, description: "the image url" }) url: string; @action.param({ type: "String", required: false, description: "the base64 coded image" }) image: string; @action.param({ type: "String", required: false, description: "" }) apigCode: string @action.param({ type: "String", required: false, description: "" }) modelId: string } export class Output { @action.param({ type: "string" }) result: string; } export class testModelarts { @action.method({ input: "Input", output: "Output", description: "modelartspro test case" }) run(input: Input): void { // 填写实例化的modelartspro连接器名称 let client = modelarts.newClient("testArts") let result = null result = client.modelArtsWithURL(input.url, input.apigCode, input.modelId); console.log(result) return result } } 其中，代码modelarts.newClient("testArts")中“testArts”为连接器的名称。如果连接器名称中带有命名空间前缀，代码中也需要携带。 单击脚本编辑器页面上方的，保存脚本。 保存成功后，单击，运行脚本。 在页面底部“输入参数”中，设置输入请求参数，单击测试窗口右上角的。 { "url": "https://XXXXXXXXX/testmodelarts.jpg", "apigCode": "bec274062225485b95fbcd4d6e8f128a", "modelId": "5ecac550-eefe-4437-9767-57eca07fa91f" } 其中，“url”请设置为图片的URL。 在输出参数页签，可查看到识别的结果。 { "predicted_label": "roses", "scores": [ [ "roses", "0.947" ], [ "daisy", "0.050" ], [ "tulips", "0.002" ], [ "dandelion", "0.000" ], [ "sunflowers", "0.000" ] ] } 单击脚本编辑器页面上方的，启用脚本。

操作场景 华为账号是资源的归属以及使用计费的主体，对其所拥有的资源具有完全控制权限，可以访问所有云服务。为了保证您的账号安全，建议您创建一个 IAM 用户并赋予Astro Zero Instance ManageAccess和Astro Zero IAM User QueryAccess系统策略。赋予Astro Zero Instance ManageAccess和Astro Zero IAM User QueryAccess策略的IAM用户，可以购买华为云Astro轻应用实例，也可以将同一个华为账号下的其他IAM用户添加到华为云Astro轻应用，并赋予其管理员权限或开发者权限。 图1 给用户授予华为云Astro轻应用权限流程

操作场景 华为云Astro轻应用平台提供了创建原生服务工程的能力，原生服务工程本质上起到一种桥接的作用，用于将运行于华为云Astro轻应用平台之外的原生服务的API集成到华为云Astro轻应用，使得运行于华为云Astro轻应用之上的应用，更容易地使用原生服务的API。 开发Native Service前，请先了解整个Native Service的开发流程。 图1 原生服务开发流程图 创建Native Service 在华为云Astro轻应用中，您可以在应用设计器中创建原生服务，也可以在环境配置中创建原生服务。 配置Chart 通过华为云Astro轻应用提供的图形化界面，配置部署Docker容器时需要的资源、存储和网络等一系列参数。配置后，生成Chart包并进行导出。 配置API 原生服务旨在帮助您在华为云Astro轻应用平台上或外部系统，调用已开发好的服务。为了完成调用，需要知道服务开放了哪些接口，以及这些接口的请求参数、返回参数等。API配置后，可在服务编排中进行调用，也可将API再封装为自定义公共接口，供外部系统调用自定义公共接口。 部署Native Service 配置完API后，还需要执行部署操作，部署完成后才可使用Native Service。 注册Native Service 注册Native Service后，才可以在华为云Astro轻应用的其他组件内（如脚本、服务编排等）调用原生服务的接口，也可将该原生服务开放给第三方系统进行访问。 自定义Native Service公共接口 自定义原生服务的公共接口，将原生服务API发布到外部网关，第三方系统可以通过OAuth2.0调用华为云Astro轻应用上的原生服务。 导出Native Service给其他用户使用 服务编排可以成功调用原生服务后，说明整个流程已测通。您可以导出Native Service包给其他用户，其他用户可以在沙箱环境或运行环境中安装该包，以便于使用该软件或进行定制。

部署Native Service 配置完API后，还需要部署才可使用Native Service。请使用此前设计的Chart包，在CCE上完成服务的部署。 下载Chart包。 在创建Native Service中创建的原生服务配置页面，选择“导航”。 在“Chart设计”页签版本列表区域，单击待导出Chart后的，将Chart包导出到本地。 图21 导出Chart包 操作列按钮分别提供编辑Chart包、修改Chart包状态（单击后，Chart包状态是“Published”，无法再编辑该Chart包。单击后，Chart包状态是“Draft”，可编辑该Chart包。该界面不提供发布功能，实际发布要去CCE部署和发布）、预览Chart配置、导出Chart包、克隆已有Chart包配置和删除功能。 安装Native Service。 登录CCE服务控制台，单击集群名称进入集群，在左侧导航栏中选择“应用模板”，在右上角单击“上传模板”。 单击“添加文件”，选择已下载的Chart包，单击“上传”。 在我的模板中，单击已上传模板上的“安装”。 参照表3，设置安装参数。 表3 安装参数说明 参数 说明 实例名称 新建模板实例名称，命名必须唯一。 命名空间 指定部署的命名空间。 选择版本 选择模板的版本。 配置文件 用户可以导入values.yaml文件，导入后可替换模板包中的values.yaml文件；也可直接在配置框中在线编辑模板参数。 此处导入的values.yaml文件需符合yaml规范，即KEY:VALUE格式。对于文件中的字段不做任何限制。 导入的value.yaml的key值必须与所选的模板包的values.yaml保持一致，否则不会生效。即key不能修改。 单击“添加文件”。 选择对应的values.yaml文件，单击“打开”。 配置完成后，单击“安装”。 在“模板实例”页签下，可以查看模板实例的安装情况。 （可选）升级Native Service。 部署Native Service后，可以通过更换镜像或镜像版本，实现Native Service的快速升级，业务无中断。 登录CCE控制台，单击集群名称进入集群，在左侧导航栏中选择“应用模板”，在右侧选择“模板实例”页签。 单击待升级工作负载后的“升级”，设置升级模板工作负载的参数。 选择对应的模板版本。 参照界面提示修改模板参数。单击“升级”。 执行状态为“升级成功”时，表明工作负载升级成功。

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

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

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

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

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

通过内置动作编排事件 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 在页面中，将鼠标放在对应的页面上，单击，选择“编辑”。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的“+”，进入添加动作页面。 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。 图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()”效果相同。 调用脚本 该预置动作，用于执行脚本。 调用服务编排 该预置动作，用于执行服务编排。 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

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

批量导入对象数据 通过导入文件，一次性批量导入数据。此处的导入对象数据是针对单个表的数据进行导入。华为云Astro轻应用环境配置中的导入对象数据，可以选择导入单个表，也可以同时导入多个表数据，详细介绍请参见导入导出应用中对象的数据。 在应用设计器的左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“编辑”，进入对象设计器。 单击对象中的，进入对象详情页。 在“数据”页签，单击“导入”，进入数据导入页面。 单击“标准表单模板”，下载导入模板。 图14 下载导入模板 打开下载的“标准表单模板”文件，查看“导入规格说明及示例”。 图15 查看导入规格说明及示例 切换到对象表中，按要求填写导入数据的字段内容，保存文件。 文件中第一行作为列名，列名需要与字段的唯一标识一致，否则导入时会被丢弃。 返回数据导入页面，拖入本地已填写好的模板文件，单击“导入”。 图16 批量导入数据

删除对象 应用中的对象不再使用时，可删除对象，避免占用账号的资源配额。对象删除后不可恢复，请谨慎操作。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“删除”。 在弹出的确认框中，勾选“同时删除资源中的记录？”，单击“确认”，即可删除该对象。 删除对象时，如果不勾选“同时删除资源中的记录？”，仅会删除该对象，使用该对象的功能模块不会受到影响可正常使用。

批量导出对象数据 将对象中的数据批量导出，导出后，可在其他对象中导入使用。和批量导入对象数据中操作一样，此处的导出对象数据是针对单个表的数据进行导出。华为云Astro轻应用环境配置中的导出对象数据，可以选择导出单个表，也可以同时导出多个表数据，详细介绍请参见导入导出应用中对象的数据。 在应用设计器的左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“编辑”，进入对象设计器。 单击对象中的，进入对象详情页。 在“数据”页签，选中待导出的数据，单击“导出”。 导出的文件类型为xlsx，文件名为“命名空间__对象名__ CS T”。 导出后，可参考批量导入对象数据中操作，在其他对象中导入数据。

关联对象 关联对象是指在多个对象间添加关联关系，即让一个对象知道另一个对象的存在。在华为云Astro轻应用中，支持为对象添加“查找关系”和“主从关系”两种类型的关联关系。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“编辑”，进入对象设计器。 单击对象后的，进入添加关联页面。 图1 创建对象关系 设置关联关系，单击“下一步”。 图2 选择关系类型 查找关系：引用目标对象的记录，通过关联当前字段与另一对象的ID字段，创建本对象与另一对象的引用关系。定义了查找关系后，本字段的取值只能来源于关联对象。当本对象的记录被删除时，被引用记录不受影响。例如，学生对象到班级对象的关联关系。 主从关系类型：目标对象为当前对象的子表，通过关联当前字段与另一对象的ID字段，创建本对象与另一对象的主从关系。定义了主从关系后，本字段的取值只能来源于关联主对象。当本对象的记录被删除时，子表记录会被一起删除。例如，订单对象和订单明细对象的关联关系。 设置关系类型的基本信息，单击“确定”。 表1 添加对象关系参数说明 参数 说明 显示名称 请输入关联关系在界面的展示名称，创建后支持修改。 取值范围：1~80个字符。 唯一标识 关联关系在系统中的唯一标识，创建后不支持修改。命名要求如下： 长度不能超过63个字符，包括前缀命名空间和后缀“__CST”的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母，数字或下划线组成，且不能以下划线结尾。 关联对象 选择关联目标，下拉框展示当前应用内所有对象的显示名称。 对象与目标对象创建关系后，会产生关系连线， 如图3所示。 图3 关联对象 关联关系两端显示和，表示1对多关系。目前查找关系和主从关系都是1对多关系，低代码平台暂无1对1的关系设置。 箭头从有关系字段的对象，指向被关联的对象。 关系连线被选中时，右侧显示关系字段的属性面板。在右侧属性面板中，可以修改关联字段的属性信息或删除关联字段。

克隆对象 对象创建完成后，支持将对象克隆到当前应用中。例如，应用A中存在两个或多个字段和数据重复的对象，此时可基于已创建的对象克隆出一个新对象，再基于克隆后的对象进行修改，减少重复创建的操作。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“克隆”。 设置克隆对象的名称和唯一标识，单击“确认”。 克隆完成后，在对象目录下可查看到克隆的新对象。 图6 克隆对象

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

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似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 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

应用后端开发概述 后端开发主要包括模型开发、逻辑开发和流程开发三大类。各类中包含的具体功能，如图1所示。 图1 后端开发 模型开发：在华为云Astro轻应用中是以模型驱动，快速构建业务场景的，因此首先要定义应用的数据模型，就是应用中的业务数据存储在哪里，也就是通常所说的搭建数据库、创建数据库表等。这些动作，对应华为云Astro轻应用中的对象，对象可以理解为数据库中表的概念。例如，在开发某个仓库商品管理应用时，需要创建商品和仓库两个对象，来分别存储商品信息（如商品编码、商品状态、库存总量、现存数量和仓库商品关系等）和仓库信息（如仓库名称、仓库编码、仓库地址和记录ID等）。如果需要实现多个对象之间关联数据查询功能，可通过创建对象视图来实现。 逻辑开发：数据模型开发完成后，相关的业务功能实现可能和某些数据做对接，也可能是一些数据的处理，这就涉及要业务接口和逻辑的开发。脚本和服务编排都是负责业务接口和逻辑开发的，两者的主要区别是脚本是代码化的，而服务编排是图形化的；服务编排适用于业务逻辑比较简单的场景（建议不超过20个图元），对于业务逻辑比较复杂的场景需要使用脚本。触发器以图形表示的方式，将业务流程呈现给用户，触发器配置好后，用户不必手动执行这些操作，系统会自动执行。触发器的典型使用场景是脚本已实现了逻辑开发，这时不想修改脚本但需要去实现某个功能，此时可选择使用触发器。 流程开发：与服务编排类似，工作流也是一套图形化的流程编排引擎，但是工作流着重于构建带有用户交互行为的业务流程，例如审批流、工单派发流程等。在实际的业务流程开发中，通常会将工作流与服务编排结合使用，即服务编排用于实现系统的具体逻辑操作，工作流通过调用服务编排、关联用户任务与页面，实现多次人机交互的流程。此外，在业务系统中通常存在很多场景不需要人工参与，可以在系统后台定期完成的，此时可通过创建定时任务来实现。例如，通过创建定时任务，在每天凌晨3点，定时将到期的商品进行下架处理。 表1 后端开发 分类 特性 特性说明 模型开发 对象 对象（也可以称为Object）相当于传统方式开发业务系统时，数据库中的一个表。每个对象对应一张数据库表，用于保存业务系统需要的配置数据和业务数据。 事件 在业务流程中，有意义的状态变化都可称为事件。自定义好事件后，可基于该事件实现事件发送、事件订阅，对发送的事件数据进行分析处理等功能。 结构体 结构体是用于约束应用开发时，输入、输出和内部变量使用的规范。在华为云Astro轻应用低代码平台中可以应用于服务编排、连接器等场景的外部输入、输出参数以及流程内部的变量结构。 逻辑开发 脚本 脚本和服务编排一样，都是完成业务接口和逻辑开发的，脚本是基于TypeScript语言，适用于业务逻辑比较复杂的场景。 服务编排 服务编排和脚本一样，都是完成业务接口和逻辑开发的，服务编排是图形化的，适用于业务逻辑比较简单的场景（建议图元不超过20个）。 触发器 触发器以图形表示的方式将业务流程呈现给用户，触发器配置好后，用户不必手动执行这些操作，系统会自动执行。 流程开发 工作流 与服务编排类似，工作流也是一套图形化的流程编排引擎，但是工作流着重于构建带有用户交互行为的业务流程，例如审批流、工单派发流程等。 定时任务 通过创建定时任务，让系统自动执行某脚本、服务编排完成业务功能。例如，系统中存在一个定时任务，在每天凌晨3点，定时将到期的商品进行下架处理。 父主题： 使用华为云Astro轻应用开发应用后端

开启小程序模式 开发者将当前应用发布为移动端应用需要先在移动端设置中开启小程序模式。开启后则支持开发者在发布操作时，将当前应用发布为对应的移动端小程序。若在移动端设置中关闭了小程序模式，则不支持开发者发布生成移动端应用。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“设置”，进入应用设置页面。 选择“移动端设置”，开启小程序模式。 图1 开启小程序模式 开启小程序模式后，在“多端发布设置”中，勾选应用支持发布的小程序。

在脚本中调用连接器 在脚本中，调用已创建的连接器，实现与Message& SMS 的对接。 参考创建空白华为云Astro轻应用脚本中操作，创建一个空白脚本。 在脚本编辑器中，输入如下代码。 //导入该事件所依赖的标准库文件。msgsms是系统预置的标准库。 import * as sms from 'msgsms'; @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(){ console.log('`````````````````````test new sms`````````````````````') let client = sms.newClient("MSGSMS_Test") let res = client.sendByName("Test1","130XXXXXXXX","[\"6612\"]") console.log(res) console.log('`````````````````````test new sms end`````````````````````') } } 其中，sms.newClient("MSGSMS_Test")中“MSGSMS_Test”为连接器的名称。client.sendByName("Test1","130XXXXXXXX","[\"6612\"]")中携带的是模板名称、接收者号码和模板参数。 单击脚本编辑器页面上方的，保存脚本。 保存成功后，单击，运行事件。 在页面底部，单击测试窗口右上角的。 检查接收者是否收到短信，收到短信表示成功调用连接器。 单击编辑器页面上方的，启用脚本。

标准页面组件分类 标准页面组件包括系统预置的基本组件和用户自定义的扩展组件，基本组件具体说明如表1所示。如果需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上方会出现问号图标，单击该图标会出现该基本组件的使用说明。 表1 基本组件分类说明 分类 说明 布局 用于控制页面的布局，即将页面划分为几行几列。例如，先拖入一个栅格容器，将栅格容器用行列划分成小区域后，再向单元格中拖入其他组件。容器本身可以包含容器，也可以包含其他组件。 表单：具有数据收集、校验和提交功能的表单，通常用于制作带数据的交易类页面。 表格/表格(新)：主要用于展示大量结构化的数据，使用时需要通过数据绑定数据模型。适用于通过一个表格，完成数据对象的增、删、改、查的操作场景。 容器：基本的布局容器，支持拖拽放置任何组件进去，按照流式布局模式布局（非独占整行组件如按钮组件，从左往右排列，占满整行即换行；独占整行组件如标题组件，则默认独占一行）。 分栏：容器组件，相当于行，内部支持分为多栏（列）。通过该组件，可将页面划分为两栏或多栏，每一栏都可以拖入其他组件。 折叠面板：用于对页面的某些区域进行折叠和展开。 页签：选项卡切换组件，通常用于平级区域大块内容的收纳和展示。 列表视图：用于灵活组合列表项的内容，并且根据实例化数据动态展示。 模态框：模态对话框，在保留当前页面状态的情况下，在浮层中显示。 表单 输入框：文本输入框，关联对象文本（text）类型，可编辑一行的文本控件，包含标签。适用于普通文本输入。 多行输入框：多行文本输入区域，关联对象文本区（Text Area）类型，多行可编辑的文本控件。适用于多行文本输入。 日期选择框：用于选择或输入日期，关联对象日期（Date）类型、日期/时间（Date/Time）类型，可以选择或输入日期，支持年、月、日期等类型。 数字输入框：数字（Number）类型的输入框，关联对象数字类型。 金额：用于输入金额。 复选按钮：该控件允许用户从多个选项中进行多种选择。 单选按钮：用于一组可选项的单项选择，或者切换某个选项的选中状态，以实现从一组互斥的选项组中选择一项。 下拉框：使用下拉菜单，展示并选择内容。 级联选择框：从一组相关的数据集合中进行选择，和下拉框相比，可一次性完成选择，体验更好。 开关：在两种状态间切换时用到的开关选择器。 上传：文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。 自动完成：带有提示的文本输入框。 关联选择框：一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。 弹出对话框：弹出对象选择框，可弹出自定义页面。 多语言选择框：多语言切换组件，根据系统设置的多语言信息，展示配置项。 评分：评分、评价组件。 基本 按钮：通过编排事件实现Button，触发业务逻辑使用。 按钮卡：包含多个按钮（两个或更多）的整体面板。该组件可用于构建多项菜单，用于在视图之间导航。 标签：用于显示页面信息的静态文本。 图标：用于辅助相关文字进行展示，也可当做按钮单击使用，通常需要配合其他组件一起使用。 标题：用于添加具有标题意义的文字，可以通过选择属性“标题类型”的值，来控制添加标题的文字大小。 链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。 图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。 面包屑：显示网站的层级结构，告知用户当前所在的位置，如“首页/菜单1/菜单2/菜单3”。 滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等组件中。当鼠标在轨道上单击时，滚动球会移动到当前鼠标单击的位置，单击过的地方会以蓝色显示，未单击的地方是灰色。 分页：当数据量较多时，使用分页可快速进行数据切换。 二维码：二维码生成组件。 高级 选项树：数据为树形结构时，可使用该组件，以完整展示树形结构数据的层级关系，并具有展示、收起、选择等交互功能。 步骤条：引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。 时间轴：一般绑定数据服务使用，动态的展示时间轴的内容。 走马灯：常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 可收缩面板：弹性伸缩布局，用于将内容区域收缩/展开。 滚动容器：当页面内容已超出屏幕的范围时，需要拉动滚动条，在有限的屏幕中浏览更多内容。 选择卡：用于将多个项目，从一边移动到另一边。 栅格容器：用于控制页面的布局，即将页面设计几行几列，先设置元素在页面中纵向排列，然后在每一行中又可设置元素横向排列。 代码块：用于代码块展示。 富文本：富文本编辑器。 视频播放：视频播放组件，用于播放视频。 流程 流程-动作：流程中使用的动作组件。 流程-历史：流程中使用的历史记录组件。 流程-附件：流程中使用的附件组件。 流程图：流程中使用的流程图组件。

操作场景 API Explorer 是华为云为开发者提供的一站式API解决方案的统一平台，集成华为云云服务开放API，支持全量快速检索、可视化调试、帮助文档，帮助开发者快速查找、学习API和定位修复错误。 华为云Astro轻应用通过对接API Explorer，可获取到大量华为云云服务的API元数据信息，从而为开发者提供访问这些API的连接器，无需再针对每个云服务单独开发连接器。 华为云Astro轻应用当前支持对接如下云服务的API，本章节以自然语言处理为例，向您介绍如何使用华为云API Explorer导入连接器。 自然语言处理 自然语言处理（Natural Language Processing，简称NLP）是一款基于人工智能技术，针对各类企业及开发者提供的用于文本分析及挖掘的云服务，旨在帮助用户高效的处理文本。更多介绍，请参见https://support.huaweicloud.com/nlp/index.html。 对话机器人服务 对话机器人 服务（Conversational Bot Service） 是一款基于人工智能技术，针对企业应用场景开发的云服务，主要包括智能问答、智能质检、定制对话机器人和任务型对话等功能。更多介绍，请参见https://support.huaweicloud.com/cbs/index.html。 人脸识别服务 人脸识别 服务（Face Recognition Service，简称FRS），是基于人的脸部特征信息，利用计算机对人脸图像进行处理、分析和理解，进行身份识别的一种智能服务。更多介绍，请参见https://support.huaweicloud.com/face/index.html。 内容审核 服务 内容审核（ Content Moderation ），基于图像、文本、 视频审核 技术，可自动进行涉黄、广告、涉政涉暴、涉政敏感人物等内容检测，帮助客户降低业务违规风险。更多介绍，请参见https://support.huaweicloud.com/moderation/index.html。 文字识别 服务 文字识别（Optical Character Recognition，简称OCR）以开放API的方式提供给用户，用户使用Python、Java等编程语言调用OCR服务API将图片识别成文字，帮助用户自动采集关键数据，打造智能化业务系统，提升业务效率。更多介绍，请参见https://support.huaweicloud.com/ocr/index.html。 图像识别服务 图像识别（Image Recognition），基于深度学习技术，可准确识别图像中的视觉内容，提供多种物体、场景和概念标签，具备目标检测和属性识别等能力，帮助客户准确识别和理解图像内容。更多介绍，请参见https://support.huaweicloud.com/image/index.html。 图像搜索 服务 图像搜索（ImageSearch）基于深度学习与图像识别技术，结合不同应用业务和行业场景，利用特征向量化与搜索能力，帮助客户从指定图库中搜索相同或相似的图片。更多介绍，请参见https://support.huaweicloud.com/imagesearch/index.html。 视频接入服务 视频接入 服务（Video Ingestion Service，简称VIS）是华为云提供的实时视频 数据接入服务 ，提供了摄像头视频数据采集、实时数据分发和视频数据转储等能力。借助视频接入服务，您可以与华为云视频分析服务集成，快速构建基于实时视频数据的智能分析应用。更多介绍，请参见https://support.huaweicloud.com/vis/index.html。 视频分析服务 视频分析服务（Video Analysis Service，简称VAS）依靠AI技术对视频进行智能分析，提供了视频预处理、视频审核、视频内容分析、 视频编辑 、视频搜索、 视频指纹 等功能。包含了对视频中目标的检测、跟踪、属性识别、行为识别、内容审核、摘要、标签等能力，在多种场景下为用户提供快捷高效的视频分析能力。更多介绍，请参见https://support.huaweicloud.com/vias/index.html。 语音交互 服务 语音交互服务（Speech Interaction Service，简称SIS）是一种人机交互方式，用户通过实时访问和调用API（Application Programming Interface，应用程序编程接口）将 语音识别 成文字或者将文本转换成逼真的语音等。更多介绍，请参见https://support.huaweicloud.com/sis/index.html。

操作场景 在华为云Astro轻应用中，可通过配置OAuth管理第三方接入鉴权。华为云Astro轻应用采用OAuth 2.0协议，进行接入认证。第三方系统在调用华为云Astro轻应用业务接口前，需要在华为云Astro轻应用上进行鉴权注册，获取接入客户端ID、密钥等鉴权信息，才能实现调用华为云Astro轻应用业务接口。 华为云Astro轻应用提供了“客户端模式”和“授权码模式”两种授权模式，进行OAuth鉴权。 客户端模式 通过该模式获取的access-token，用于在调用API接口时进行鉴权，使用时需在请求消息头上设置“access-token”。 图1 客户端模式 授权码模式 通过该模式获取的access-token，只能用于在获取用户信息时进行鉴权，使用时需在请求消息头上设置“Authorization”。 图2 授权码模式

自定义OAuth2授权码模式接入鉴权 前面介绍了第三方系统在调用华为云Astro轻应用业务接口前，如何配置接入鉴权。鉴权通过后，才能实现调用华为云Astro轻应用业务接口。在华为云Astro轻应用中开发的应用，也可以自定义OAuth2授权码模式接入鉴权。当应用配置鉴权后，只有通过鉴权的第三方系统才可以访问应用。 参考授权码模式接入认证中的4~6，获取鉴权ID“client_id”和鉴权密钥“client_secret”。 在应用开发页面，通过自定义接口，给第三方接入调用，用于第三方系统获取授权码code。 应用调用脚本API，判断第三方客户端的鉴权ID“client_id”和重定向地址“redirect_url”是否和注册接入鉴权时匹配。 如果匹配，则由华为云Astro轻应用中应用自定义接口，实现登录跳转和授权跳转。在授权完成后，再调用脚本API获取授权码code，并将需要展示给第三方的授权用户信息通过该API传给华为云Astro轻应用，华为云Astro轻应用会返回一个code。最后，应用重定向到“redirect_url”，并携带code。 判断第三方客户端的鉴权ID“client_id”和重定向地址“redirect_url”是否和注册接入鉴权时匹配的API样例如下： // Here's your code. import * as oauth from 'oauth' let handle = oauth.getAuthorizeHandle() let clientDatas: oauth.clientDataFromApp = { redirect_uri: "http://10.26.30.68:14000/appauth/code", client_id: "bff4398905ee4a918722debec98b594c", } let pass = handle.checkURL(clientDatas) console.log(pass) //true if (pass){ //判断是否登录，做登录跳转 //判断是否授权，做授权跳转 } 获取授权码code的脚本API样例如下： // Here's your code. import * as oauth from 'oauth' let handle = oauth.getAuthorizeHandle() //前面步骤已经走完 let clientDatas: oauth.clientDataFromApp = { redirect_uri: "http://10.26.30.68:14000/appauth/code", client_id: "bff4398905ee4a918722debec98b594c", } let userInfo = { "name": "jack", "phone": "1256287222", "email": "example.com" } let code = handle.getAuthCode(clientDatas, userInfo) console.log(code) //WEUcqXbeQDKUHxcn8til3Q 第三方系统接收到该请求，并解析出code后，在后端访问接口获取access_token，步骤和8一致。 第三方系统在获取到access_token后，使用该凭证访问平台“https:// 域名 /u-route/baas/oauth/v1.0/third/userinfo”接口（该接口和10中的接口不同），来获取授权用户的信息。 响应示例如下： { "resCode": "0", "resMsg": "成功", "result": { "email": "example.com", "name": "jack", "phone": "1256287222" } }

边框 设置组件的边框样式，支持全边框和角边框两种。 图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 ] } ] } }] } 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。 设置完成后，单击“确定”。

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