华为云用户手册

操作场景 添加的 IAM 开发者账号，必须是从华为云IAM同步过来的。用户的个数受业务阈值限制，如何查看用户个数，请参见查看华为云Astro轻应用账号的业务阈值。 华为云Astro轻应用中的开发环境、沙箱环境和运行环境是三个独立的环境，在某个环境上添加的用户不能在其他环境上使用，需要重新添加。例如，在开发环境中添加了用户A，用户A只能登录开发环境，无法登录运行环境或沙箱环境。如果用户A需要登录运行环境或沙箱环境，请在运行环境和沙箱环境中执行添加用户的操作。

在已有服务编排基础上新建服务编排 需要开发的新服务编排与已有的某个服务编排类似，此时可以基于原有服务编排修改，再保存为新的服务编排。在此场景下，原有服务编排仍然有效。新服务编排和老服务编排也没有关联关系，各自独立。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“逻辑”。 将鼠标放在对应的服务编排上，单击，选择“编辑”，进入服务编排设计页面。 在服务编排设计页面上方，单击，进入另存为页面。 “类型”选择“新服务编排”，设置服务编排标签，单击“保存”。 图3 另存为新服务编排 表2 另存为新服务编排参数说明 参数 说明 标签 服务编排的标签，用于在页面展示，创建后可修改。 取值范围：1~64个字符。 名称 服务编排在系统中的唯一标识，创建后不支持修改。系统会自动在名称前添加“{命名空间}__”，当其他功能调用服务编排时，调用的是服务编排的名称，而不是标签。 命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 名称必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 类型 在下拉框中，选择服务编排另存的类型。 新版本：基于原有服务编排创建一个新版本的服务编排，创建后原有服务编排作为老版本自动失效。 新服务编排：基于原有服务编排创建一个新的服务编排。创建后原有服务编排仍然有效。新服务编排和老服务编排也没有关联关系，各自独立。 默认值：新版本，此处请选择“新服务编排”。 服务编排类型 继承创建基础服务编排时配置的类型，不可更改。 展示标签 服务编排实例的展示标签，系统自动填充为“标签值{!$Flow.CurrentDateTime}”。设置后，单击服务编排设计页面的空白处，再单击，在“基本信息”中可查看到设置的标签。 描述 根据实际需求，输入服务编排的描述信息。 取值范围：1~255个字符。 在服务编排设计页面，进行定制修改。 在服务编排设计页面，可查看到新建的服务编排，且版本为1.0.1。 图4 编辑新服务编排的内容 服务编排定制完成后，单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排，检查服务编排运行结果是否符合预期。 符合预期后，单击页面上方的，启用服务编排。

在已有服务编排基础上新建版本 因业务需要，服务编排要实现的能力发生了变化，此时可以基于原有服务编排修改，并保存为服务编排的新版本。在此场景下，原有服务编排作为老版本自动失效。 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“逻辑”。 将鼠标放在对应的服务编排上，单击，选择“编辑”，进入服务编排设计页面。 在服务编排设计页面上方，单击，进入另存为页面。 “类型”选择“新版本”，设置服务编排标签，单击“保存”。 图1 另存为新版本 表1 添加新版本服务编排参数说明 参数 说明 标签 输入新版本服务编排的标签名，用于在界面展示，创建后支持修改。 取值范围：1~64个字符。 名称 服务编排的名称，和基线版本的服务编排名称保持一致，不可更改。 类型 在下拉框中，选择服务编排另存的类型。 新版本：基于原有服务编排创建一个新版本的服务编排，创建后原有服务编排作为老版本自动失效。 新服务编排：基于原有服务编排创建一个新的服务编排。创建后原有服务编排仍然有效。新服务编排和老服务编排也没有关联关系，各自独立。 默认值：新版本，此处直接使用默认值即可。 服务编排类型 继承创建基础服务编排时配置的类型，不可更改。 展示标签 服务编排实例的展示标签，系统自动填充为“标签值{!$Flow.CurrentDateTime}”。设置后，单击服务编排设计页面的空白处，再单击，在“基本信息”中可查看到设置的标签。 描述 根据实际需求，输入新版本服务编排的描述信息。 取值范围：1~255个字符。 在服务编排设计页面，进行定制修改。 在服务编排设计页面，可查看到服务编排当前的版本为1.0.2，即在原有服务编排版本的基础上自动加“1”。 图2 新版本服务编排 编辑完成后，单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排，检查服务编排运行结果是否符合预期。 单击页面上方的，启用新版本服务编排。 在此方式下，当基线版本升级时，系统默认启用和使用服务编排的定制版本。升级造成的基线服务编排原有图元变化，定制服务编排可继承。升级造成的基线服务编排新增图元，定制服务编排无法继承。

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

