华为云用户手册

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

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

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

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

抛出信号 当工作流执行到达“抛出信号”事件时，引擎向系统内部发出一个事件，事件发出后流程沿后续路线继续执行。抛出的信号，可以被“捕获信号”订阅处理。 使用该图元时，需要配置抛出的具体事件，并需要在“输入参数”配置事件参数。 图3 抛出信号的“事件配置”页面 事件：请选择待发送的事件。 分区字段：从事件中选择一个自定义参数用作分区字段，根据该字段值进行路由，相同的值将路由到同一个分区。如果不指定，则默认随机路由到不同分区，从而提升并发处理性能。 目标/源：配置事件的数据，即为事件自定义参数赋值，将“源”取值赋值到“目标”中。

接口启动 通过调用BPM的Rest接口“http://AstroZero对外提供的默认 域名 /u-route/baas/bp/v2.0”，进行启动。 接口URI：POST AstroZero域名/u-route/baas/bp/v2.0/runtime/instances 表1 请求参数 参数 是否必选 参数类型 描述 name 是 String BPM的名称，在界面处创建BPM时配置的名称。 version 否 String BPM版本号，为可选参数，因为一个BPM可以存在多个版本。如不带版本号，表示运行当前启用的版本。 variables 否 Object BPM元数据中定义的变量，包括自定义变量和系统变量， key-value形式，key为变量名字，value为变量的值。如果需要在启动BPM前设置BPM的变量，可以填写该参数。如需启动时设置变量，可以在variables中设置系统变量$Flow.BusinessKey；如需设置工作流的title，可以设置系统变量$Flow.Title。 表2 响应参数 参数 参数类型 描述 resCode String 返回码，如果返回“0”代表请求成功。 resMsg String 返回消息，如果成功状态，通常会返回“Success”，其他情况会返回具体的错误信息。 result Object 在成功请求时会有内容，返回启动BPM之后，BPM实例的运行信息。 例如，创建并启动了一个BPM，BPM名称为“createCloudOK_NEW”，版本号为“1.0.1”，带有4个启动参数。 请求示例 POST AstroZero域名/u-route/baas/bp/v2.0/runtime/instances { "name":"createCloudOK_NEW", "version":"1.0.1", "variables":{ "name":"sun", "memorySize":"15", "storageSize":"15", "expiryDate":"2018-12-12" } } 响应示例 { "resCode":"0", "resMsg":"Success", "result":{ "name":"bpName1", "version":"1.0.1", "id":"002N000000Sy2NphoRbU", "processDefID":"001L000000S8Yi3xG9Gi", "interviewLabel":"BP Label 1", "nextElem":"subProcess", "isTest":true, "state":"Dispatched", "bpStatus":"New", "urgency":0, "taskOutcome":"", "businessKey":"002N000000Sy2NphoRbU", "startTime":"2019-08-27 10:53:04", "endTime":"", "Ext1":"", "Ext2":"", "Ext3":"", "Ext4":"", "Ext5":"", "Ext6":"", "Ext7":0, "Ext8":0, "suspended":false, "isClosed":false } }

脚本启动 在脚本代码中，导入BPM的脚本库，通过下面脚本代码方式启动。 import * as bp from "bp"; //......（其他代码） const client = bp.newInstanceClient(); client.start(BPM名称, BPM版本号, BPM中定义的变量); 脚本样例如下： import * as bp from 'bp'; let client = bp.newInstanceClient(); let res = client.start("test", "1.0.1", { "foo": 1, "bar": 3}); 输出样例如下： { "interviewId": "002N000000FdtN6xwgjI", "screen": { "allowBack": false, "allowFinish": true, "allowNext": true, "allowPause": false, "helpText": "", "label": "input phone number", "name": "inputphonenumber", "pausedText": "", "screenFields": [ { "dataType": "text", "defaultValue": "135xxxxxxxx", "fieldType": "InputField", "helpText": "", "isRequired": false, "label": "phone number", "name": "phoneNumber" } ] }

在BPM设计页面启动工作流 参考登录经典应用设计器中操作，登录经典版应用设计器。 在BPM所在目录下，单击对应的BPM，进入BPM编辑器。 图1 单击待启动的BPM 在BPM设计页面，单击页面上方的，启动该BPM。 在BPM设计页面，可以通过如下两种方式启动。 自定义：将BPM的“开始”图元的开始类型设置为“自定义”启动，不指定事件的起因，即不需要指定触发条件，主要用于接口调用进行启动。 图2 自定义 表单：使用表单或页面，启动BPM。选择该项时，需要配置具体的表单、标准页面或高级页面。 图3 表单

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

