华为云用户手册

记录更新 “记录更新”图元用于更新平台对象的实例记录，类似于数据库中的UPDATE命令。系统提供了以下两种模式，更新对象实例记录： 对象模式：需要先单击，在“对象变量”中定义一个对象变量或者对象变量数组，并将该对象变量或对象变量数组拖拽到“变量”输入框中，即可根据对象变量中的记录ID，将对象变量更新到数据库中，更新的值来源于对象变量中的值。如下图所示，根据对象变量数组“account”中的记录ID，将对象变量中的值更新到数据库中。 条件模式：需要指定对象并在条件中设置指定对象部分字段的值，在赋值中设置需要更新的目标字段及更新值，最后根据条件查找符合条件的对象记录并将赋值中的值更新到数据库中。

调用脚本 当流程到达“调用脚本”任务时，系统自动执行脚本，完成后继续执行后续路线。 使用该图元时，需要选择具体调用的脚本，配置输入输出参数。 图7 调用脚本配置页面 流程编排中只允许调用当前应用工程下的资源（例如脚本、服务编排），调用脚本中可供选择的脚本和该流程编排都处于同一应用下。 例如，流程编排A中需要调用脚本B，请确保A和B处于同一应用中。若需要调用的资源不在同一应用中，则在流程编排A所在的应用中新建脚本B，或选择“使用已有脚本”导入脚本B。再在流程编排A中，使用“调用脚本”图元调用该脚本。 图8 使用已有脚本新增脚本

高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： 组件为高级页面的元素，组件的可复用性可以大幅提高开发效率。 组件的事件-动作机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 库作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 组件可以通过桥接器调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制，构建了高级页面的基本框架。 图6 组件、库、桥接器关系图 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如图7所示，其中Page为高级页面，Widget为高级组件。 图7 高级页面与组件的关系 高级页面中的组件，包括如下两类： 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见全局高级组件。 自定义组件 若全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下三类： 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见开发高级组件。 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见开发高级组件。 将标准页面发布成高级组件 在低代码平台中，支持将开发好的标准页面导出为一个高级组件（Widget），供高级页面使用，详情请参见如何将标准页面发布成高级组件。 库 库是支撑高级组件运行的第三方依赖，若缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。系统预置库及第三方库的引入方法，请参见如何引入第三方库。 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见如何调用后台接口。 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见如何实现组件交互。

如何快速创建一个高级页面 以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。 新建高级页面。 参考如何登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置标签和名称，单击“添加”。 图8 添加高级页面 在应用中首次创建高级页面时，才会显示“视图”选项。 高级页面支持在如下两种布局模式下，使用组件搭建页面（具体说明请参见高级页面布局）。 绝对布局：在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。 流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。 搭建高级页面。 在高级页面开发界面，单击，打开组件列表。 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。 图9 搭建高级页面 进行组件属性配置。 以修改组件的图表数据为例，向您介绍如何进行组件属性配置。 选中基本柱图组件，在组件属性设置中，单击“数据”页签。 在桥接器实例中，选择“折线图数据桥接器”，数据类型选择“静态数据”，并在静态数据中拷贝如下示例。 图10 组件数据设置 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24" ], "dataValue": [{ "title": "入园人数", "value": [ 20, 30, 45, 20, 60, 80, 140, 200, 145, 40, 70, 60, 80, 16, 87, 77, 60, 20, 60, 80, 55, 68, 70, 24 ] }, { "title": null, "value": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { "title": "出园人数", "value": [ 90, 60, 30, 20, 10, 110, 140, 87, 64, 45, 11, 24, 80, 14, 98, 35, 41, 14, 45, 80, 31, 22, 23, 24 ] } ] } }]} 返回高级页面开发界面，单击页面上方的，保存页面。 如何进行高级页面的预览与发布。 页面创建完成后，可直接单击高级页面上方的，预览页面，也可以单击，发布高级页面。 图11 高级页面的发布

