华为云用户手册

创建普通变量或者集合变量 在服务编排编辑器页面右侧选择。在全局上下文页面单击“变量”后的加号。 图1 创建变量 单击新增变量后的“...”，选择“设置”。 设置页面参数，单击“保存”。 图2 配置变量 表1 变量参数说明 参数名 参数说明 如何配置 名称 变量名称，必填。 直接填写。 数据类型 变量的数据类型，必填。 文本 数字 货币 日期 日期/时间 复选框 任意 在下拉框里选择需要的类型。 默认值 变量的默认取值。 若需要配置默认值，请直接填写。 描述 该变量的描述信息。 选填项，一般建议填写变量的作用。 是否为数组 是否为数组型变量即集合变量。 勾选表示为数组。

创建公式变量 公式变量主要用于变量赋值，表达式计算，参数传递等。 在服务编排编辑器页面右侧选择。在全局上下文页面单击“公式”后的加号。 设置页面参数，单击“保存”。 图4 配置公式变量 表3 公式变量参数说明 参数名 参数说明 如何配置 名称 公式变量名称，必填。 直接填写。 数据类型 公式变量的数据类型。 文本 数字 货币 日期 日期/时间 复选框 结构体 在下拉框里选择需要的类型。 描述 该公式变量的描述信息。 选填项，一般建议填写公式变量的作用。 表达式 表达式。 若表达式中需要运用公式，您可根据需要双击“公式”区域中系统预置的公式，该公式会显示在右侧“表达式”区域中。当表达式中需要有变量参数时，您可从变量区域中直接选择变量拖入到表达式中。

什么是对象 低代码平台中的对象（也可以称为Object）相当于传统方式开发业务系统时，数据库中创建一个表。每个对象对应一张数据库表，用于保存业务系统需要的配置数据和业务数据。 对象可以存储组织或业务特有的数据。您可以围绕对象这一核心，定义相关的字段、字段校验规则、界面样式、字段变更时的触发事件等。如果把待开发的业务系统比作一部电影，对象就是电影中的各个角色，需要勾勒角色的外貌、性格特点、人物关系和所经历的剧情。 低代码平台预置了一部分标准对象（Standard Object），您可以为这些标准对象新增字段，但不能修改、删除预置字段。租户开发者也可以根据自己的业务需要，创建自定义对象（Custom Object），低代码平台支持增、删、改自定义对象及自定义对象的字段。 当您创建了一个自定义对象后，系统会为自定义对象自动创建一些标准字段（Standard Fields），如图1所示，而您在自定义对象中手动创建的字段，将保存“自定义字段”页签。 图1 自定义对象的标准字段 如何新建自定义对象，请参见3.2.1-如何创建对象。 同一帐号下，新建的自定义对象名称不能重复。 当前平台支持创建的对象模型功能类型和每种类型的介绍如表1所示。 表1 对象模型功能的介绍 子类 子类介绍 开发指导 标准对象 平台预置的对象，对象名称和对象字段均已定义好，可以满足最基本的业务需要。 只允许用户扩展新字段，禁止修改/删除基线字段。 创建对象时要选择“导入已有对象”。 自定义对象 开发者自定义的对象，允许用户增/删/改对象和字段。 请参见数据对象建模。 视图对象 与数据库中的View视图类似，是对2个以上的对象进行关联查询，并把结果集以对象的形式展现，这样的对象称之为视图对象。视图对象中的数据只支持查询，不支持增/删/改。 请参见如何创建视图对象。 聚合对象 由一个主对象和多个子对象构成的复合对象，实现不同对象之间建立关联关系。聚合对象对外展现为一个对象，从而简化对象管理。 请参见如何创建聚合对象。 图2 自定义对象 表2 对象模型特性说明 对象特性 说明 字段管理 标准字段：系统预置的字段，只能修改，不能添加和删除。 自定义字段：可根据需要自行增/删/改。 对象校验器 在向对象中录入记录数据时，为了保证对象数据的有效性，可以定义一些校验规则，对字段值以及各字段之间的逻辑关系进行校验。例如name字段不能为空，MinPrice字段不能大于maxPrice字段等。 对象触发器 与数据库中的触发器类似，可以为对象定义触发器，在增/删/改对象的记录数据时，自动触发自定义的Java Script脚本执行，脚本的执行结果将会影响主操作（即增删改记录）的结果，系统保证主操作与触发器在一个事务中执行，要么都成功，要么都失败。 对象布局Layout Layout是对象的页面布局，决定了对象详情页面中各字段展示位置的排版布局。系统为StandardObject预置了标准的布局Layout，租户也可以根据需要定制自己的Layout。 选项列表 选项列表用于定义对象的字段可选用的值，类似于定义下拉列表的一组枚举值。 对象可见性 对象可见性并非用于安全隔离，是给租户提供的解耦辅助功能。 对象模型是后台存储业务数据的表结构模型，注意请与标准页面的数据模型加以区分。后者是UI访问后台数据时创建的模型映射。 父主题： 对象

