华为云用户手册

方式一：使用组件导航，选中目的组件 当页面中组件过多，不易选择某个组件时，可以先选择该组件附近的某个子组件，当选中子组件后，“组件导航”上将显示它的html标签层级。直接单击标签层级，即可快速切换组件。 如图1所示，当不易选择栅格容器时，可以先任意选择栅格容器中的某个子组件，当选中子组件后，“组件导航”上可以显示子组件“多行输入框”之前的组件层级，在“组件导航”上，直接单击“栅格容器”，即可快速选中该栅格容器。 图1 选择目标组件

扩展知识（经典版） 标准页面预置了二维码组件，用于生成二维码。使用该组件可将游客访问的打卡页面地址做成二维码，后续可将此二维码直接分享给其他游客（匿名用户）扫码体检。 制作二维码方法如下： 使用 开发者账号登录 华为云Astro轻应用开发环境，进入一个应用，例如1创建的“mypage”应用。 鼠标放在“Page”下，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。 设置页面标签和名称，例如“testcode”，单击“添加”。 参考图48，向标准页面中拖入一个二维码组件，在右侧属性面板中设置“内容或链接”为7.b改造后的地址。 https://appcuberun.cn-north-4.huaweicloud.com/magno/render/命名空间__mypage_0000000000XXXXXXX/view-mobile/mypage 图48 配置二维码组件 表2 二维码组件属性说明 属性 说明 内容或链接 设置扫描二维码后，要展示的文本内容或者跳转的链接地址。 宽度 二维码的宽度，单位像素。 默认值：150 容错级别 二维码被遮挡或残破时依然能被识别的几率，容错级别越高抗残破或遮挡的能力就越强。 空白间距 四周空白间距，单位像素。 前景色 二维码的颜色。 背景色 背景颜色。 中间Logo 二维码中间Logo图片，可不用设置。 设置Logo后，如果扫描二维码识别失败，可以调高容错级别或调大二维码 Logo大小 Logo大小，单位像素。 单击页面上方保存页面，单击预览页面。 图49 生成二维码 将上一步生成的二维码分享给游客，游客通过微信或者支付宝扫描二维码，可扫码体验，进行健康打卡。

操作步骤（经典版） 创建BO，将需要调用的资源封装为BO中的公共接口。 参考创建BO中操作，创建一个标签和名称为“BOTest”的BO。 在BO中，新建需要调用的资源“命名空间__FlowC”，并启用。 新建“命名空间__FlowC”后，该资源可见性默认为“公开”，表示在其他应用中可调用该资源。 图4 设置资源为公开 参考图5和图6，在BO中新建公共接口，该接口用于封装“命名空间_FlowC”。 在BO开发页面中，单击左下角的“服务”新建API时，需要指定版本号，且接口区分“公共接口”和“私有接口”。 “公共接口”是提供REST接口给第三方系统或者内部系统调用。“私有接口”是提供SDK接口给内部系统调用。本示例选择“公共接口”。 图5 新建公共接口 图6 封装“命名空间__FlowC” 进入需要调用资源的应用，引入BO，在应用的服务编排中使用BO图元调用接口，从而调用资源。 进入需要调用资源的应用开发工作台，单击“Internal dependencies”或“External dependencies”旁的“+”，选择“BO服务”，添加“BOTest”。 添加后，在该应用的服务编排中，才可以调用BO服务。 “Internal dependencies”为内部依赖文件夹，导入的BO服务或Native服务，在打包上层应用时也会随应用打包发布出去。 “External dependencies”为外部依赖文件夹，导入的BO服务或Native服务，在打包上层应用时不会打包出去。 图7 应用中添加BO服务 图8 选择BO 参考图9，在服务编排“命名空间__FlowA”中使用BO图元，调用该公共接口，注意API类型选择“REST”。 在服务编排“命名空间__FlowA”编辑器页面左侧，选择“BO”，从“Others”下拖拽2.a中定义的“BOTest”至画布。在画布中，选中BO图元，单击，在“BO”页面进行配置，使用BO图元调用接口。 图9 调用BO