创建高级页面 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“界面”。 （可选）单击高级页面后的，为高级页面添加目录。 高级页面默认存放在根目录下，在创建高级页面前，您可以先创建高级页面存放的目录，也可以在高级页面创建后将其拖拽到指定目录。 将鼠标放在已创建的高级页面目录上，单击，进入添加高级页面。 如果未创建高级页面目录，请直接单击高级页面后的，进入添加高级页面。 设置高级页面的基本信息，单击“添加”。 图1 新建高级页面 表1 高级页面参数说明 参数 说明 标签 输入高级页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~100个字符。 名称 输入高级页面的名称，名称是高级页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度范围为1~100个字符。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 视图 为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 默认为电脑端和手机端全部选中。 在应用中，首次创建高级页面时，才会显示“视图”参数。如果应用中已存在高级页面，则不会显示该参数。 描述 根据实际需求，在输入框中输入高级页面的描述信息。 取值范围：1~255个字符。 关键字 为了便于搜索高级页面，可以在此处自定义一些关键字。 布局类型 在AstroZero中创建高级页面时，提供了两种布局模式的页面布局供您选择，请按需进行选择。 绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。 流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。流式布局常用于常规Web应用开发，例如电商网站、管理网站等。 开发高级页面。 下面以开发一个绝对布局的高级页面为例，向您如何使用华为云Astro轻应用快速开发一个高级页面。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方，单击，设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件（1个文本编辑、1个基本柱图和1个多区域折线图），通过拖拽进行位置、大小调整。 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。 图4 设置文本编辑组件内容 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。 图5 精确设置组件大小 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。 图6 复制组件 单击页面上方的，保存页面。 单击，预览高级页面，查看当前页面在运行态的效果。 图7 预览高级页面

前台页面常用调测方法 在高级页面的开发中，常借助浏览器内置的 开发者工具 对样式或功能问题进行定位和分析。下面以Chrome浏览器为例，简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 DOM和 CSS 样式调试 在Elements面板，可以自由的操作DOM和 CS S，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。 图1 Elements页签查看调试DOM和CSS样式 打印日志信息 在Console页签下，可使用控制台打印日志信息。在Sources页签下，调试JavaScript时常用方法是将多个console.log()语句插入代码，重新加载页面后，可以在Console页签中，查看到打印的消息。Sources页签主要包括三个部分，左侧为页面请求文件列表，中间为选择文件的文件内容，右侧为JavaScript调试窗格。 想要在JavaScript中打印日志，需要找到相应文件，查找相关代码，然后插入console.log()。 图2 Sources页签布局 调用低代码平台API 在Console页签下，可使用控制台调用低代码平台提供的API，以获取相关信息进行调试。 图3 调用低代码平台API 断点调试 在Sources页签下，可以设置断点来调试JavaScript。使用断点，DevTools会在暂停时及时显示所有变量值。Chrome开发者工具，提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点，请根据调测的实际需求选择合适的断点。断点的类型和使用场景，如表1所示。 表1 Chrome断点类型及使用场景 断点类型 使用场景 代码行 在确切的代码区域中。 条件代码行 在确切的代码区域中，且仅当其他一些条件成立时。 DOM 在更改或移除特定DOM节点或其子级的代码中。 XHR 当XHR网址包含字符串模式时。 事件 在触发点击等事件后运行的代码中。 侦听器 在引发已捕获或未捕获异常的代码行中。 异常函数 任何时候调用特定函数时。 代码行断点调试是最为常见的断点调试方法， 设置代码行断点的方法是找到请求文件，在Sources左侧请求文件列表按照目录查找，也可以借助“Ctrl+F”搜索关键词找到相关文件。在Sources中间文件内容区域，找到要设置断点的代码行，单击行号，出现蓝色图标，这意味着这行代码上有一个代码行断点。如图4所示，在global_BubbleChartWidget.js文件的49行代码处，设置了一个代码行断点。 刷新此网页，事件运行始终会在执行此行代码之前暂停，可单击右侧调试窗格的按钮进行单步调试，或者单击调试窗格的按钮继续执行事件。 图4 代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。 图5 模拟移动设备

在脚本中调用连接器 在脚本中，调用已创建的连接器，实现与SMTP的对接。 参考创建空白华为云Astro轻应用脚本中操作，创建一个空白脚本。 在脚本编辑器中，输入如下代码。 // 导入连接器 import * as connector from 'connector'; //新建SMTP邮件连接器，第一个参数固定是emailsmtp，第二个参数是连接器的名称 let client = connector.newClient("emailsmtp","命名空间__smtp01"); //构建请求消息头，包括收件人地址、邮件主题、邮件正文（主题和正文不能同时为空） //按内容发送 let req ={"address":"test@example.com","subject":"SMTP功能验证-事件","body":"使用SMTP发送邮件"}; //按模板发送，如果有template模板参数，则主题和正文配置无效，按邮件模板中的内容发送 //let req={"address":"test@example.com","template":"smtptt1."} //发送邮件，其中第一个参数不用填写，第二个参数为消息体 let resp = client.invoke("",req); 其中，connector.newClient中“命名空间__smtp01”为连接器的名称，“address”为收件人，“subject”为主题，“body”为邮件内容。 单击脚本编辑器页面上方的，保存脚本。 保存成功后，单击，执行脚本。 2中已设置入参，故此处不需要再设置，直接单击测试窗口右上角的。 检查收件人是否收到邮件。 收到邮件，表示成功调用连接器，如图4。 图4 接收邮件内容 单击脚本编辑器页面上方的，启用脚本。