初识高级页面开发界面 进入经典版应用设计器，将鼠标放在某个文件夹上，单击“+”，选择“高级页面”，即可新建一个空白高级页面或基于模板创建一个高级页面。页面创建后，自动进入高级页面开发界面，您可以阅读以下内容初步了解高级页面。 图1 高级页面开发界面 高级页面开发工作台，功能模块布局说明如下： 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如获取、释放锁，电脑端或者移动端页面设置等。 组件列表：用于展开、收起高级组件列表。 获取锁\释放锁：低代码平台提供了多人协同开发保护机制，即页面锁机制。在应用开发过程中除了新建页面，其它页面相关操作都必须先锁定页面，包括编辑页面、删除页面、下载页面、发布页面模板、复制页面、保存发布页面。同时，在进行页面设置前，必须先锁定页面设置。 多人协同操作页面，锁定规则如下： 锁定高级页面的前提：该页面未被他人锁定，且页面设置未被他人锁定。 锁定页面设置的前提：所有页面包括页面设置，未被他人锁定。 每个用户只允许锁定一个页面或页面设置。 电脑端\移动端：为了让同一页面能够完美呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。多终端适配的详细介绍，请参见如何适配多终端。 保存：保存当前开发页面的修改。 发布：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 预览：页面发布后，可以预览该页面运行态效果。 撤销\复原：页面开发过程中若出现误操作，可执行撤销、复原操作。 性能分析：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 高级页面缩放比例：用于调节页面画布在开发工作台中的大小比例。 自动适应大小：自动适应页面画布在开发工作台中的大小比例。 网格线：开启画布网格线功能，用于标定组件在画布中的位置。 页面视图设置：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 页面状态设置：设置页面的状态。 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 高级组件展示、选择区域（序号2、3） 选定组件分类后，属于该功能分类的组件将显示在该区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 预置和自定义筛选：用于筛选当前选定组件分类中，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见全局高级组件。自定义组件为用户自主开发的高级组件，详情请参见开发高级组件。 画布 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。此处以绝对布局方式的高级页面为例，流式布局相关操作方法请参见流式布局高级页面。 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图2 拖拽组件示例 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图3 画布中调整组件示例 如上图中所示，在执行操作前请确保已获取当前页面的页面锁，未获取页面锁的状态下执行的所有操作都不能保存。当页面处于锁定状态下时，当前应用中其他页面均无法获取页面锁，若需要进行页面开发，请先释放页面锁。 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（若已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图4 格式刷操作示例 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 高级设置：用于设置当前组件的样式属性，全局高级组件详情介绍，请参见全局高级组件。 组件属性设置区域 未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 图5 组件属性设置操作示例 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见开发高级组件。 表1 组件属性设置说明 类别 设置项 详细说明 基础 组件标题 设置该组件在“当前视图组件列表”中的组件标题。 组件名称 设置该组件在运行态时，DOM结构中widgetname属性。 位置（仅在绝对布局类型的高级页面中存在此设置） 距离左端 设置组件在画布中，距离画布左边的距离，单位为px。 距离顶端 设置组件在画布中，距离画布顶端的距离，单位为px。 宽度 设置组件宽度，单位为px。 高度 设置组件高度，单位为px。 堆叠顺序 设置组件堆叠顺序，即CSS中的z-index属性，单位为px。当存在多个组件堆叠的情况时，可通过该设置项设置堆叠顺序，设置值较大的显示在上方。 边框 全边框 设置组件全边框，包含边框样式、宽度、颜色和弧度。 角边框 设置组件角边框，包含边框宽度、长度、颜色、弧度和边距。 背景 样式 设置组件背景图片的展示模式，包含普通、居中、拉伸和平铺。 图片链接 设置背景图片。 颜色 设置组件背景颜色。 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见如何调用后台接口。 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见如何实现组件交互。 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。

什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用Widget组件进行组装和配置，方便用户达到自己想要的效果。高级页面支持多种框架，支持代码开发，比较自由，多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面，提供了常用组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。

操作步骤 参考如何登录经典应用设计器中操作，登录经典版应用设计器。 将鼠标放在某个文件夹上，单击加号，选择“BPM”，去创建一个BPM。 图1 创建一个BPM 在BPM开发设计页面，选中空白区域，在右侧配置界面选择。 在“基本信息”页面，可以设置BPM的流程是否可以撤销，以及通过哪个元素后不允许撤销。 图2 BPM基本信息配置 设置后，在运行态可查看到“撤销”按钮，终止的流程该按钮置灰。 图3 运行态效果 单击，在运行态配置页面的“实例显示名”中，可配置BPM运行后，BPM实例在运行态的显示名。 在运行态配置页面的“BPM布局”区域，单击实例详情后的，可编辑BPM运行态布局。 图4 编辑BPM运行态布局 在编辑布局页面，支持修改“实例基本信息”、“当前任务”、“流程历史”的运行态显示标题，还可以编辑“流程历史”中需要显示的列。 单击编辑器上方的，保存BPM。 运行BPM后，在经典版应用设计器左侧，单击，可预览该应用。 在应用预览界面，单击“历史”，在历史任务中单击该实例后的“查看”，可查看到该BPM的运行态布局，查看布局是否符合预期。 图5 预览应用 图6 历史任务 图7 BPM运行态布局

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

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