基本设置 表头：是否显示表头。 序号：是否显示序号列，序号累加显示。 单选：启用后，显示单选按钮。 多选：启用后，显示多选按钮。与属性“单选”互斥，只能勾选“单选”或“多选”的一种。 斑马纹：是否显示间隔斑马纹。勾选后，表格会间隔显示不同颜色，用于区分不同行数据。 自动加载：预览或加载页面时，是否自动加载数据。仅当模型为对象模型时有效，启用后，预览或加载页面时，将调用后台的对象查询接口自动加载数据，不需要通过事件触发。 表格边框：设置表格的边框样式，支持显示完整边框、显示默认边框、显示外边框等。 文字对齐方式：表格中，文字整体的对齐方式。 使用模式：设置表格的使用模式，如管理模式、只读模式和勾选模式。 数据操作页面：编辑表格中数据的方式，可以设置“链接到页面”编辑数据。设置“链接到页面”时需要配置关联的页面名称，例如配置“详情页”、“新增页”、“修改页”的页面名称。如果在当前页面编辑数据，则清空“编辑数据的方式”值。

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

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面 CSS 属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写 CS S代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持“px”、“em”和“%”三种单位。 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。同一个组件如果在“基本属性”和“样式”中，同时对布局属性进行了设置，最终生效是“样式”栏中的设置。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

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

自定义OAuth2授权码模式接入鉴权 前面介绍了第三方系统在调用AstroZero业务接口前，如何配置接入鉴权。鉴权通过后，才能实现调用AstroZero业务接口。在AstroZero中开发的应用，也可以自定义OAuth2授权码模式接入鉴权。当应用配置鉴权后，只有通过鉴权的第三方系统才可以访问应用。 参考授权码模式接入认证中的4~6，获取鉴权ID“client_id”和鉴权密钥“client_secret”。 在应用开发页面，通过自定义接口，给第三方接入调用，用于第三方系统获取授权码code。 应用调用脚本API，判断第三方客户端的鉴权ID“client_id”和重定向地址“redirect_url”是否和注册接入鉴权时匹配。 如果匹配，则由AstroZero应用自定义接口，实现登录跳转和授权跳转。在授权完成后，再调用脚本API获取授权码code，并将需要展示给第三方的授权用户信息通过该API传给AstroZero，AstroZero会返回一个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" } }

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

什么是组件 组件（即Widget）是可复用的页面组成元素，一个页面由一个或多个Widget拼装而成。如果将一个页面看成拼图游戏的完整图案，那么Widget相当于拼图的每一小块。 在AstroZero环境配置中，可以管理当前环境中该账号下的组件资源。AstroZero组件分为如下两种： 系统预置组件：AstroZero已预置定义好的组件，可在高级页面和大屏页面中直接进行拼装使用。在“全局”页面下，可查看所有预置组件。 自定义组件：是根据需要自行开发的组件，通常开发过程是选择系统预置的组件模板下载到本地，本地开发好后再上传到组件库中。还有一种自定义组件是由标准页面转化而来。在“租户”页面下，可查看所有自定义组件。

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

表格列 合并：在已添加列中，选择了某几列，再单击“合并”，即可合并为一个大列，选中的列将作为大列的子列显示。 分解：在已添加列中，选中某个包含多个子列的大列，再单击“分解”，即可分解此大列。 添加字段：表格的列，当表格组件绑定了数据模型后，可选择绑定的模型中的字段成为表格的列，以及表格的查询条件。 添加操作列：表格的列，在表格中添加可操作列，即在操作列中通过添加图标，并为图标添加onclick事件代码，实现某些功能，如删除、编辑等。 添加空白列：表格的列，可添加表格空白列。