调测工作流 参考登录华为云Astro轻应用应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“流程”。 将鼠标放在对应的工作流上，单击，选择“编辑”。 在工作流设计页面，单击，运行工作流，模拟与工作流进行交互。 交互完成后，请确认步骤操作的结果是否符合预期。 单击工作流设计页面右上方的“跟踪器”，打开日志跟踪器页面。 在“日志跟踪器”页面，查看工作流执行的每一步的详细信息，例如查看变量传递是否符合预期。 图1 日志跟踪器 日志跟踪器界面分为两部分，即搜索框和流程日志跟踪记录表格。 搜索框 图2 搜索框 流程切换：用户可以根据时间筛选曾启动过的流程，每个流程的跟踪信息只保存半个小时。 搜索框：根据流程跟踪信息进行搜索。 下载：将当前完整的流程日志，以文件形式下载到本地，便于保存或查看。 表格：日志跟踪器表格记录了工作流的流程流转的日志。其中包含时间戳、所属模块的类型、所属模块的名字、具体操作的图元类型、图元名称以及该操作的描述。模块在执行子流程时，会切换为子流程的类型和名称。 如果不符合预期，则重新返回工作流修改，重复执行4。

常见错误 变量赋值错误？ 请检查输入参数的类型与定义是否匹配，必要时进行类型转换。 变量结构错误？ 请检查输入参数的结构（属性名、取值类型）与目标结构是否一致。当出现大段JSON报错信息时，可借助JSON Viewer或在线JSON格式化工具进行对比。 没有走指定分支？流程意外终止？ 由于流程的结束是隐含的，当没有下一步的内容时流程即结束。因此，在排他网关里如果没有设置默认分支，当所有分支的条件都不满足时，流程即进入结束状态。

购买沙箱 以创建用户并授权使用华为云Astro轻应用中创建IAM用户进入购买Astro轻应用沙箱实例页面。 在购买华为云Astro轻应用实例页面，设置对应参数，单击“立即购买”。 图1 购买沙箱 表1 购买沙箱参数说明 参数 说明 实例版本 待购买实例的版本，请选择“测试沙箱环境”。 实例名称 新建实例的名称，同一账号下实例不可重名，创建后不可修改。命名要求如下： 长度为4~64个字符。 必须以英文字母开头，只能英文字母、数字或下划线组成。 数量 输入购买沙箱的个数，一次性最多支持购买5个，可进行多次购买。 规格说明 华为云Astro轻应用沙箱实例规格说明，详细介绍请参见产品规格差异。 购买时长 设置沙箱的购买时长，最短1个月，最长3年。 在购买华为云Astro轻应用页面，确认支付方式，单击“去在线支付”。 支付成功后，单击“返回Astro轻应用控制台”，即可进入华为云Astro轻应用服务控制台。 进入华为云Astro轻应用沙箱环境。 创建功能调试沙箱实例预计需要几分钟，请耐心等待。创建成功后，控制台会显示已成功购买的沙箱环境实例，单击相应沙箱环境实例的“管理沙箱环境”，即可进入相应环境。

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 标题：模态框的标题。 确定按钮文字：模态框的“确定”按钮上的文字。 取消按钮文字：模态框的“取消”按钮上的文字。 显示Loading：开启后，确定按钮显示loading状态。 显示遮罩层：开启后，显示遮罩层。 点击遮罩层关闭：开启后，允许单击模态框外的遮罩层关闭模态框。关闭后，必须先对该模态框进行响应，才能将该模态框关闭，例如单击模态框中的按钮（“确定”、“取消”）以及图标。 可拖动：开启后，该容器可拖动。 不显示底部：开启后，隐藏“确认”和“取消”按钮区域。 显示取消按钮：开启后，显示取消按钮。 确定按钮在前：开启后，确认按钮在前。 确定按钮禁用：开启后，确认按钮被禁用。 懒加载：开启后，弹框不打开不渲染，以提高性能。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似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 事件编排器 事件编排是页面的重要组成部分，用于承载页面中的逻辑，完成事件响应，以帮助用户快速高效地实现页面所需要呈现的功能效果。 事件行为区：集中存放事件编排过程中使用的行为节点，包括系统内置的动作（例如打开页面、弹出页面、显示或隐藏控件、定时任务、提交表单、重置表单等）和自定义动作（例如获取当前组件、获取页面模型等）。 事件定义区：事件编排的操作区域，完成对事件逻辑的编排。开发者在代码编写过程中，键入特定的字符，界面会进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 事件内置API补全：输入“context”后，提示事件代码内可调用的API。 图2 事件内置API补全 模型名称补全：输入“context.$model.ref”后，提示当前页面中的模型。 图3 模型名称补全 服务编排名称补全：输入“context.flow”后，提示当前租户下的服务编排。 图4 服务编排名称补全 事件名称补全：输入“context.script”后，提示当前租户下的事件。 图5 事件名称补全 服务名称补全：输入“context.service”后，提示当前租户下的 API服务 ，选择API服务名称后自动补全服务地址。 图6 服务名称补全 图7 自动补全服务地址 华为OneMobile API补全：输入“xm”后，提示华为OneMobile小程序中的API。 图8 华为OneMobile API补全 WeLink API补全：输入“HWH5”后提示WeLink小程序中的API。 图9 WeLink API补全