排他网关 排他网关用来在流程中，实现一组分支的唯一决策。系统将按照“条件顺序”评估流出网关的分支，流程会执行第一个连线条件被评估为true（当多个条件为true时，将执行第一个决策）的分支，并且不再继续评估下面的分支。如果所有分支条件决策都为false且该网关定义了一个默认的连线，那么该默认分支将被执行。如果没有可到达的分支，抛出异常，流程被中断，在BPM设计上应避免这种情况发生。 图1 排他网关配置页面 图2 分支连线配置

绝对布局高级页面 创建绝对布局类型的高级页面。 参考如何登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。 图1 新建绝对布局类型高级页面 开发绝对布局类型的高级页面。 以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方，单击，设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的，保存页面。 单击，预览高级页面，查看当前页面在运行态的效果。 图8 预览高级页面

流式布局高级页面 在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考如何登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。 图9 新建流式布局类型高级页面示例 绝对布局类型高级页面与流式布局类型高级页面不同之处。 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在“组件属性设置”栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。 也可以通过拖拽组件最右侧边框，调节其所占列数。 图10 流式布局中调整组件宽度示例 当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。 通过拖拽的方式，调整组件上下、左右的排布次序。 图11 调整组件上下、左右的排布次序示例 流式布局类型高级页面，在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。 图12 悬浮模式示例 上图中标注说明如下： 标注1：在高级页面工具栏中开启悬浮模式。 标注2：拖入新组件。 标注3：悬浮模式下，组件相对位置设置选项。 相对定位 Screen：该组件基于当前视图的相对位置。 Layout：该组件基于当前布局的相对位置。 Widget：该组件基于其他组件的相对位置。 组件位置：设置相对定位的具体方位，共9个设置项。 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。 最大高度：设置该组件的最大高度，单位为px或%。 宽度：设置该组件的宽度，单位为px或%。

自定义组件结构 自定义组件包，目录结构如下。 // 组件目录结构my-package.zip├── components| └── my-component // my-component 组件| ├── custom-property-editor // 自定义属性编辑控件（可选）| │ └── index.js //| ├── custom-panel // 自定义属性面板（可选）| │ └── index.js //| ├── design-time // 组件设计态代码（可选）| │ └── index.js //| ├── resources // 组件图片资源（可选）| │ └── default.png //| ├── index.js // 组件运行态代码| ├── my-component.json // 组件定义文件├── manifest.json // 组件清单文件└── README.md // 组件包说明文件 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明 目录/文件 是否可选 描述 custom-property-editor/index.js 可选 自定义属性的编辑控件。 custom-panel/index.js 可选 自定义属性的面板。 design-time/index.js 可选 组件设计态。 resources目录 可选 组件相关静态资源，如组件图片。 index.js - 组件运行态。 my-component.json - 组件定义文件。 组件包样例。 单击链接，可下载样例包。 图1 目录格式 组件描述文件。 组件描述文件test-project.json是自定义组件配置面板的规格文件，用于校验和辅助编写自定义组件配置面板json文件。该文件编写需遵循JSON Schema规范，以便于与主流的编辑器（vscode、atom、sublime text和webstorm）集成。 组件描述文件在插件包位置如下： 图2 组件描述文件 组件描述文件，既可以在插件包开发时修改，也可以在插件包编译以后修改。编译之后，组件描述文件的位置如下所示。 图3 编译后的组件描述文件位置 图4 组件描述 样例代码： { // 下面的属性会用于页面组件右侧属性中 "name": "my-component", "title": "%component.title%", "description": "%component.description%", "category": "add-on", "icon": { "default": "./resources/default.png", "hover": "./resources/hover.png" }, // ... 此处省略了组件的其他属性} 表2 组件约束 参数名 功能 限制 描述 name 组件名 需要以英文字母开头，支持数字与特殊字符“_”、“-”，不支持中文，长度在64字符以内。 建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件名会存放在界面元数据的type中，如type: "my-component1"。 配置文件中的名称，用于后台元数据存储、解析等。 zip包名应该与name值保持一致，例如此处name为img-button，zip包名必须为img-button.zip。 title 组件别名 建议简短并能展示组件特性，长度在100字符以内。 组件别名，会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 description 组件描述 长度在200字符以内。 当鼠标悬停时，展示的组件描述信息。 category 组件分类 使用平台提供的组件分类。 为了保持界面构建器组件分类一致性，请使用平台提供的组件分类，具体请参考表3。 icon 组件图标 png格式，包括2个（未选中时和选中时），每个png的大小在16K以内。 在页面中展示的图标，自动压缩到40*40。 其他 包大小 编译后的组件包大小，需要在1M以内。 - 表3 组件分类 平台分类 说明 navigation 导航组件，例如菜单、工具栏或侧栏。 data 数据组件，可以查看和/或编辑应用程序中的数据，例如Form、Table或List。 common 通用组件，例如标签、图片、标题或段落。 container 容器组件，可以包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。 input 显示和编辑实体属性，例如文本框、日期选择器。 file 文件处理组件。例如，文件上传/下载组件、图片浏览组件或PDF预览组件。 button 触发动作的按钮，例如保存按钮、页面跳转按钮。 report 聚合数据并以表格或图表的形式显示，例如图表、透视表。 widget 业务卡片。 add-on 扩展组件。