为对象配置内嵌触发器 AppCube平台支持用户给对象增加内嵌触发器，实现在增/删/改对象的记录数据时，自动执行内嵌触发器脚本（该脚本由用户自定义，其实就是一段普通的TypeScript脚本，没有输入输出参数）。比如在对象记录插入前、记录插入后、记录更新前、记录更新后、记录删除前或者记录删除后自动执行内嵌触发器脚本。 下面以之前创建的对象“CNAME__Class__ CS T”为例。创建一个记录删除后的触发器，实现在删除一条“CNAME__Class__CST”对象的记录后，把相应的“name”、“CNAME__number__CST”数据记录到日志对象“CNAME__log__CST”中。在此需要提前创建如下的日志对象“CNAME__log__CST”，如何创建请参考上一节中对象“CNAME__Class__CST”的创建过程。 表2 “CNAME__log__CST”对象的字段 对象 字段来源 字段名称 字段数据类型 CNAME__log__CST 自定义字段，手动创建 CNAME__operator__CST 文本，数据长度36。 自定义字段，手动创建 CNAME__className__CST 文本 自定义字段，手动创建 CNAME__classNumber__CST 数字，表示班级编号。 在对象“CNAME__Class__CST”配置页面，单击“内嵌触发器”页签，再单击“新建”。 图5 新建内嵌触发器 输入触发器的基本信息，单击“保存”。 图6 输入信息 表3 New Trigger参数说明 参数名称 参数说明 标签 内嵌触发器在用户界面展示的名称。 名称 内嵌触发器的名称，单击后默认自动生成，与“标签”值保持一致。 事件触发时机 内嵌触发器在什么时候生效，可直接在下拉框中选择。即在系统执行如下某动作时，自动执行触发器的脚本： 插入前：记录插入操作前触发。 修改前：记录更新操作前触发。 删除前：记录删除操作前触发。 插入后：记录插入操作后触发。 修改后：记录更新操作后触发。 删除后：记录删除操作后触发。 描述 关于内嵌触发器的描述，不超过255个字节。 编写触发器的脚本，其中对象名称、字段名称和之前创建的保持一致。 对象的内嵌触发器脚本，其实就是一段普通的TypeScript脚本，没有输入输出参数。在脚本中可以通过“对象名.字段名”来访问当前记录的具体字段值。针对“事件触发时机”为“修改前”或者“修改后”的触发器（即触发器脚本执行条件是对象记录更新前、记录更新后），脚本代码中通过“对象名.字段名”获取到的都是当前记录的具体字段值，目前不支持获取更新前的记录值。 //test_delete_triggerimport * as db from 'db';import * as context from 'context';let name = CNAME__Class__CST.name;let CNAME__number__CST = CNAME__Class__CST.CNAME__number__CST;let logObj = db.dynamicObject('CNAME__log__CST');logObj.insert({ "CNAME__operator__CST": context.getUserId(), "CNAME__className__CST": name, "CNAME__classNumber__CST": CNAME__number__CST,}); 关于脚本的更多说明，请参考脚本开发。 编辑后单击上方图标，进行保存。并单击启用脚本。 启用后在内嵌触发器列表可查看到当前触发器状态为“ON”，表示当触发条件满足时，AppCube会自动执行该触发器脚本。 图7 启用触发器 验证触发器。 在对象“CNAME__Class__CST”配置页面，单击“布局”页签，在“Class Records”后单击。 “对象名 Records”显示对象数据的记录列表。预览该页面可增、删、改、查对象数据。 在布局的预览页面，单击“添加”，新增并保存，增加数据，为下一步删除数据做准备。 图8 如何新增数据 单击数据所在列的“删除”，删除数据。 在对象“CNAME__log__CST”配置页面，单击“布局”页签，在“log Records”后单击。 图9 预览Records页面 查看到对象“CNAME__log__CST”数据列表中已记录一条刚删除的“CNAME__Class__CST”数据。触发器生效。 图10 触发器脚本新增的一条数据