背景信息 本示例中创建了3种业务用户的业务权限，主要是在华为云Astro轻应用预置的Portal User Profile权限基础上，进行自定义业务用户权限配置和拓展实现的。在华为云Astro轻应用的权限配置功能中，基于某个权限配置的新创建的Profile，将会继承原Profile的全部权限。 在后续有新的业务用户注册时，只需要将业务用户添加到对应的权限配置中，即可获取该权限配置中的权限。 权限配置创建的大致流程：

操作流程 将华为云Astro轻应用中的应用发布成WeLink轻应用的流程，如图2所示。 图2 开发WeLink轻应用流程 步骤一：准备账号并完成绑定 在华为云Astro轻应用的环境配置中，将华为云Astro轻应用和WeLink进行绑定。 步骤二：添加WeLink用户为华为云Astro轻应用开发者 如果需要WeLink用户在华为云Astro轻应用开发环境中具备开发者权限，请添加WeLink用户为华为云Astro轻应用开发者用户，并赋予开发者权限。 步骤三：创建华为云Astro轻应用调查问卷应用 在华为云Astro轻应用开发环境中创建“调查问卷应用”，设置应用在移动端显示效果，并为Welink用户设置业务访问权限。 步骤四：编译发布应用 将在华为云Astro轻应用上创建的应用发布到WeLink上。 步骤五：在WeLink移动端测试应用 应用发布后，可以在WeLink手机端搜索并验证已发布的轻应用，也可以在企业WeLink管理员界面直接扫码进入轻应用。 步骤6：（可选）将运行环境中应用发布到WeLink 如果您购买的是华为云Astro轻应用商用版实例，还支持将华为云Astro轻应用开发环境中的应用发布到运行环境，由运行环境发布到WeLink。

方案概述 在华为云Astro轻应用中，支持扫码绑定WeLink。绑定WeLink后，可将华为云Astro轻应用中开发的应用快速发布到WeLink中，实现企业业务的高效率、低成本创新。 发布WeLink轻应用是将已开发好的应用或全新开发的Web页面发布到WeLink，用户在WeLink APP中即可打开应用。发布WeLink轻应用适用于简单的应用场景。下面以创建“调查问卷轻应用”为例，介绍如何把华为云Astro轻应用上开发的应用发布成WeLink（蓝标）轻应用。 调查问卷模板为企业和个人提供调查问卷应用模板，用于收集资料或管理问题记录。该模板以对华为云Astro轻应用开发者展开调查问卷为例，可基于该应用模板快速自定义调查问卷内容。 图1 开发者调查问卷

应用场景 使用华为云Astro轻应用开发完应用后，系统会为应用预置一个默认的登录页，业务用户可通过默认的登录页登录应用。除了使用默认的登录页，您还可以根据自身业务的实际需求，使用华为云Astro轻应用为应用自定义一个登录页。通过在登录页中输入用户名、密码和手机号码等登录信息，与系统中存储的业务用户信息进行对比，来验证业务用户的身份，并根据设置的业务用户权限，为业务用户分配相应的资源和访问权限。 例如，自定义一个图1中的登录页，在登录页中输入业务用户名及密码，单击“登录”，即可登录应用。其中，“登录”逻辑是通过“自定义登录”组件，调用用户登录服务编排完成的。在自定义登录页前，请先了解下方的业务用户的登录方式和业务用户的登录机制。 图1 自定义登录页面

业务用户的登录机制 业务用户前台登录和后台登录，在登录过程中的服务逻辑实现过程如下： 通过调用“账号密码校验”脚本，查询登录账号密码，判断当前登录的账号密码是否正确。 如果判断账号密码错误，直接执行“账号密码错误”。账号密码正确，继续判断是否有验证码。 如果判断当前登录没有验证码，则直接执行登录。当前有验证码，则继续判断验证码是否正确。 如果判断验证码正确，则执行登录操作，验证码错误，则执行验证失败。

业务用户的登录方式 业务用户登录华为云Astro轻应用有两种登录方式：后台登录和前台登录。 业务用户在后台登录时，是使用自定义的服务编排来调用“login”脚本，查询登录账号密码，判断当前登录的账号密码是否正确，来实现业务用户后台登录功能。 业务用户在前台登录时，需要先在线下开发一个登录组件，上传到高级页面，并在高级页面中配置组件桥接器中的数据。最后在页面中输入登录账号密码，通过调用“用户登录服务编排”，实现业务用户页面登录功能。