操作步骤 参考如何登录经典应用设计器中操作，进入经典版应用设计器。 在左侧菜单栏下方，单击“配置”。 图3 选择“主题配置” 在“主题配置”页签，配置“显示名称”，该名称将会显示在运营配置页签。 新建主题。 新建主题有如下两种方式，请根据需要选择所需的方式。 代码化方式 在主题管理中，单击“代码化新建”，弹出“创建主题”页面，如图4，界面中包含了所有组件的样式。 图4 创建主题 修改相关的组件样式代码，关于组件的介绍请参考平台标准组件介绍。 例如，在输入框组件添加一个背景色，设置为红色，如图5。 图5 添加背景色 修改样式后，输入“主题名称”，单击页面右上方的“保存”进行编译保存，如图6。 图6 编译保存 若编译不成功，您需要修改主题配置，单击禁用该主题，再单击编辑按钮。 关闭“创建主题”页面，返回“主题配置”页签。 在主题列表中，单击刚配置好主题后的打开开关“OFF”，打开后显示如图7所示，启用该主题。 图7 开启主题 界面化方式 在主题管理中，单击“界面化新建”。 配置相关组件或者颜色、排版主题样式。 例如，修改按钮组件的样式，在左侧选择“按钮”组件，在中间区域直接修改界面参数设置样式。 鼠标悬浮在界面参数上，会有参数说明。 在右侧设置“主题名称”，例如“按钮字体颜色为黄色”，单击页面右上方保存图标。 设置后，在租户库中会出现创建的主题。 图8 查看库 打开标准页面，在右侧“库”中单击“新增库”，查找并引入主题库，单击“确定”。 图9 新增库 图10 引入库 返回标准页面，单击“预览”按钮，在弹出的效果页面会看到自定义样式后的效果，如图11。 图11 代码化新建的效果界面

场景描述 自定义主题时，可以自定义修改标准页面的样式。设置完并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。然后先单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。 图2 单击文件上传后的加号 在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。 图3 使用“debugger”设置断点 返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。 在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。 在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。 图4 “Console”页签查看日志相关信息 图5 在“Network”页签查看网络请求信息 单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码