什么是校验器和触发器 对象校验器：在向对象中录入记录数据时，为了保证对象数据的有效性，可以定义一些校验规则，对字段值以及各字段之间的逻辑关系进行校验。例如name字段不能为空，MinPrice字段不能大于maxPrice字段等。 对象触发器：与数据库中的触发器类似，可以为对象定义触发器，在增/删/改对象的记录数据时，自动触发自定义的TypeScript脚本执行，脚本的执行结果将会影响主操作（即增删改记录）的结果，系统保证主操作与触发器在一个事务中执行，要么都成功，要么都失败。

如何使用服务编排查询数据 使用服务编排中“记录查询”图元查询自定义对象Class（CNAME__Class__CST），实现“select name,CNAME__number__CST from CNAME__Class__CST”。 服务编排开发的相关内容，请参见如何使用服务编排开发数据的增删改查。 新建服务编排“flowSearchData”，在全局上下文中，创建变量“name”、“number”，类型分别为“文本”、“数字”。 在服务编排图元区的“基本”目录下拖拽一个记录查询到画布，参考图4，配置对象和输出。 图4 正确配置“记录查询” 连接开始图元和记录查询图元，参考配置服务编排出参。 图5 正确配置“输出” 配置完成后，单击保存服务编排，单击进入运行页面。 图6 保存服务编排并运行 由于本服务编排中不需要输出参数，因此直接单击“运行”，即可查看输出的json格式结果。 图7 服务编排实现查询自定义对象的字段

如何使用控制台查询数据 在应用开发工作台的导航菜单上，单击，弹出控制台页面。 图1 控制台入口 在“对象管理”的命令行输入区输入SQL语句，例如“select CNAME__number__CST from CNAME__Class__CST”，单击“执行”，即可显示查询的字段列如图2中③所示。 图2 执行SQL查询对象“CNAME__Class__CST”数据 控制台更多介绍内容，请参见使用控制台分析查询SQL。

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

场景描述 本实例以新建一个学生成绩管理对象为例，为您介绍对象间关联的相关内容。本实例中的对象里的班级对象是通过Lookup（字段类型）关联学生、班主任对象，学生对象通过LooKup关联课程成绩对象。请参见创建自定义数据对象和定义自定义对象的字段（Fields）新建下面的Class__CST、HeadTeacher__CST、Student__CST、Grades__CST对象和它们分别对应的自定义字段。 表1 对象说明 自定义对象名 自定义字段名 字段类型 对象中的字段说明 Class__CST number__CST Number 班级编号。 HeadTeacher__CST class__CST Lookup 班级编号。 该字段的取值来源于“Class__CST”对象。 Student__CST class__CST Lookup 班级编号。 该字段的取值来源于“Class__CST”对象。 Grades__CST student__CST Lookup 学生信息。 该字段的取值来源于“Student__CST”对象。 course__CST text 课程。 score__CST Number 成绩分数。 对象“Class__CST”这种类型的名字前面一般带命名空间，如“XXX__Class__CST”。 name字段是标准字段，在对象创建之后，已经存在，不需要手动创建： 班级Class__CST的name字段如填值：20届一班，二班，三班。 班主任HeadTeacher__CST的name字段如填值：王老师，李老师，陈老师。 学生Student__CST的name字段如填值：小明，小红，小兰。

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

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

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