拖拽组件并关联模型 单击“设计视图”，切换到页面设计视图。 图12 切换到设计视图组件列表 将左侧组件区的“表单”拖拽到右侧“页面内容”中，在“元数据表单配置向导”弹窗底部，单击“取消”，创建一个空的表单控件。 当前不单独定义数据源，因此需要单击“取消”数据绑定。 图13 拖拽表单到页面并取消数据绑定 组装参数区域。 从左侧组件列表中，拖一个“容器”到上一步创建的“表单”。 从左侧组件列表中，拖一个“分栏”到上一步创建的“容器”中。 “分栏”默认有2个“栏”，即当前栅格中包含1行1列的区域。 选中“分栏”，在右侧属性的“行布局”中，单击，将分栏设置为3栏。 图14 设置分栏为3栏 在右侧“属性”页签中，单击“新增行”后面的图标，新增一行，如图15所示。设置后，分栏组件被设置为2行（分栏）3列（栏）。 图15 设置表格内的行列数 从左侧组件区的拖一个“输入框”到分栏组件的第1行（分栏）第1栏，并在右侧“属性”页签中将“标签”修改为“设备编码”。 图16 设备编码 分别向第1行第2栏、第2行第1栏、第2行第3栏中拖一个“输入框”，并设置“标签”为“设备名称”、第2行第1栏“设备型号”、第2行第3栏“详细地址”。 从左侧组件列表中，拖一个“下拉框”到分栏组件的第1行第3栏，并在右侧“属性”页签中将“标签”修改为“设备品牌”。 从左侧组件列表中，拖一个“级联选择框”到分栏组件的第2行第2栏，并将“标签”修改为“省/市/区”。 组装页面标题。 在左侧组件区拖拽一个“标题”组件到上一步创建的“容器”前面，并在右侧“属性”页签中将“标题内容”修改为“设备详情”，并设置“样式”的“高级设置”为“:root{text-align:center;font-size:20px;}”。 组装按钮区域。 在左侧组件区拖拽一个“容器”到3中创建的“容器”后（注意要在表单里面，两个容器在同级），并在右侧“属性”页签中将“水平对齐方式”修改为“中”，即居中对齐。 图17 拖拽容器 图18 设置居中对齐 从左侧组件区拖拽一个“按钮”到刚创建的“容器”中，并在右侧“属性”页签中，将“显示名称”修改为“保存”，将“类型”修改为“主要按钮”。 拖拽一个按钮到“保存”按钮右边，并设置为“取消”按钮，类型设置为“默认按钮”。 单击界面上方的，保存页面，可以在属性面板底部查看组件树。 图19 组装完成后页面的组件树 为页面组件关联模型。 选中“设备名称”输入框。 在右侧“属性”页签中单击，为“设备名称”输入框绑定“equipmentForm”自定义模型中的“name”参数，如图20所示。 数据绑定后，当在前台界面输入内容时，系统就会把输入框中的内容，赋值给“name”。 图20 输入框数据绑定 重复上一步，为“设备编码”、“设备型号”、“详细地址”文本输入框绑定“equipmentForm”自定义模型中的对应参数。 选中“设备品牌”下拉选择框，在右侧“属性”页签中单击，为选择框绑定“equipmentForm”自定义模型中的“HW__equipmentBrand__CST”参数。 选中“设备品牌”下拉选择框，在右侧“基本属性”中，单击“选项列表”的，在弹窗中输入“equipmentBrand”，在联想记录中，选择设备对象字段“HW__equipmentBrand__CST”，为选择框添加下拉选项关联的字段，如图21所示。 图21 为下拉选择框定义可选项 图22 输入字段搜索 图23 关联字段 选中“省/市/区”级联框，在右侧“属性”页签中单击，为级联框绑定“equipmentForm”自定义模型中的“cascaderAddress”参数。 单击属性值绑定后的“+”，将“属性”设置为“选择数据”，“模型字段”绑定到“cascaderOptions”，如图24所示。 数据绑定后，级联选择框的选项来自“cascaderOptions”；同时，当在前台界面选择省/市/区时，系统就会把选择结果赋值给“equipmentForm.cascaderAddress”。 图24 级联框数据绑定 单击页面上方的，保存页面。