提供AI代码补全功能 代码补全引擎会从开发者历史创建脚本中，学习其编码习惯，从当前代码脚本中获得代码上下文语法知识。开发者在编写脚本代码过程中，系统根据代码上下文和历史代码，对将要编写的代码进行提示，从而自动构建智能代码补全服务，增强IDE代码补全能力。 AI代码补全功能具体使用方法：开发者在代码编辑器中，编写脚本代码过程中，敲击字符时自动触发代码推荐，选中后按Enter补全。开发者将鼠标移动到待查看详细信息的字段，将字段悬浮窗中的文字选中复制粘贴到代码中。 如果想深入了解AI代码补全功能，请继续阅读以下内容： 常规补全：开发者编码过程中，输入任意字符均会触发的补全提示。 例如：开发者键入“@u”，如下图所示，系统根据意图在代码编辑器中给出最可能使用的方法。 定制补全：低代码平台脚本开发中，提供了内部预置系统级依赖库，供开发者调用。用户也可以在前台页面配置对象数据、系统参数、错误码、事件和工作流后，在脚本中引用这些内容。定制补全是指在脚本开发中引用依赖库和各配置项时，IDE触发的对潜在内容名称的补全提示。 依赖库补全：脚本代码中引入依赖的代码行时，对依赖库的名称进行推荐提示。如下图所示，开发者键入“import * as xxx from”后，提示z开头的依赖库名称。 表名（即对象名）补全：脚本代码引入对象数据的代码行中，推荐提示对象名称。如下图所示，开发者键入“@useObject”后提示m开头的对象名。 表字段提示：脚本代码中引用表字段时，鼠标移动到表名上，悬浮窗会对表名进行提示。如下图所示，开发者鼠标放在表名上，展示所有字段。 错误码补全：脚本中引入数据表的代码行中，对表名称进行推荐提示。如下图所示，开发者键入“setI18nError”后，提示相关错误码名。 错误码内容提示：脚本代码中引入数据表的代码行中，对表名称进行推荐提示。如下图所示，鼠标放在错误码名称上，展示相关描述。 系统参数补全：脚本代码中引入系统参数的代码行中，对参数名称进行推荐提示。如下图所示，开发者键入“sys.getParameter”后，提示相关系统参数。

脚本开发有什么限制 不支持以下正则表达式语法 (?=) // Lookahead (positive), currently a parsing error(?!) // Lookahead (backhead), currently a parsing error\1 // Backreference (\1, \2, \3, ...), currently a parsing error 使用场景限制 触发器目前只能使用ES5 JavaScript语法。 独立的脚本支持TypeScript语法。 Script中只可使用平台封装的标准库API，不能使用Formula公式。 console不兼容特性 console模块目前不支持格式化参数功能。 console.log('在 main 中，a.done=%j，b.done=%j', a.done, b.done); 不支持异步ES 7语法和库，如async/wait。

样例代码解读 通过以下详细的脚本代码内容解读，对脚本有一个更具体的认识。 一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图11 引入平台标准库 定义出参、入参结构。 图12 定义入参 图13 定义出参 定义方法以及使用的对象。 图14 定义方法及使用对象 进行数据库操作。 图15 数据库相关操作 以下将通过解读一个脚本样例，带您了解脚本的总体结构框架及编写要求。 import * as decimal from 'decimal';@action.object({type: "param"})export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject;}@action.object({type: "param"})export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal;}@action.object({type: "param"})export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[];}@action.object({type: "method"})export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; }} 上述示例脚本主要分为如下三部分： 导入标准库或其他模块。 上例中，第1行表示使用平台提供的decimal库。 import * as decimal from 'decimal'; 除了平台预置的标准库，还可以声明对其他自定义模块的引用。例如，已提前开发了一个脚本cirle，可以用如下方式加载它。 import * as circle from './circle'; 定义输入、输出变量。 脚本可以有多个输入、输出参数，也可以没有。所有的输入或输出参数，必须封装在一个class中，作为实例成员。 本例中，脚本有6个输入参数，被封装为ActionInput。每个参数都必须定义其参数类型，同时还可以定义是否必填、标签、最大值、最小值等可选属性。 @action.object({type: "param"})export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject;} 因为第6个输入参数“obj”的参数类型为自定义对象，所以还需要给出“ MyObject”的定义。 @action.object({type: "param"})export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal;} 脚本中有1个输出参数，被封装为ActionOutput。 @action.object({type: "param"})export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[];} 定义方法 样例中，ActionDemo是外部调用的class，使用export导出。ActionDemo定义了一个action method，使用action.method装饰，表明调用脚本时从此方法入口。greet是class的实例方法，其输入、输出参数就是前面定义的ActionInput和ActionOutput。在一个脚本文件中，action.method只能使用一次。 @action.object({type: "method"})export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; }} 脚本编辑页面不支持单步调试，样例里的console.log可实现在日志里打印过程输出，方便代码调试。

