华为云用户手册

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

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

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

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

购买AstroZero专享版实例 提交工单申请开通AstroZero专享版实例。 专享版实例需要单独付费购买，购买专享版实例前，需要先提交工单申请开通专享版。 开通后，进入购买Astro轻应用专享版实例页面。 在购买AstroZero实例页面，设置实例参数，单击“立即购买”。 图9 购买AstroZero专享版实例 表3 购买专享版参数说明 参数 说明 实例版本 待购买实例的规格，请选择“专享版”，实例规格的详细介绍请参见产品规格差异。 用户数 购买的AstroZero实例中最多可以添加多少个用户，此处的用户数包括业务用户数。 CPU架构 新建AstroZero实例的CPU架构，支持x86和Arm。 可用区 新建AstroZero实例，所在的可用区。可用区是在同一区域下，电力、网络隔离的物理区域，可用区之间内网互通，不同可用区之间物理隔离。如果需要提高实例的高可靠性，建议将实例创建在不同的可用区。 实例名称 新建实例的名称，同一账号下实例不可重名，创建后不可修改。命名要求如下： 长度为4~64个字符。 必须以英文字母开头，只能英文字母、数字或下划线组成。 描述 在输入框中，输入新建实例的描述信息。 取值范围：1~255个字符。 虚拟私有云 新建实例所在的虚拟私有云，实例创建后不可更改。 安全组 新建实例所在的安全组，实例创建后不可更改。 公网出口 是否开启服务器访问外部公网/局域网内大网网络，网络环境与云平台EIP（弹性公网IP）网络环境一致，当AstroZero需要访问外部邮箱服务或其它第三方网站等需求时，建议开启。 购买时长 设置实例的购买时长，最短1个月，最长3年。 确认规格无误后，单击“去支付”。 支付完成后，单击“返回Astro轻应用控制台”，即可进入AstroZero服务控制台。 AstroZero实例创建成功后，单击专享版实例中的“管理运行环境”，即可进入独立的运行环境。

操作场景 AstroZero免费版可使用的资源有限，标准版、专业版和专享版更适用于个人或企业的商用开发。AstroZero专业版和专享版实例支持回退到免费版，回退后不支持访问运行环境。 标准版：适用于零代码应用开发场景，开发者不需要有代码开发经验，企业自用首选。如何购买标准版实例以及如何使用AstroZero零代码能力开发应用，请参见《用户指南（零代码）》。 专业版：专业版在标准版基础上提供了低代码应用运行环境（多租户共享运行环境），且提供了更多功能和资源，适用于专业开发者。 专享版：专享版提供了物理隔离的运行环境，运行环境实例发放到租户虚拟私有云中。专享版需要提交工单申请开通，否则，您将无法购买专享版。 AstroZero专业版和专享版实例支持回退到免费版，回退后不支持访问运行环境。 购买AstroZero标准版和专业版实例时，会同步创建一个Astro工作流免费基础版实例。Astro工作流（Astro Flow，简称AstroFlow）可帮助开发者快速构建业务流程及自动化工作流，轻松实现人财物事的调、转、入、离、审、评和批等任务的数字化需求。更多关于Astro工作流的介绍，请参见Astro工作流 AstroFlow。

如何管理应用版本 便于管理维护，版本可以不断更新修改。当修改脚本或服务编排等时，可以编译发布新版本的源码包，当大部分组件都修改时，可以编译发布新的资产包。在AstroZero上安装的应用是带版本号的，在库和管理菜单里的软件包管理可以看到应用版本，可以升级应用到最新版本。 版本号格式为“X.X.X”（系统默认版本号以0开头，界面只需要填写后两位即可）。 图1 库的版本管理 图2 软件包的版本管理 父主题： 工程能力

如何调用第三方接口 在使用AstroZero时，通常会调用第三方系统接口，进行数据交互。针对常见Rest和SOAP协议，AstroZero封装了Rest服务连接器和SOAP服务连接器。使用这两种连接器，可方便快捷的调用第三方接口，实现对第三方系统的数据增加、删除、修改和查找。 使用Rest服务调用Rest协议接口：当系统需要调用第三方提供的Rest协议接口时，可以通过配置Rest Service来实现。Rest Service是第三方系统提供的Rest服务，是一组模块化的Rest接口（Rest Action），通过配置第三方提供的Rest服务的URL进行调用。Action是对第三方接口的一个元数据描述，将第三方接口转换成AstroZero可识别的定义，方便AstroZero调用第三方接口。 使用SOAP服务调用SOAP协议接口：当系统需要调用第三方提供的SOAP协议接口时，可以通过配置SOAP Service来实现。SOAP Service是第三方系统提供的Soap服务，是一组模块化的SOAP接口（SOAP Action），通过配置第三方提供的SOAP服务的URL进行调用。Action是对第三方接口的一个元数据描述，将第三方接口转换成AstroZero可识别的定义，方便AstroZero调用第三方接口。 用户可通过第三方提供的WSDL文件手工创建SOAP Service，也可以直接导入第三方提供的WSDL文件创建SOAP Service。 调用第三方接口前，需要第三方系统提供符合Rest和SOAP协议规范的API。 父主题： 集成开发