自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的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中，在“调查问卷”页面单击“提交”按钮，由填写页面转跳到提交成功页面，并向提交成功页面传递此次“调查问卷”的记录id和页面名称时，可以通过编排“提交”按钮的点击事件行为，实现页面间转跳和传参。 图1 “调查问卷”页面 在弹出的JS事件编排面板左侧“页面类”分栏下有页面相关快捷代码选项，单击“页面转跳”弹出转跳页面配置页面，配置好转跳页面类型，例如要转跳到“调查问卷”提交成功页面，页面类型选“标准页面”并在页面列表下选择之前编辑好的提交成功页面“Questionnaires_submitPage”即可。 图2 配置转跳页面信息 表1 转跳页面配置页面参数说明 参数 描述 页面类型 转跳目标页面的类型，可选“标准页面”、“高级页面”和“自定义页面地址”。 页面列表 “页面类型”选择“标准页面”或“高级页面”将弹出已创建的“标准页面”或“高级页面”列表，“页面类型”选择“自定义页面地址”将要求输入页面地址。 打开新页面 是否在新页面打开目标页面。 单击“确定”按钮后将自动生成转跳代码至剪切板，只需要粘贴到面板即可，如下图所示。 图3 页面转跳代码示例 您可以不使用平台内置快捷代码生成功能，在需要的位置调用平台内置api：context.$page下的loadStdPage()函数实现页面转跳功能，该函数接受两个参数，第一个参数为目标页面名称或url，必填，第二个参数可选，为向目标页面传递的参数，传递的参数可用context.$page.param获取，如图3所示。 父主题： 标准页面

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

定义页面数据模型 进入应用开发工作台，打开一个标准页面，在标准页面开发界面下侧，切换到“模型视图”。 在“模型视图”中，单击“新增模型”。 添加模型，定义模型名称与来源，单击“下一步”，如图1所示。 图1 定义模型 AppCube支持四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 AppCube支持的模型类型、参数及API定义方法如图1所示。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义函数 开发者自由定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的更多信息请参考3.1 了解对象模型。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计4个方法。 $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。 若上一步来源选择“事件”，您需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 单击“确定”。

什么是执行后台逻辑 在标准页面执行后台逻辑，即在标准页面组件的事件中调用其他服务补充和实现当前事件行为。 例如，在员工信息录入页面中，在信息“提交”按钮的“点击”事件中调用API，将表单中的员工信息发送到数据库进行保存，或调用在标准页面中的服务编排或脚本并对需要保存的信息进行预处理。 标准页面执行后台逻辑一般是通过调用标准页面服务和调用第三方接口两种方式实现。 本节主要介绍调用标准页面服务，关于标准页面调用第三方接口的内容请参考如何调用第三方接口。 标准页面的服务主要分为服务编排（Flow）、脚本（Script）和API（公共接口）三种，对应的页面模型为“服务”。 图1 页面模型（服务）

方式二：在组件的事件代码中直接调用服务 除了将服务编排、脚本和API封装成模型调用外，还可以在组件的事件代码中直接调用服务。 在代码编辑页面左侧，单击“服务类”下的“服务编排”按钮，将得到调用服务编排的代码，您可以通过简单的修改，如服务编排的名称，版本号，即可初始化并得到服务编排对象。 系统提供了多种内置API用来操作服务编排对象，如run方法用来一次性执行完服务编排，也可以调用statrt、next、back、finish、resume、terminate等方法实现在服务编排特定阶段执行回调方法。 图7 服务编排快捷代码 在代码编辑界面左侧，单击“服务类”下的“脚本编排”按钮，将得到调用脚本编排的代码，通过简单的修改，如脚本编排的名称，即可初始化并得到脚本编排对象。调用平台内置run方法用来执行脚本。 图8 脚本编排快捷代码 在代码编辑界面左侧，单击“服务类”下的“服务请求”按钮，将得到调用API请求的代码，通过将样例代码中的url替换成真实业务url，配置请求参数，请求方法和请求头信息，调用平台内置run方法即可请求API。 图9 服务请求快捷代码 对象、服务编排和脚本编排也可以配置成API，通过API的方式进行调用，更多内容请参见10 API接口。

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

样例代码解读 您可以通过以下详细的脚本代码内容解读，对脚本有一个更具体的认识。 一般情况下，编写脚本的大致流程为： 按需引入平台标准库。 图12 引入平台标准库 定义出参、入参结构。 图13 定义入参 图14 定义出参 定义方法以及使用的对象。 图15 定义方法及使用对象 进行数据库操作。 图16 数据库相关操作 以下将通过解读一个脚本样例，带您了解脚本的总体结构框架及编写要求。 样例脚本： 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; }} 这个脚本分为3部分： 导入标准库或者其他模块。 上例中第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可实现在日志里打印过程输出，方便代码调试。

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