扩展属性 自动加载数据：仅当模型为对象模型时有效，启用后，预览或加载页面时，将自动加载数据，不需要通过事件触发。 可编辑：启用后，表格中每行的内容是否能进行编辑操作，不启用则内容为只读。 单选：启用后，显示单选按钮。 多选：启用后，显示多选按钮。 行号：启用后，表格首列显示当前行号。分页时行号重新从1依次开始，不累加。 累加行号：和“行号”只能启用其中一个，启用后，表格首列显示当前行号，分页时行号累加上前一页依次显示。 最小列宽：设置最小列宽值。 加载中状态：是否显示表格加载中状态。 空数据提示：数据为空时，显示的提示内容。 筛选为空提示：筛选数据为空时，显示的提示内容，仅当列筛选时生效。 树形数据：当表格中的数据有父子关系，可开启树形数据，并指定关联字段后，可展示出树形结构。 默认展开：开启树形数据时，子数据是否默认展开。 可选择：开启树形数据时，是否启用父子关联选择。 图标显示字段：开启树形数据时，图标所在位置显示的字段。不配置，就是第一列的字段。 父节点字段：开启树形数据时，关联的父节点字段。 子节点字段：开启树形数据时，关联的子节点字段。 根节点字段值：开启树形数据时，根节点的字段值。不配置默认为空。 子节点缩进：子节点缩进，单位px。 行拖拽：开启树形数据时，是否启用行拖拽，拖拽行可改变数据的父子结构。 风格 尺寸：设置表格的尺寸。 显示表头：启用后，表格显示标题行。 斑马纹：启用后，表格会间隔显示不同颜色，用于区分不同行数据。 纵向边框 ： 启用后，显示一个纵向的选择框。 高度跟随内容：表格行高度是否跟随内容多少变化。 AUI风格：是否开启AUI风格。 表头样式类：表头固定的class类名。 数据行样式类：表数据行class类名的回调方法，支持自定义各行数据不同的class类名。 合并行或列：合并行或列的计算方法，支持自定义设置行或列，单元格合并规则。 图7 合并行或列

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 表格宽高：设置表格的宽度和高度。 布局：对页面CSS属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写CSS代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 图8 样式属性配置面板 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。 样式透传：启用后，可以将设置好的样式透传给组件的子节点。

引申说明 表格组件能够以树形展示有个前提条件，即表格绑定的模型中存在取值上有父子关系的两个字段。 图25 示例 上述模型中，“主管”字段的值来源于“名称”，这两个字段就可以认为是父（主管）子（名称）关系，而“部门”字段仅在逻辑上和“名称”是父子关系，取值上并不是，这一点极易混淆。基于上述前提，就可以在表格的属性面板中绑定上述模型，开启“树形数据”开关，然后配置“主管”为父字段，“名称”为子字段。 图26 配置父子节点字段 图27 设置后效果

设置高级页面基本信息 高级页面创建后，支持设置高级页面的基本信息，如名称、路径名称、标题等。 参考登录AstroZero新版应用设计器中操作，进入应用设计器。 在应用设计器的左侧导航栏中，选择“界面”。 将鼠标放在对应的高级页面上，单击，选择“设置”。 在“基本信息”页签中，修改所需参数，单击“保存”。 表2 设置高级页面基本信息参数说明 参数 说明 名称 高级页面的名称，即创建高级页面时设置的名称，可根据实际需求进行修改。命名要求如下： 长度范围为1~100个字符。 必须以字母开头，由字母、数字或单下划线组成，且单下划线不能连续。 路径名称 路径名称和高级页面名称保持一致，可根据实际需求进行修改。命名要求如下： 长度范围为1~100个字符。 必须以字母开头，由字母，数字或单下划线组成。 标题 高级页面的标题，即创建高级页面时设置的标签，可根据实际需求进行修改。 描述 根据实际需求，在输入框中输入高级页面的描述信息。 关键字 用于和接口进行交互。 拉伸 勾选后，高级页面宽度会扩展至100%，以适应整个浏览器或设备的可视宽度，同时组件内容的宽度也会根据容器的宽度进行调整。默认为不勾选。 缩放和拖移 发布后的高级页面中，组件是否支持用户缩放或拖动。 默认为不勾选。 页面是否可定制修改 在扩展应用中，是否支持从依赖的应用中，将该高级页面导入。 默认为不勾选。 浏览器缓存有效期（天） 间隔多少天刷新一次浏览器缓存。