代码编辑器 在代码编辑区域，在符号上单击鼠标右键，会出现如图2所示代码导航功能。除此之外，脚本编辑器还提供了智能提示、代码补全、显示光标的所在行和列信息等能力。 图2 代码导航 Go to Definition 在代码编辑区域，在符号上单击鼠标右键，选择Go To Definition，可以跳转到符号的定义代码部分。 Go to References 在代码编辑区域，在符号上单击鼠标右键，选择Go to References，可以查看符号在脚本中的引用情况。 Run 在代码编辑区域，在符号上单击鼠标右键，选择Run，执行脚本。 Go to Symbol 在代码编辑区域，单击鼠标右键，选择Go To Symbol，选择任意符号，可以跳转到该符号的定义代码部分。 Peek Definition 在代码编辑区域，在符号上单击鼠标右键，选择Peek Definition，可以查看代码的定义。 Peek References 在代码编辑区域，在符号上单击鼠标右键，选择Peek References，可以查看代码的引用。 Rename Symbol 在代码编辑区域，在符号上单击鼠标右键，选择Rename Symbol，可重命名所选符号。 Change All Occurrences 在代码编辑区域，选中一个字符串，单击鼠标右键，选择Change All Occurrences，可以批量修改代码中所有包含该字符串的内容。 Format Document/Format Selection 在代码编辑区域，选择一块代码，单击鼠标右键，选择Format Selection；或者直接在任意位置单击鼠标右键，选择Format Document，可以对代码进行格式化排版。 Cut/Copy 在代码编辑区域，选择代码单击鼠标右键，选择Copy，可以剪切或者拷贝所选代码。 Command Palette 在代码编辑区域，在符号上单击鼠标右键，选择Command Palette或者按F1，进入命令面板，可以执行很多编辑功能。 图3 命令面板 Hover 把鼠标停留在符号上，可以查看符号的定义概要。再按住Ctrl键，单击符号，可以查看符号更加详细的定义。 例如，鼠标停留在“useObject”上，显示如下图所示，可查看其定义概要。按Ctrl键，单击“useObject”，可查看更详细的定义。 图4 查看定义概要 图5 查看更详细的定义 Bracket matching 高亮显示与选择内容匹配的符号，如{}、()、[]等。 图6 Bracket mathching Errors & Warnings 编辑代码时，如果有语法错误，会在这个语法下面显示红色波浪线，鼠标移动上去，会显示具体错误。 图7 Errors&Warnings Go to Line 按“Ctrl + g”，再输入行号，可以跳转到指定的代码行。 Search and Replace 按“Ctrl + f”，输入关键字，可以搜索当前代码的内容。表示搜索的内容分别支持大小写匹配、全文匹配、正则表达式。 按Ctrl + h，输入关键字，可以查找并替换代码中的内容。 Code Complete 全局符号补全 图8 complete_symbol 对象成员补全 图9 complete_member 参数补全 图10 complete_parameter Comment Code 在代码编辑区域，选择一块代码，输入“ctrl + /”组合键，可以注释或去注释选择的代码块。 Save File 在代码编辑区域，“按Ctrl + s” ，或者单击右上角的保存图标，可以保存脚本。

脚本主要用什么语言和库 低代码平台的脚本引擎采用TypeScript语言。脚本执行时，TypeScript语言会被翻译成JavaScript语言，由JavaScript引擎执行。 在JavaScript es5的官方标准库外，低代码平台还扩展了10+预置标准库（即预置API），帮助您更高效地开发脚本，有关系统预置的标准库说明请参见脚本中预置的API。 库的使用方法举例： import * as http from 'http';

脚本用什么编辑器 AstroZero提供一个方便简洁的在线开发IDE，即脚本编辑界面，脚本编辑界面开发体验接近离线的开发工具，具有如下优势： 现代化的编辑界面，语法高亮显示。 智能提示，智能补全。 精确查看定义，代码预览，查找引用。 快速在线编译。 友好的语法错误提示。 可以使用console.log，写日志分析复杂的问题。 脚本编辑界面如图1所示，您可以在线编辑、测试和发布脚本。 图1 脚本编辑界面 按钮区域 脚本编辑页面常用的图标按钮区，具体功能说明如表1所示。 表1 图标说明 图标 说明 / 获取锁、释放锁。脚本在获取锁后，才能进行编辑。 / ，单击即可启用脚本，该图标高亮时，表示当前脚本已被启用。 ，单击即可禁用脚本，该图标非高亮时，表示当前脚本未启用。 说明： 脚本开发完成后，需要启用脚本。只有启用状态的脚本，才能在被其他资源（如服务编排、标准页面）调用时，搜索到。 保存脚本。 另存为脚本。 设置脚本属性，如可见性、是否开启允许覆盖等。 执行脚本。 / 操作回退、撤销回退。 对已开发好的脚本代码进行性能检查、兼容性检查和静态配置检查。 说明： 代码检查的具体操作，请参见脚本代码性能检查规则说明。 刷新当前引入的脚本到最新状态。 单击该图标，脚本编辑器可分屏显示。 脚本启用后，单击右上角的，可查看该组件的调用关系图。 版本对比。 切换版本。 代码编辑区域 在该区域开发代码，实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力，更多介绍请参见提供AI代码补全功能。 脚本编辑页面同样支持离线编辑器中的常规快捷键操作，例如“Ctrl+S”可以保存当前修改，“Ctrl+H”可以调出查找替换对话框，您也可以根据自己的开发习惯，尝试各种快捷键操作。 测试区 运行代码后的显示区域。在“输入参数”页签输入参数后，单击测试区右侧的运行按钮，运行脚本。即可在“输出参数”页签，查看输出结果是否正确。在“问题”和“日志”页签，查看问题和日志。除此之外，还支持清除日志输出、运行脚本并动态检查和保存输入参数。