华为云Astro轻应用脚本是否支持multipart/form-data请求？ 脚本标准库提供了“multipart”，支持multipart/form-data请求， 具体示例代码如下： import * as http from 'http'; import * as mp from 'multipart'; import * as buffer from 'buffer'; let w = mp.newWriter(); let bytes = buffer.from("hello, Astro Zero"); w.setBoundary("--ABC"); let mimeHeader = { "Content-Disposition": ['form-data; name="upload_file"; filename="a.txt"'], "Content-Type": ['application/octet-stream'] } w.writeBuffer(mimeHeader, bytes); w.writeField("name", "Trump"); w.close(); let client = http.newClient(); let req : http.Request = { data: w.buffer().bytes(), headers: { "Content-Type": w.formDataContentType(), } } let resp = client.post('ip', req); console.log("response = ", resp); 父主题： 应用后端开发

解决方法 在用户或业务用户详情页面中，查看用户所拥有的权限。 如果是System Administrator Profile，默认是30分钟，无法修改。 如果是其他权限，请执行2。 通过所分配Profile权限的“访问凭证时长”来控制session有效期。访问凭证与刷新凭证必须同时为默认或者自定义。 用户（即平台用户，华为云Astro轻应用的开发者账号，用来管理应用和业务用户） 一般情况下，只有具备“System Administrator Profile”权限的管理员用户，才可修改平台用户权限的“访问凭证时长”。平台用户只能查看，不能修改自己权限的“访问凭证时长”参数值。 图1 Profile权限编辑页面 业务用户：根据业务用户详情页“权限集”下，第一个Profile权限的“访问凭证时长”，来控制session有效期。如果未配置Profile权限，则使用“Portal User Profile”权限的“访问凭证时长”。 图2 业务用户详情页

方式一：通过编辑事件实现 在标准页面的事件编排中，在具体的动作上“自定义JS代码”中编写相关代码，以实现页面组件与后台接口（服务编排或脚本）之间的交互。 下面以通过编辑事件，定义JS代码，来实现页面组件与后台接口（服务编排或脚本）之间的交互为例，进行介绍。 在应用设计页面，选中某个组件，在右侧区域选择“事件”，单击具体事件后面的“+”，即可进入添加动作页面。 从左侧“动作”区，设置“内置动作”或“自定义动作”，自定义动作需自定义JS代码逻辑，可单击代码区域右侧的，最大化自定义JS代码页面。 图1 页面自定义JS代码 在左侧模板代码中，单击服务编排或脚本左侧的，复制代码到右侧代码编辑区域，即可出现系统预置的经典接口。 图2 预置接口代码