数据绑定 通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：值绑定类似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的账号、账号下其他AstroZero用户都可直接使用该页面模板来创建标准页面。

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

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

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

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

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

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

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

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

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

基本属性 链接地址：输入单击图片时，跳转的目标地址。 图片地址：选择或上传图片，支持上传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。 在“数据绑定”中，单击“属性值绑定”后的“+”。 在“属性”下拉框中，选择对应的属性。 在模型字段中，单击，进入选择模型页面。 单击“新增模型”，进入新增模型页面。 设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的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刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 在新建模型“设置”页面，执行如下操作。 上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 上一步来源选择“对象”，需要配置模型关联的对象以及字段。 上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

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

更新已有页面 勾选已存在的页面，进行增量更新操作。例如，对象结构或字段进行了修改，想基于修改后的值，生成新的页面，替换原来的页面。 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“数据”。 将鼠标放在对象上，单击，选择“编辑”，进入对象设计器。 选中对象图元，在右侧属性面板中，单击“生成页面”。 图6 生成页面 在生成页面中，选中“更新已有页面”。 在显示的页面列表中，选择对应的页面，单击“保存”。 图7 更新已有页面 该列表显示的是由该对象直接生成的页面，不包括开发者通过创建新页面生成的页面（即使也绑定了该对象模型）。 页面的显示名称和唯一标识以及内容可能已被更改，但仍然归属此对象的生成页面。

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

AI代码补全功能 功能描述：开发者在JS代码编写过程中，键入特定的字符，界面会进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 使用方法：开发者在JS代码编辑器中，编写代码过程中敲击字符时，会自动触发代码推荐，选中后按Enter补全。 事件内置API补全：输入“context”后，提示事件代码内可调用的API。 图3 事件内置API补全 模型名称补全：输入“context.$model.ref”后，提示当前页面中的模型。 图4 模型名称补全 服务编排名称补全：输入“context.flow”后，提示当前租户下的服务编排。 图5 服务编排名称补全 脚本名称补全：输入“context.script”后，提示当前租户下的脚本。 图6 脚本名称补全 服务名称补全：输入“context.service”后，提示当前租户下的 API服务 ，选择API服务名称后自动补全服务地址。 图7 服务名称补全 OneMobile API补全：输入“xm”后，提示OneMobile小程序中的API。 图8 OneMobile API补全 WeLink API补全：输入“HWH5”后提示WeLink小程序中的API。 图9 WeLink API补全

通过内置动作编排事件 系统预置了多种常用的事件交互动作，您可以根据需要直接使用，来实现页面或组件之间的交互。 下面以编排一个重置功能的按钮为例，介绍如何通过内置动作编排事件。本示例主要是通过内置动作“重置表单”实现该功能，即重置表单数据。“提交表单”是指将页面数据提交到表单中，和重置表单配置类似，不再单独介绍。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 在“内置动作”中，单击“重置表单”，选择需要重置的表单，单击“创建”。 图3 添加动作 返回标准页面开发界面，单击页面上方的，保存页面，并单击，预览页面。 在表单中输入数据，单击“重置”按钮，可预览按钮的事件效果。

操作步骤 参考登录经典应用设计器中操作，登录经典版应用设计器。 将鼠标放在应用的某个文件夹上（如Logic），单击“+”，选择“触发器”。 图1 选择触发器 设置触发器参数，单击单击“添加”。 图2 新建触发器 单击“添加条件”，进入创建规则条件页面，进行配置，单击“保存”。 图3 新增条件 条件名称：新增条件的名称。 执行操作条件：进入该条件规则的条件，本示例配置为“当条件满足时”。 设置条件：设置具体条件。字段配置为“name”，操作符配置为“等于”，类型配置为“常量”，值配置为“"zhangsan"”。条件中当字段是数字、百分比或币种金额类型时，取值不用加“""”，其他字段类型取值请加“""”。 单击“添加操作”，设置满足规则条件后执行的动作，单击“保存”。 图4 创建动作 操作类型：动作类型，设置为“邮件告警”。 操作名称：新增动作的名称。 电子邮箱告警：选择前提条件中配置的邮箱告警。 在页面上方，单击，启用触发器。 图5 启动成功后效果 结果验证。 基于“Employee__CST”对象创建一条记录，该对象“name”字段取值为“zhangsan”。 用户“123@qq.com”收到邮件通知。

通过自定义JS代码编排事件 通过手动编写JS代码，实现按钮的事件逻辑。系统支持在手动编写JS代码时，进行代码联想提示；系统封装了一些常用功能的接口，并将其中典型接口做成模板，您可以从左侧拖动相关模板至右侧事件定义区域，直接使用。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JS代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 内置JS事件说明及使用方法，请参见如何通过JS代码，实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下： //获取当前组件var _component = context.$component.current;//获取当前表单var _form = context.$component.form;// 重置表单_form.resetFields(); 返回标准页面开发界面，单击页面上方的，保存页面。