前提条件 若已有需要导入导出数据的目标对象，可直接执行导入导出操作。 若没有目标对象，需要先创建一个对象，再创建自定义字段，配置“允许API批量访问”后，再执行导入导出操作。 新建一个简单的对象Class，对象创建过程请参见创建自定义数据对象。 在对象Class中创建一个自定义数字类型字段number，自定义字段创建过程请参见定义自定义对象的字段（Fields）。 在对象Class的“基本信息”页签中，勾选“允许API批量访问”，如图1所示。 图1 自定义对象Class

定义页面数据模型 打开一个标准页面，在标准页面的左下方，单击“模型视图”。 在“模型视图”中，单击“新增模型”。 添加模型，定义模型名称与来源，单击“下一步”，如图1所示。 图1 定义模型 低代码平台支持四类模型（如图1），每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义函数 开发者自由定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的更多信息请参考3.1 了解对象模型。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型是由后台服务映射生成的。当前支持与服务编排或脚本映射，关于服务模型的更多信息请参考7.1 什么是服务编排和8.1 什么是脚本？。 参数根据后台服务的入参、出参映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型是由后台事件的字段映射生成的，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 若上一步来源选择“自定义函数”，需要添加子节点自定义参数及类型。 若上一步来源选择“对象”，需要配置模型关联的对象以及字段。 若上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者具体的API。 若上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。 值绑定：表单、表格、列表视图对应的数据绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。 属性绑定：将组件的某个属性，如只读、禁用、必填等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 图1 数据绑定配置面板

属性绑定 除了值绑定外，不同组件还拥有不同的属性，例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上，类似vue中的v-bind语法。 “模态框”组件默认弹出是不可拖动的，在上例的基础上增加一个按钮，当单击该按钮让模态框变为可拖动的，以此来演示“属性绑定”，如图9所示。 图9 新增一个按钮用来控制模态框“可拖动”属性 新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定，如下图所示。 图10 模态框组件属性绑定 与上一个例子类似，在新增的“模态框拖动”按钮的点击事件中，将“modalDrag”设置为true。 图11 设置事件 图12 编辑代码 单击，保存页面后，单击，进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动，关闭模态框单击“模态框拖动”按钮后，模态框再次弹出即为可拖动效果。 图13 属性绑定演示效果

值绑定 值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明，新建一个标准页面，向页面中拖动一个“按钮”组件和一个“模态框”组件。将模态框绑定在一个数据模型上，当按钮被单击时模态框弹出，实现组件间通过数据模型交互的效果，如图2。 图2 “值绑定”示例页面 选中“模态框”组件，在右侧属性配置面板配置值绑定，选择一个数据模型进行绑定，此处新建一个自定义模型“modalShow”，如图3，单击“下一步”，再次单击“下一步”，单击“确定”，选中该模型。 图3 新建模型 图4 选择模型 图5 完成值绑定后页面展示效果 支持选择任意类型的模型，进行值绑定，更多标准页面模型内容请参见4.6 如何获取后台数据。 选中“按钮”组件，在按钮组件的事件配置面板，为按钮组件添加“点击”事件。 图6 为“按钮”组件添加“点击”事件 在弹出的编辑面板，单击左侧“设置模型实例数据”，将代码粘贴到编辑面板。将模型名称替换为待修改的模型“modalShow”，值设置为“true”。 图7 编辑单击事件 单击，保存页面后，单击，进入预览页面。在预览界面，单击“弹出模态框”按钮，“模态框”组件弹出。 图8 “值绑定”演示效果 以上示例简单说明了，如何通过“值绑定”实现组件间的交互。将组件的值（value）绑定在一个模型上，通过其他组件触发事件，改变绑定数据模型的值。例如，此例中“模态框”组件的值，绑定在“modalShow”模型上，“按钮”组件的点击事件将“modalShow”改变为true，模态框即显示，单击“模态框”关闭按钮“modalShow”模型的值变为false。