管理页面级数据源、全局状态 页面组件之间，可以通过配置事件和动作进行信息交互。当页面组件较多，且需要进行信息交互时，频繁的给每个组件去定义事件或动作就比较繁琐了。此时，可以通过定义全局状态，来实现页面级所有组件中数据信息的更新。 AstroZero低代码平台高级页面支持设置全局状态，通过页面级内存方式共享数据，即采用集中式存储管理页面所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的理解就是全局状态，可理解为页面中所有组件的共享状态，不管组件在页面的哪个位置或层级，任何组件都能获取状态或触发状态改变的动作。全局状态相当于全局变量，属性是私有的，需要在组件的js文件中，使用预置的“this.$mstore.dispatch”方法，来修改状态数据。 思考：什么情况下，应该使用全局状态？ 解惑：当页面组件构成比较简单，组件间不需要频繁的进行信息交互时，不需要设置全局状态。反之，则建议使用全局状态，通过设置并使用全局状态，可以帮助您管理页面所有组件的共享状态。 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“界面”。 在高级页面中，单击对应的页面，进入高级页面开发界面。 在页面右上角，单击，定义全局状态。 定义全局状态使用JavaScript编程语言，不支持TypeScript。全局状态结构固定以MStore命名，每个页面仅包含一个全局状态实例，方便在组件调试的过程中，轻易地获取整个当前页面状态的快照。全局状态的结构定义由以下三部分组成： state：定义页面所有组件的初始状态数据，即页面中所有组件共享状态的初始数据源。 mutations：状态变更的唯一方法是提交mutation。mutation以声明的方式，将state变化映射到视图，每次state的变更都需要定义一个mutation。mutation使用对象风格的提交方式，整个对象都作为载荷（payload）传给mutation函数，mutation都是同步事务。 actions：通过actions执行状态数据变更，用于衔接state和mutation。Action可以包含任意异步操作，通常用于绑定状态和组件，可以调用服务。 在页面的组件js文件中，使用预置的“this.$mstore.dispatch（）”方法，修改状态数据。

为高级页面设置水印 高级页面创建后，支持为高级页面添加水印。水印可以用于标识页面的所有者、状态或其他相关信息，建议不要过多的设置水印，可能会影响页面的美观。 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“界面”。 将鼠标放在对应的高级页面上，单击，选择“设置”。 在“水印”页签，参照表1设置参数，单击“保存”。 图1 水印设置 图2 设置后效果 表1 新增水印参数说明 参数 说明 启用水印 是否给该页面启用水印。 重复渲染 当需要设置满页面水印时，开启该项。 水印内容 设置水印文本内容。 水印长度 水印矩形框的长度。 水印宽度 水印矩形框的宽度。 水平起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的水平起始位置。 垂直起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的垂直起始位置。 字体颜色 水印字体的颜色。 字体大小 水印字体的大小。 旋转角度 水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度 水印的透明度设置。

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

样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面CSS属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写CSS代码进行更深度的个性化布局定制。 单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。 当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。 盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。 图5 样式属性配置面板 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，支持“px”、“em”和“%”三种单位。 阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。 高级设置：在高级设置中，直接编写CSS代码作用于当前元素。 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

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

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

基本属性 基本属性通过数据绑定后，在运行时以数据绑定的值为准。 标签：下拉框的显示标签名称，只有下拉框放在表单form中才生效。 占位符：下拉框未选择时，展示给用户的提示信息。 选项：下拉框单击后，可选择的选项内容。如果“属性值绑定”中，设置了“选项”与模型字段绑定。预览页面时，优先以“属性值绑定”为准，显示选项内容。 输入的数据必须为json格式，如： [{"value": "1","display": "男"},{"value": "0","display": "女"}] 选项列表：单击，选择系统中配置的选项列表。选项和选项列表，只能配置其中一种。 如果“属性值绑定”中，设置了“选项”与模型字段绑定。预览页面时，优先以“属性值绑定”为准，显示选项内容。 选项值是否唯一：选项值是唯一标识，开启后提升渲染性能。 是否多选：配置下拉框是否提供多选的能力。 可清空：是否在选择下拉框，显示一个删除图标，来删除选择框的内容。 弹层独立：选项值区域展示不全，部分内容隐藏时，开启后，可显示完整选项值。 可过滤：下拉框是否提供过滤能力。 远程搜索：是否根据输入的关键字，调用自定义的接口查询数据，和事件“on-remote-search”配合使用。 是否初始加载：拉框是否初始加载。 AUI风格：启用后，下拉框的下拉图标风格会所有不同。 最大宽度：组件的最大宽度。

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