脚本编辑界面介绍 通过在应用下的文件夹（例如Logic）旁单击加号，选择“脚本”，输入脚本名称后，单击“添加”，或在脚本列表中单击，即可进入脚本编辑界面，如图2所示。 图2 脚本编辑界面 脚本编辑页面由三部分组成，介绍如下： 按钮区域。脚本编辑页面常用的图标按钮区，具体功能说明如表1所示。 表1 图标说明 图标 说明 / 获取锁、释放锁。 说明： 脚本仅在获取锁后，才能进行编辑。 / 单击即启用脚本，该图标高亮时，表示脚本当前已被启用。 单击即禁用脚本，该图标非高亮时，表示脚本当前未启用。 说明： 脚本开发完成后，需要单击启用，启用后脚本显示为启用状态，只有启用状态的脚本才能在被其他资源（例如服务编排、标准页面）调用时，搜索到。 保存脚本。 另存为脚本。 设置脚本的可见性、允许覆盖和描述。 执行脚本。 / 操作回退、撤销回退。 对已开发好的脚本代码进行性能检查、兼容性检查和静态检查配置。 说明： 代码检查的具体操作，请参见脚本代码性能检查规则说明。 在静态检查配置中，进行代码检查配置，需要具备“管理系统设置”权限。 添加权限的方法：在权限Profile的“基本信息”页签“系统权限”中，勾选“管理系统设置”权限。 刷新当前引入的脚本到最新状态。 启用后还可单击右上角查看该组件的调用关系图 版本对比、切换版本 代码编辑区域。 您可在该区域开发代码，实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力。将在代码编辑器进行介绍。 脚本编辑页面同样支持离线编辑器中的常规快捷键操作，例如“Ctrl+S”可以保存当前修改，“Ctrl+H”可以调出查找替换对话框，您也可以根据自己的开发习惯，尝试各种快捷键操作。 测试区。 运行代码后的显示区域。在“输入参数”页签输入参数后，单击测试区右侧的运行按钮，运行脚本，即可在“输出参数”页签查看输出结果是否正确，还可在“问题”和“日志”页签查看问题和日志。该区域右上方按钮分别为清除日志输出、运行脚本、保存输入参数按钮。

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

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

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

前提条件 发布成高级组件之前，您需要有一个设计好的标准页面，以下是本节中使用到的标准页面的创建过程。 您需要先创建标准页面“AccountForm”。 鼠标放在App下的页面文件夹旁会出现加号，单击加号，选择“标准页面”。 填写新建页面的标签“AccountForm”，系统自动生成名称，单击“添加”。 从左侧组件页签拖一个表单组件到开发页面。 配置数据源，在“请选择数据对象”中选择已创建的数据模型，并勾选需要展示的该对象字段，单击“下一步”。 图1 配置数据源 勾选表单需要显示的按钮，单击“完成”。 单击页面上方保存按钮。

布局方式 高级页面支持在如下两种布局模式下使用组件搭建页面（具体说明请查阅高级页面布局）： 绝对布局：在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。 流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。

快速开始 在进行高级页面设计前，先向您初步介绍下高级页面的开发流程。本章以构建包含地图元素的高级页面为例，为您展示如何搭建高级页面。 新建高级页面。 在应用开发工作台单击Page目录所在行的“+”按钮，选择“高级页面”，输入页面标题、页面路径以及选择布局类型后，单击“添加”按钮即可。 图2 新建高级页面 搭建高级页面。 单击，打开组件列表，从组件列表中找到地图组件，将其拖入画布中，在画布中可以拖拽组件的位置和大小，然后保存页面。 图3 搭建高级页面 进行组件属性配置。 本章以改变地图组件样式及精确修改其位置为例，为您展示如何进行组件属性配置（组件属性通常可通过“高级设置”弹窗和组件属性栏配置）。 选中组件，单击鼠标右键，选择“高级设置”可进入组件高级设置页面；选中组件，可在右侧组件属性设置栏，进行属性配置。 图4 组件属性配置 如何进行高级页面的预览与发布。 页面搭建完成后，可预览当前页面效果。 依次单击高级页面功能菜单中的和按钮（或发布后弹出的网址），可跳转到预览页面。 图5 高级页面的预览与发布