自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人满意的效果。利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。 标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提供某一部分的布局，多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中，“栏”组件的呈现形式，实现不同大小屏幕下不同的显示方案，如图13。 图13 分栏组件 “分栏”组件右侧属性配置面板的“行布局”中，可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。 为了方便说明，如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图14。 图14 分栏组件模拟录入员工信息 “phone”属性中，可以依据图示，选择“分栏”组件中“栏”，在移动端的布局形式，如图12所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列，此时单击页面上方的“全屏”，手机图标就可以模拟在移动端展示的效果，如图15。 图15 移动端展示效果“竖排” 如果在“phone”中，依旧选择从左到右的布局方式，则展示效果如图16。 图16 移动端展示效果“横排” 布局模式：可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的介绍请参见基础布局设置。 录入分隔比例：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”为“8:8:8”，如图17所示。 图17 “录入分隔比例”为“8:8:8” 调整“录入分隔比例”为“6:12:6”时，中间的“栏”的宽度就会按比例放大，两侧“栏”的宽度按比例缩小，如图18。 图18 “录入分隔比例”为“6:12:6”

基础布局设置 标准页面提了流式布局（Flow Layout）和弹性布局（Flex Layout），标准页面的基础布局主要是通过“容器”组件实现的。 容器组件就是基础的布局容器，可以将其理解为CSS中DIV的概念。DIV是层叠样式表中的定位技术，全称Division，即为划分，有时可以称其为图层。 DIV是HTML中的一个标签元素，用来为HTML文档内大块的内容提供结构和背景的元素，可以将“容器”简单理解为画布，通过设置外层画布的属性达到控制内容布局的效果。 流式布局 容器组件默认弹性布局未开启，处于流式布局的状态，如图1所示。 图1 流式布局 在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图2所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。 图2 流式布局中组件为块级元素 流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图3、图4所示。 图3 居中水平对齐 图4 靠右水平对齐 弹性布局 将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局，弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图5所示。 图5 弹性布局 为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。 默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图6所示。 图6 弹性布局默认效果 排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图7。 图7 排列方向“列” 水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图8、图9所示。 图8 水平对齐方式选择“中间对齐” 图9 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图10、图11所示。 图10 垂直对齐方式选择“中间对齐” 图11 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图12所示。 图12 弹性布局实现居中

如何使用布局增删改查对象数据 执行下面操作，必须具备如下条件： 条件1：已有了需要增删改查数据的目标对象，则不需要执行条件2、条件3。本章节仅以条件2、条件3中的对象和字段为例，介绍如何通过“布局”增删改查对象数据。 条件2：创建一个简单的对象Class，对象创建过程请参见创建自定义数据对象。 条件3：在对象Class建一个自定义数字类型字段number，自定义字段创建过程请参见定义自定义对象的字段（Fields）。 在对象详情页单击“布局”页签，进入该对象的布局。 如图3，单击“Class Records”后的，会弹出布局预览页面。 图3 如何进入布局预览页面 在布局的预览页面，单击“添加”，新增并保存即完成增加一条数据操作。 图4 如何新增数据 若需要在布局页面添加对象字段，则执行如下操作。 在对象详情页的“布局”页签，单击“Class Records”，进入对象布局页面。 图5 进入对象布局编辑页面 单击左上方的，获取锁，选中页面中的表格组件后，单击右侧属性配置处的“添加字段”，选中添加的字段，单击“确定”，添加字段到表格表头上。 图6 添加字段入口 图7 选中字段 设置完成后，单击，保存修改。 保存成功后，单击，可查看添加字段的数据记录。 另外您还可以使用控制台、脚本或服务编排快速查询数据，详细操作请参见使用SQL查询数据。 图8 控制台查询对象数据 如果想实现批量快速增删改查数据，需深入学习TypeScript脚本语言和AstroZero平台的相关库和接口，请参见脚本开发。