定义模型 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”中，将鼠标放在“Page”目录上，单击界面上出现的“+”，选择“标准页面”。 在“标签”和“名称”文本框中输入“editEquipment”，单击“添加”。 平台实际创建的页面名称为“HW__editEquipment”，包含前缀“HW__”，对应首次创建应用时定义的命名空间。新建创建的页面，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。 定义与“省/市/区”级联框的可选项相关联的自定义模型。 在页面底部单击“模型视图”，进入模型视图页面，单击“新增模型”。 添加自定义模型，模型名称“cascaderOptions”，单击“下一步”，如图4所示。 图4 定义级联框用到的自定义模型 设置保持不变，单击“下一步”。 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 定义与页面上各个输入框、选择框相关联的自定义模型。 在“模型视图”中，单击“新增模型”。 添加自定义模型，模型名称“equipmentForm”，单击“下一步”，如图5所示。 图5 定义页面组件需要关联的自定义模型 单击“新增节点”，逐一添加与页面元素对应的参数（name、HW__equipmentSN__CST、HW__equipmentBrand__CST、HW__equipmentModel__CST、cascaderAddress、HW__installationDetailAddress__CST），单击“下一步”，如图6所示。 为简化后续事件脚本，除cascaderAddress外，请确保其他5个参数的参数名与设备对象（HW__Equipment__CST）的字段名保持一致。注意这里的下划线是两个，要与表1里的字段保持一致，HW__需要修改为实际的命名空间前缀。 图6 添加模型包含的参数 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 定义与API（editEquipment:1.0.0）关联的服务模型。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“editEquipment”，来源选择“服务”，单击“下一步”，如图7所示。 图7 定义服务模型 指定模型与API“editEquipment”关联，单击“下一步”，如图8所示。 关联API后，系统会自动显示API中脚本的输入、输出参数。 图8 为模型关联Script 方法保持不变，单击“确定”。 系统自动添加了执行的方法，如图9所示。未来，将在事件脚本中执行这个方法，即执行模型关联的API中的脚本。 图9 为模型定义方法 单击页面上方的，保存设置。 定义与API（queryEquipmentDetail）关联的服务模型。 在“模型视图”中，单击“新增模型”。 添加服务模型，模型名称“queryEquipmentDetail”，“来源”选择“服务”，单击“下一步”。 指定模型与API“queryEquipmentDetail”，单击“下一步”。 图10 为模型关联Script 方法保持不变，单击“确定”。 单击页面上方的，保存设置。 图11 新增的页面模型

步骤四：在WeLink移动端测试应用 应用发布后，可以在WeLink移动端搜索并验证已发布的小程序应用。 在WeLink手机端，单击“业务”，搜索小程序“开发者”。 单击搜索结果列表中的应用名，进入调查问卷页面。 如果无法正常登录应用，且提示用户名已注册，请按照常见问题中操作处理。 图29 搜索小程序“开发者调查问卷” 输入问卷信息，单击“提交”，成功后跳转到“提交成功”页面。 图30 进入小程序页面 单击“查看详情”或“继续提交”，测试验证小程序的功能。 图31 提交成功 问卷调查完成后，切回到“开发者调查问卷”的应用开发页面，单击预览应用。在“调查问卷管理”页签中，可查看或删除相关数据。 图32 管理调查问卷记录

操作流程 将华为云Astro轻应用中的应用发布成WeLink We码应用的流程，如图1所示。 图1 We码应用发布流程 步骤一：创建We码应用 在WeLink端发布小程序之前，需要以WeLink管理员账号登录WeLink开发平台，创建一个We码应用。 步骤二：在华为云Astro轻应用上创建应用 We码应用创建完成后，需要在华为云Astro轻应用租户账号中，创建一个应用，导入一个免登录App包，再配置企业WeLink相关系统参数。 步骤三：编译并发布应用 将已创建的应用编译发布到WeLink上，并设置华为云Astro轻应用端及WeLink端的应用发布参数。 步骤四：在WeLink移动端测试应用 应用发布后，在WeLink移动端搜索并验证已发布的小程序应用。

创建“查询工单”公共接口 在“我的应用”中，单击“设备维修管理系统”，进入应用。 单击页面下方的“服务”，进入公共接口创建页面。 单击“新建”，创建“查询工单”脚本“HW__queryWorkOrder”的公共接口。 设置接口参数信息：操作名称为“queryWorkOrder”，版本为“1.0.0”，URL为“/queryWorkOrder”，“类型”选择“脚本”，“资源”为“HW__queryWorkOrder”，方法为“POST”，然后单击“保存”。 其中，“HW__”前缀由租户命名空间namespace决定，请根据实际情况进行选择。 图2 新建queryWorkOrder接口