操作步骤 参考开发一个简单脚本实例中操作，创建一个名称为“cube__download”的空白脚本。 在脚本编辑器中，输入如下脚本代码。 import * as excel from 'excel'; import * as context from 'context'; import * as buffer from 'buffer'; export class Downlaod { @action.method({ input: "Input", output: "Output", description: "do a operation" }) run(): void { // 原始数据，可以从数据表中获取，此处为了演示方便，使用静态数据 let binary = excel.encode(['a', 'b', 'c'], [{ 'a': 1, 'b': 2, 'c': 3 }, { 'a': 4, 'b': 5, 'c': 6 }, { 'a': 7, 'b': 2, 'c': 3 }]); // 对于 Excel2007 以上版本的 .xlsx 文件，需要设置内容类型为 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet context.getHttp().response.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64'); // 直接把二进制作为请求体返回 context.getHttp().response.setBody(buffer.fromBytes(binary).toString(buffer.Encoding.Base64)); } } 此时，后端返回了一个base64编码的二进制数据，并非JSON格式，所以直接运行脚本不会有输出，需要在前端页面匹配处理这种数据才行。 在标准页面上，调用“cube__download”脚本。 为了简化配置，此处没有把脚本封装为公共接口，实际使用时业务应该使用公共接口进行封装，以便实现更细粒度的权限控制。 以jQuery的ajax方法为例，代码示例如下： var url = "/u-route/baas/script/v1.0/run/cube__download"; context.$utils.get CS RFToken().then(function(token) { $.ajax({ type: "POST", headers: { 'Content-Type': "application/json", 'responseType':"arraybuffer", 'csrf-token': token, }, url: url, data: JSON.stringify({}), dataType: 'text', async: false, success: function(resp){ var fileName = "test" + '.xlsx'; var file = new Blob([s2ab(atob(resp))], {type: ''}); if (window.navigator.msSaveOrOpenBlob) { //IE浏览器下载 window.navigator.msSaveOrOpenBlob(file, fileName); } else { var fileUrl = URL.createObjectURL(file); var a = document.createElement('a'); a.href = fileUrl; a.target = '_blank'; a.download = fileName; document.body.appendChild(a); a.click(); } }, error: function(resp){ } }); }); “s2ab()”是数据处理的关键，这个方法名字是“string to array buffer”的缩写，意思是把字符串转换为ArrayBuffer类型，以便让前端可以处理二进制数据。其函数定义如下： function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) { view[i] = s.charCodeAt(i) & 0xFF; } return buf; } 上述代码中，需要注意如下事项： Header里面需要增加'responseType':"arraybuffer"； Header里的类型为dataType: 'text'； Header里增加csrf-token。

解决方法（经典版） 新版本华为云Astro轻应用的服务编排、BPM流程编排只允许调用当前应用下的资源（例如脚本、服务编排、对象），不允许跨应用调用资源。 若老版本中创建的服务编排、BPM流程编排调用了不同应用下的资源，不会影响运行态效果，在开发环境的服务编排、BPM流程编排中无法编辑其调用的资源。 问题描述示例中，如果需要编辑“命名空间__FlowB”出参入参，处理思路为：如果多个应用需要调用某个共同的资源，建议在BO中新建公共资源，在应用里内部依赖或者外部依赖导入BO，再调用该资源。 创建BO，将需要调用的资源封装为BO中的公共接口。 参考创建BO中操作，创建一个标签和名称为“BOTest”的BO。 在BO中，新建需要调用的资源“命名空间__FlowC”，该资源与需要调用的资源“命名空间__FlowB”定义相同。 新建后，单击编辑器上方的，启用BO。 新建“命名空间__FlowC”后，该资源可见性默认为“公开”，表示在其他应用中可调用该资源。 参考图5和图6，在BO中新建公共接口，该接口用于封装“命名空间__FlowC”。 在BO开发页面中，单击左下角的“服务”新建API时，需要指定版本号，且接口区分“公共接口”和“私有接口”。 “公共接口”是提供REST接口给第三方系统或内部系统调用的，“私有接口”是提供SDK接口给内部系统调用的。本示例选择“公共接口”。 图5 新建公共接口 图6 封装“命名空间__FlowC” 进入服务编排所属的应用，引入BO，在服务编排中使用BO图元调用接口，从而调用资源。 进入服务编排“命名空间__FlowA”所在的应用开发工作台，单击“Internal dependencies”或“External dependencies”旁的“+”，选择“BO服务”，添加“BOTest”。 添加后，在该应用的服务编排中，才可以调用BO服务。 “Internal dependencies”为内部依赖文件夹，导入的BO服务或Native服务，在打包上层应用时也会随应用打包发布出去。 “External dependencies”为外部依赖文件夹，导入的BO服务或Native服务，在打包上层应用时不会打包出去。 图7 应用中添加BO服务 图8 选择BO 参考图9，服务编排“命名空间__FlowA”改用BO图元，调用该公共接口，注意API类型选择“REST”。 在服务编排“命名空间__FlowA”编辑器页面左侧，选择“BO”，从“Others”下拖拽1.a中定义的“BOTest”至画布。在画布中，选中BO图元，单击，在“BO”页面进行配置，使用BO图元调用接口。关于BO的详情介绍，请参见什么是BO。 图9 调用BO

解决方法 如果表格字段太多，无法正常显示，可以在页面的“样式代码”中，添加样式代码。请参考图2，输入以下样式代码。 .ivu-table-row td{ width:100px; } 如果当前“样式代码”为空，直接将此样式粘贴到“样式代码”中，保存页面即可。 如果在“样式代码”中，有较多样式，需要先找到表格所在的class名，然后在此class中增加以上表格样式代码，并根据实际情况修改列宽度，增加样式后，预览时即可看到拖动条。 图2 在样式代码中，增加表格列宽样式

如何开通华为云Astro轻应用专享版实例？ 专享版实例提供了物理隔离的运行环境，运行环境实例发放到租户虚拟私有云中。华为云Astro轻应用专享版实例需要先提交工单申请开通后，才可以在界面购买。购买专享版实例时，建议同步开通 云日志服务LTS 并预留逃生通道，确保低代码业务环境可持续稳定的运行。 监控远程调用 华为云Astro轻应用会记录您通过自定义连接器、服务脚本等方式访问远程接口的调用日志（含通过VPN方式访问内网）。开通华为云Astro轻应用专享版实例时，建议同步开通 云日志 服务LTS并授权华为运维人员把上述日志自动上传到LTS，进行访问性能、频率等方面的统计和告警，以便可以及时发现和定位问题。 预留逃生通道 如果需要在华为云Astro轻应用专享版中使用VPN打通线上线下网络，建议您采用双链路模式进行主备容灾，避免单条链路发送网络故障导致业务不可用。对于依赖远程服务的重要功能，例如登录认证依赖通过VPN通道访问内网接口，建议增加对接口调用的容错处理，及时检测发现和向用户反馈网络故障等错误，并同时增加不依赖远程服务但可能能力降级的云上实现作为逃生手段。 父主题： 产品咨询类

使用说明 连接器图元中有一种特殊的图元，用于对接开天 集成工作台 ，调用开天集成工作台上已有的API。在服务编排中，如何使用连接器图元的更多介绍，请参见连接器图元。 开天集成工作台是面向应用开发者和API开发者，提供基于元数据的可扩展的集成框架，打造开放、共生、智能、协同的技术标准体系，从而降低应用间的集成工作量，并沉淀多种集成资产，如连接器、领域信息模型资产等的平台。更多相关介绍，请参考开天集成工作台产品文档。 该能力为白名单特性，需要联系后台管理人员开通后方可使用。

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

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

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

子流程 子流程任务是一个特殊的自动化容器任务，其内在包含了对子流程（Sub Process）的创建、启动和调度管理。 当流程到达子流程任务时，按照配置策略自动启动子流程实例，父流程的该分支中断，在这里等待子流程实例全部结束后继续执行后续路线。 子流程模型可以再包含调用子流程，成为每层嵌套的多级流程。 图23 子流程实例 调用活动和子流程图元都是工作流的内嵌子流程，区别在于： 调用活动把子流程当做一个黑盒（不需要关注子流程是怎么实现的），通过参数传递进行调用。 内嵌子流程则直接在当前流程中规划出一个子流程，子流程可共享父流程的变量。可用于流程步骤的划分、封装和复用。 内嵌子流程中使用“终止”事件，只终止当前内嵌子流程。

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

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

操作场景 系统预置了一些典型场景的标准页面模板，如果业务场景贴合已有模板，建议选择“基于模板”来快速创建标准页面。页面模板包括预置模板（通用模板）和自定义模板两大类。 预置模板（通用模板） 基础表单：基本的表单页面。 多区域表单：有间隔区域的多区域表单页面。 基础表格：单张表生成表格模板，包含增、删、改、查。 基础详情页面：基础的详情页面。 自定义模板（我的模板） 用户自定义的页面模板，开发好页面后，单击上方的另存为，即可创建自定义页面模板。创建后，该开发者用户、注册华为云Astro轻应用的账号、账号下其他华为云Astro轻应用用户都可直接使用该页面模板来创建标准页面。

使用预置模板创建标准页面 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 单击“页面”后的“+”，在添加标准页面中选中“基于模板”。 设置页面的标签和名称，单击“下一步”。 图1 设置标准页面基本信息 表1 标准页面参数说明 参数 说明 标签 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~64个字符。 名称 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 在选择模板页面，选中所需的模板，单击“添加”。 图2 选择所需模板 单击页面上方的，保存标准页面。 保存成功后，单击，预览标准页面。 您可以基于模板，进行二次开发。

使用自定义模板创建标准页面 参考登录华为云Astro轻应用应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 单击“页面”后的“+”，在添加标准页面中选中“基于模板”。 设置页面的标签和名称，单击“下一步”。 表2 标准页面参数说明 参数 说明 标签 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1~64个字符。 名称 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 在“我的模板”中，选中自定义模板，单击“添加”。 图3 选中自定义模板 单击页面上方的，保存标准页面。 保存成功后，单击，预览标准页面。 您也可以基于模板，进行二次开发。

行布局 系统支持设置PC端或者手机端布局，并默认提供了一些常见的行布局，如单栏、二等分栏等。单击在“行布局”中的某一个模式，例如单击，当前分栏将被分割成3栏，如图5所示。 图5 默认行布局 您也可以通过单击，手工输入的方式自行设置列的分隔比例，比例相加份数总和必须为24，例如12:12、6:18、3:21、8:8:8等。自定义比例以英文冒号分隔。 分栏组件会根据分辨率大小自适应，当画布宽度小于992像素，PC会展示为单列模式，此时可以通过调整左侧菜单收缩或者画布分辨率来查看不同的效果。 图6 自定义行布局 布局模式：设置每一个分栏的布局模式。 流式布局：页面元素的宽度，按照屏幕分辨率进行适配调整，但整体布局不变。 弹性布局：可以简便、完整、响应式的实现各种页面布局，选择“弹性布局”时还可以设置垂直对齐方式、水平排列方式以及分栏间隔。

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面CSS属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写CSS代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持“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 定义模型 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 自定义视频地址：输入自定义视频的地址。 封面：选择或上传图片作为视频封面。 控制条：视频播放时是否显示控制条。 静音：播放视频时，视频是否静音。 自动播放：是否自动播放视频，自动播放属性必须配合是否静音一起设置。例如，开启“自动播放”时，必须要同时开启“静音”。 倍速播放：是否支持倍速播放。打开该开关后，打开页面播放视频时，可设置0.5、1、1.5、2倍速播放视频。 循环播放：视频播放结束后，是否循环播放。

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似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轻应用提供统一的系统参数配置页面，便于集中维护与管理。当参数发生变化时，仅需要修改一次系统参数取值，引用该系统参数的地方都会更新成为修改后的值。 例如，华为云Astro轻应用预置的内置系统参数“bingo.expiretask.execute.time”，为系统执行数据清理任务的时间。当系统执行清理任务时，会自动查询该参数值，查询到后，会按照配置的时间来启动数据清理任务。开发者用户也可根据需求创建自定义的系统参数，创建后，可以在脚本、服务编排、工作流和数据接入中使用系统参数。如何使用系统参数，请参考使用系统参数。

图形化建模 图形化建模面向所有低代码应用开发者，提供简单易懂的数据库对象建模工具并复用知识经验，降低开发者的学习难度和技能门槛。 图5 初识对象设计器 映射工程目录 创建华为云Astro轻应用自定义对象中介绍了对象及对象目录的创建，其中每个对象目录都可以映射为一个设计图，单击目录即可切换设计图。设计图用于展示目录中，对象之间的关系。 应用设计器数据视图的对象目录，本身就映射到一个设计图，设计图的名称即目录名称。 对象中每创建一个目录，就映射为一个独立的设计图。 目录中再创建目录，也映射为独立的设计图。 设计图上方，通过面包屑显示映射的目录路径，通过面包屑可切换设计图。 图6 对象目录路径 选中左侧工程目录中的对象和目录，设计图面包屑及对象图元会同步被选中。 对象和关系 设计图中，显示了当前目录下的所有对象图元。 对象图元上显示对象名称、字段名称和字段类型。 单击对象模型中的，可展开对象模型，查看对象的标准字段（Standard Fields）。标准字段由系统自动创建，无需用户创建。单击对象模型中的，可收起对象模型。 图7 对象图元 对象和对象之间的关系显示为关系连线。关系连线上显示关系名称，具体可参考关联对象。 属性面板 选中对象图元时，设计图右侧会显示该对象的属性面板。 图8 对象属性面板 属性面板的主要用途如下： 显示对象基本信息，如名称、唯一标识和描述。单击“更多信息”，会展示创建人、创建时间等信息。 设置该对象是否对外公开，是否可被其他应用访问。 修改属性后，单击“保存”，可保存修改的内容。 单击“删除对象”，可删除该对象。 自动排版 在设计器上方，单击“自动排列”，可自动排版设计图上的对象位置，以获取较好的视觉呈现。 图9 自动排版

基本属性 链接地址：输入单击图片时，跳转的目标地址。 图片地址：选择或上传图片，支持上传JPG、JPEG、PNG和GIF格式的图片，图片不超过1MB。 图片库有如下几种类型： OBS/MINIO/OBJE CTS TORAGEPROXY：通过连接器获取OBS或MINIO桶中的图片，需要提前配置OBS/MINIO/OBJECTSTORAGEPROXY类型连接器，选择具体的存储桶、连接器实现获取图片功能。 连接器：OBS/MINIO/OBJECTSTORAGEPROXY类型的连接器。 桶：OBS/MINIO类型连接器的存储桶。 SFTP：选择SFTP后，图片将加密上传至nginx服务器的本地文件系统中。 OBS/MINIO/OBJECTSTORAGEPROXY图片库，支持按目录管理图片： 单击目录后的和，新增根图片目录和子图片目录。 单击“上传图片”，可上传图片。 选中图片时，单击，可以在图片库中删除此图片。 预览：预览时，是否支持单击放大图片。

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

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