创建“查询工单”脚本 在“我的应用”中，单击“设备维修管理系统”，进入应用。 在“WorkOrder”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“queryWorkOrder”，单击“添加”。 系统实际创建的脚本名称为“HW__queryWorkOrder”，“HW__”前缀由租户命名空间namespace决定。新建创建的脚本，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击进行锁定。 在代码编辑器中插入如下脚本代码。 脚本代码中，“HW”为命名空间的名称，请根据实际需求进行替换。 import * as context from 'context'; import * as db from 'db'; import * as decimal from 'decimal';//导入decimal数据类型相关的标准库 @useObject(['HW__WorkOrder__CST']) @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'String' }) title: string; @action.param({ type: 'String' }) status: string; @action.param({ type: 'String' }) createdBy: string; @action.param({ type: 'Boolean' }) isFME: boolean; @action.param({ type: 'Number', min: 0 }) start: decimal.Decimal;//分页信息，表示从第几条数据开始查询 @action.param({ type: 'Number', min: 0 }) limit: decimal.Decimal;//分页信息，表示一次查询几条数据 } @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'Any', label: 'object', isCollection: true }) workOrderList: object[]; @action.param({ type: 'String' }) total: string;//总共查到几条数据 } @action.object({ type: "method" }) export class QueryWorkOrder { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public queryWorkOrder(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let s = db.object('HW__WorkOrder__CST'); //获取HW__WorkOrder__CST这个Object的操作实例 //condition是db标准库queryByCondition方法的入参（查询条件） let condition = { "conjunction": "AND", "conditions": [] }; //基本查询条件 condition.conditions.push({ "field": "id", "operator": "isnotnull", }); condition.conditions.push({ "field": "id", "operator": "ne", "value": "" }); //按title查询 if (input.title && input.title != "") { condition.conditions.push({ "field": "HW__title__CST",//与对象中的字段名保持一致 "operator": "contains", "value": input.title }); } //按status查询 if (input.status && input.status != "") { condition.conditions.push({ "field": "HW__status__CST",//与对象中的字段名保持一致 "operator": "eq", "value": input.status }); } //按title查询 if (input.createdBy && input.createdBy != "") { condition.conditions.push({ "field": "createdBy",//与对象中的字段名保持一致 "operator": "eq", "value": input.createdBy }); } if (input.isFME) { condition.conditions.push({ "field": "HW__assignedFme__CST", "operator": "eq", "value": context.getUserName() }); } let option = { "options": { "orderby": [{ "field": "createdDate", "order": "desc" }] } }; //如果有分页 if (input.start && input.limit) { let start = decimal.toNumber(input.start);//将decimal类型转换为接口需要的number类型 let limit = decimal.toNumber(input.limit); option.options['limit'] = limit; option.options['skip'] = start; } let workOrderList = s.queryByCondition(condition, option); for (let i in workOrderList) { if (workOrderList[i].HW__status__CST == "关闭") { workOrderList[i].isDeal = true; } } out.workOrderList = workOrderList; //调用查询符合condition条件的数据总数的接口 out.total = s.count(condition) + ""; } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; } } 单击编辑器上方的，保存图标。 测试脚本能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部，查询脚本可以不提供输入参数，直接单击测试窗口右上角执行图标。 执行成功，会在“输出”页签返回查询结果。 图1 输出结果示例 测试成功，单击编辑器上方的，启用发布脚本。

验证并发布 测试新增逻辑能否正常执行。 单击编辑器上方的，执行脚本。 如图1所示，在界面底部输入测试数据，单击测试窗口右上角执行图标。 图1 测试脚本 测试报文采用json格式，样例如下（报文中加粗斜体内容请替换为实际的字段名）： { "equipment": { "name": "百草园A栋1单元1号", "HW__equipmentSN__CST": "3217890001" } } 执行成功，会在“输出”页签返回equipmentId。请保存这个返回结果，后续的测试中会用到。 { "equipmentId": "cQue000000e1qnhgtCng" } 如果执行失败，请检查之前设备对象、脚本，以及测试报文三者中的对象名、字段名是否一致。 到设备对象布局页面（Equipment Records），预览页面，检查数据是否插入成功。 在“Equipment”目录的“Object”下，单击设备对象“HW__Equipment__CST”，在“布局”页签下，单击“Equipment Records”后的预览图标。 图2 对象布局页面 在页面中，检查设备列表中是否包含刚插入的测试数据。 如果已新增数据，为了后续测试方便，建议多创建几条数据。 测试修改逻辑能否正常执行。 单击编辑器上方的，执行脚本。 在界面底部输入测试数据，单击测试窗口右上角执行图标。 如下样例报文中的加粗id值，请修改为图1的返回结果，加粗斜体字段名请替换为实际的字段名。以下报文是修改name字段。 { "equipment": { "id": "cQuXXXXXXXXng", "name": "百草园B栋2单元2号", "HW__equipmentSN__CST": "3217890001" } } 刷新设备对象布局页面（Equipment Records）的预览页面，查看测试数据是否符合预期。 测试成功，单击编辑器上方的，启用脚本。

操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在“Equipment”目录中，将鼠标放在“Script”上，单击界面上出现的“+”，在弹出菜单中选择“脚本”。 在弹窗中，选中“创建一个新脚本”，在“名称”文本框中输入“editEquipment”，单击“添加”。 系统实际创建的脚本名称为“HW__editEquipment”，“HW__”前缀由租户命名空间namespace决定。新建创建的脚本，默认是当前用户锁定状态，可以进行编辑保存等操作。 当编辑已有脚本时，为防止编辑时多人篡改，编辑前请单击，进行锁定。 在代码编辑器中，插入如下脚本代码。 脚本代码中，“HW__”前缀由租户命名空间namespace决定，请根据实际情况进行替换。 //本脚本用于新增或者修改设备信息 import * as db from 'db';//导入处理object相关的标准库 import * as context from 'context';//导入上下文相关的标准库 //定义入参结构，入参包含1个参数：equipment对象，为必填字段 @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'Any', required: true, label: 'equipment' }) equipment: object; } //定义出参结构，出参包含1个参数，记录equipment的id @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'String' }) equipmentId: string; } //使用数据对象HW__Equipment__CST @useObject(['HW__Equipment__CST']) @action.object({ type: "method" }) export class EditEquipment { //定义接口类，接口的入参为ActionInput，出参为ActionOutput @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public editEquipment(input: ActionInput): ActionOutput { let out = new ActionOutput(); //新建出参ActionOutput类型的实例，作为返回值 let error = new Error(); //新建错误类型的实例，用于在发生错误时保存错误信息 try { let equipment = input.equipment; //将入参赋值给equipment变量，方便后面使用 let s = db.object('HW__Equipment__CST'); //获取HW__Equipment__CST这个Object的操作实例 delete equipment['cascaderAddress']; //删除入参中不需要插入HW__Equipment__CST对象的多余属性 //新增设备 if (!equipment['id']) { //必填校验 if (!equipment['HW__equipmentSN__CST']) { error.name = "EQM"; error.message = "Field 'HW__equipmentSN__CST' is required."; throw error; } let equipmentId = s.insert(equipment); //向HW__Equipment__CST插入一条数据，返回数据的唯一标识即设备ID if (equipmentId && equipmentId != "") { out.equipmentId = equipmentId; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Added."; throw error; } } //编辑修改设备 else { let id = equipment['id']; delete equipment['id']; let count = s.update(id, equipment); //根据设备ID，编辑更新HW__Equipment__CST的一条数据 if (count && count == 1) { out.equipmentId = id; } else { error.name = "EQM"; error.message = "Equipment Cannot Be Updated."; throw error; } } } catch (error) { console.error(error.name, error.message); context.setError(error.name, error.message); } return out; } } 单击编辑器上方的，保存脚本。

了解服务编排 在传统的开发中程序员一般是基于代码进行开发，程序员需要学习内容较多，开发效率相对低一些，开发门槛也高。华为云Astro轻应用的服务编排功能，类似于编程中一段有流程、条件处理、判断逻辑的程序。这段程序有输入参数和输出参数、可以独立成为一个对外调用的方法。同时，在程序内部，也可以调用其他的方法。 华为云Astro轻应用中的服务编排是将原来基于代码编程改变为用图形化，拖拉拽的方式去编程。如图1所示，服务编排界面是图形化、模板化的，您甚至不需要任何编程经验，将左侧面板区的组件拖拽到右侧画布、做必要的配置，就可以完成服务编排的开发。 图1 服务编排界面 服务编排界面中，可以编排如下组件： 基本组件：在服务编排引用脚本或者另一个服务编排，增/改/删/查记录，以及发送邮件、发送事件等。 逻辑组件：在服务编排中实现变量赋值Assignment、循环Loop、跳出循环Break、决策Decision和等待Wait。 商业对象：将封装好的BO能力作为服务编排中的一个节点。 连接器：将短信发送、支付等第3方连接器作为当前服务编排中的一个节点。 除了图形化编排，华为云Astro轻应用也支持服务编排的在线测试验证，以及问题跟踪调试，方便您及时发现并解决问题。 服务编排测试通过、发布后，既可以直接被前端页面调用，也可以作为restful接口被第三方系统调用，也可以包装成公共接口后被调用。本节中主要是将服务编排包装成一个公共接口后，供页面调用，“管理设备”功能中涉及的业务逻辑，以及服务编排与脚本关系如表1下所示，详细操作方式及说明请参见创建业务逻辑。

开发前必读 设备管理功能主要是通过操作两个标准页面（编辑设备、设备管理），来实现电梯设备信息的新增、修改、删除、查询及监控等功能的。 设备管理界面的大致构想，如图1所示。界面上默认显示应用中保存的所有电梯设备信息，可以直接新增、修改或者删除电梯记录，也可以查询部分电梯记录。 单击“新增设备”按钮，可以在界面上插入一个空行，输入内容后单击“保存”，即可新插入一条电梯记录。 直接编辑表格中任意内容，单击“保存”，即可修改任意一条电梯记录。 选中记录，单击“删除”，即可删除任意一条电梯记录。 设置查询条件，单击“查询”，可以查询满足条件的电梯记录。 图1 电梯设备信息管理界面 通过开发设备管理功能，带您学习如何在华为云Astro轻应用中，开发脚本、服务编排、标准界面和高级界面，并在开发过程中，细致解析设备管理的增加、删除和修改，以及设备位置信息监控功能开发过程及原理。 父主题： 设备管理开发

本节导读 应用开发完成后，需要根据业务流程，通过使用不同角色账号登录，进行应用业务测试。 业务测试主要分为管理业务用户、管理设备信息和处理工单三部分。其中，前两部分是管理员权限进行的操作（这里管理员账号，均使用应用开发者账号进行）。处理工单部分，需要根据工单流程顺序，切换客服人员、派单人员、维修人员以及管理员号进行测试。 管理员用户：当前登录华为云Astro轻应用开发应用使用的账号，用于新增业务用户、添加用户权限、添加设备信息、管理工单，监控设备。 业务用户：使用“设备维修管理系统”应用的用户，分别是客服人员、派单员及维修人员。 表1 业务测试详情 角色 测试页面 涉及功能 管理员用户 新增用户页面、平台管理用户页面、设备管理页面和工单管理页面 新增业务用户，配置权限集、添加设备信息、管理工单 业务用户 客服人员 App登录页面，工单列表（客服人员）页面 创建工单 派单员 App登录页面，工单列表（派单员）页面 派单、查看工单状态 维修人员 App登录页面，工单列表（维修人员）页面 接单、拒单、关单 父主题： 应用业务测试