华为云用户手册

场景描述 实现场景：由于呼吸机资源缺乏，为了有效利用剩余的呼吸机，需要提供呼吸机申请服务进行资源调度。申请人调用服务接口提供医院信息和申请呼吸机资源数量，服务根据系统中处于空闲状态下的呼吸机资源判断资源是否充足，在资源充足的情况下返回被申请的呼吸机信息并修改系统中相应呼吸机的医院信息和状态。 实现方案：使用服务编排实现上述功能，实现逻辑如下： 通过调用查询对象数据中创建的服务编排，获取系统中空闲状态下的呼吸机信息。 通过调用使用服务编排开发业务的基本逻辑中创建的服务编排，进行资源是否充足的判断，返回被申请的呼吸机信息。 通过决策图元判断上一步骤返回的申请呼吸机信息，做出下一步操作。 走“ResourceEnough”分支：在资源满足的情况下，调用修改对象数据中创建的服务编排，修改系统中被申请的呼吸机的医院信息和状态。 走“ResourceNotEnough”分支：在资源不足的情况下，返回错误信息。 图1 呼吸机申请服务总体流程

如何开发呼吸机申请服务 参考如何开发服务编排中操作，创建“名称”和“标签”为“RespiratorApply”的服务编排。 参照表1，定义服务编排用到的变量，并设置该服务编排的入参和出参。 表1 变量说明 变量名 变量类型 变量说明 num 数字 申请的呼吸机数量。 hospital 文本 申请呼吸机的医院。 msg 文本 申请结果。 RespiratorInfos Respirator对象数组 系统中空闲状态下的呼吸机资源数组（后用于存放信息修改后的资源数组）。 RespiratorRecs Respirator对象数组 此次申请的原始呼吸机资源数组。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“变量”后的。 图2 创建变量 单击新增变量后的“...”，选择“设置”。 图3 设置变量 配置数字类型的变量“num”，单击“保存”。 图4 配置变量 表2 普通变量参数说明 参数 参数说明 名称 新增变量的名称，直接输入“num”。 数据类型 变量的数据类型，根据业务需求直接在下拉框中选择。 本示例设置为“数字”。 默认值 变量的默认取值。 本示例不用配置。 描述 新增变量的描述说明，建议填写该变量的作用。 是否为数组 是否为数组型变量即集合变量。 本示例不勾选。 参考上述操作，创建文本类型的变量“hospital”、“msg”。 图5 成功创建变量 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 图6 创建对象变量 参考上述操作，新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图7 配置数组类型对象变量 参考上述操作，创建数组类型的对象变量“RespiratorRecs”，注意要选中“是否为数组”。 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将变量num、变量hospital拖拽到“入参”中，将变量msg、对象变量RespiratorRecs拖拽到“出参”中。 图8 配置开始图元 该服务编排主要使用了三种图元，分别是“子服务编排”“赋值”、“决策”图元，按照下图将相关图元拖拽到画布中对应位置。 图9 拖拽图元 在画布上，把鼠标放在起点图元上，从“+”拖动鼠标，在起点图元和“子服务编排”图元Flow0间增加连线。 配置“子服务编排”图元Flow0。 单击画布中的“子服务编排”图元Flow0，在“基本信息”页面中配置图元标签为“查询呼吸机资源”，名称为“SelectRespirator”。 图10 配置“子服务编排”图元基本信息 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择查询对象数据创建的服务编排“SelectRespirator”。配置输出参数，从“全局上下文”页面拖拽变量到“目标”中。 图11 配置子服务编排图元Flow0 如上图配置，将调用查询对象数据中开发的查询对象记录服务编排，并将查询结果存放到对象变量RespiratorInfos中。 从“子服务编排”图元“SelectRespirator”，连向“子服务编排”图元Flow1。 配置“子服务编排”图元Flow1。 单击画布中的“子服务编排”图元Flow1，在“基本信息”页面中配置图元标签为“处理呼吸机资源”，名称为“ProcessRespiratorResouce”。 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择使用服务编排开发业务的基本逻辑创建的服务编排“ProcessRespiratorResource”，配置入参和出参。 图12 配置子服务编排图元Flow1 如上图配置，将调用使用服务编排开发业务的基本逻辑中开发的资源处理服务编排，并将查询对象记录服务编排中返回的空闲状态下呼吸机资源以及申请医院、资源数量作为入参传入，返回申请结果、被申请的呼吸机资源以及修改信息后的呼吸机资源数组存入相应对象变量。 从“子服务编排”图元“ProcessRespiratorResouce”连向“决策”图元Decision0。 配置“决策”图元Decision0。 单击画布中的“决策”图元Decision0，在“基本信息”页面中配置图元标签为“判断资源是否充足”，名称为“judgeResource”。 在“决策”页面中，单击“默认”结果，将名称设置为“ResourceEnough”，单击“新增”，新增一个名为“ResourceNotEnough”的结果，并按照下图进行配置。 图13 配置默认结果 图14 新增“ResourceNotEnough” “ResourceNotEnough”结果表示当返回的资源数组为空时，代表资源不足，走向赋值图元设置错误信息。默认的“ResourceEnough”结果代表资源充足，将进行系统中数据的修改。 从“决策”图元“judgeResource”连向“子服务编排”图元Flow2，连线类型为“ResourceEnough”，从“决策”图元Decision0连向“赋值”图元Assignment0，连线类型为“ResourceNotEnough”。 配置“子服务编排”图元Flow2。 单击画布中的“子服务编排”图元Flow2，在“基本信息”页面中配置图元标签为“修改呼吸机资源状态”，名称为“UpdateRespiratorResource”。 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择修改对象数据中创建的服务编排“UpdateRespirator”，并配置输入参数。 图15 配置子服务编排图元Flow2 如上图配置，将调用修改对象数据中开发的修改对象记录服务编排，根据传入的对象变量RespiratorInfos对系统中的对象数据进行修改。 配置“赋值”图元Assignment0。 单击画布中的“赋值”图元Assignment0，在“基本信息”页面中配置图元标签为“设置错误信息”，名称为“setError1”。 如下图所示，单击，在“赋值”页面进行配置赋值语句，在资源不足的情况下设置相应的错误信息。 图16 配置赋值图元Assignment0 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 进行测试。 当资源不足时，测试服务是否报错并返回相应错误信息。 设置输入参数，单击“运行”，人民第66医院需要申请5台呼吸机。 { "hospital": "人民第66医院", "num": 5} 检查输出页签的结果，是否符合预期。 返回如下信息，表示资源不足，申请失败。 图17 输出结果 当资源充足时，返回信息“资源充足，呼吸机申请成功！”，以及申请的呼吸机资源信息，并修改系统中对象数据。 打开创建对象数据中创建的服务编排“CreateRespirator”，单击页面上方的，运行服务编排。 设置输入参数，单击“运行”，创建5台某医院空闲的呼吸机。 其中，“CNAME”为命名空间名称，请替换为环境中实际配置的命名空间。 { "RespiratorInfos": [ { "name": "呼吸机1", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机2", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机3", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机4", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机5", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" } ]} 打开本节开发的服务编排“RespiratorApply”，单击页面上方的，运行服务编排。 设置输入参数，单击“运行”，人民第66医院需要申请5台呼吸机。 { "hospital": "人民第66医院", "num": 5} 检查输出页签的结果，是否符合预期。 资源充足时，如下图所示返回信息“资源充足，呼吸机申请成功！”，以及申请的呼吸机资源信息。 图18 输出界面 单击页面上方的，启用服务编排。

脚本图元参数配置 在基本中，拖拽“脚本”图元到右侧画布中。 选中画布中的脚本图元，单击，设置基本信息。 表1 基本信息参数说明 参数 参数说明 标签 脚本图元的名称，用于在页面展示。系统会自动填入该值，格式为Script序号，序号从“0”开始，表示同类型图元序号。 名称 图元的标识，请确保在当前服务编排中唯一。 描述 图元的描述信息。 单击，选择脚本、设置输入参数和输出参数。 图1 配置脚本 表2 脚本图元配置参数说明 参数 参数说明 脚本 调用的脚本名称，只有在启用状态下的脚本才能被服务编排调用。 输入参数/目标 脚本的输入参数名称。 单击“新增行”，在下拉框中选择脚本输入参数的名称。 输入参数/源 服务编排中的变量，为目标赋值。 可直接填写，也可以拖入全局上下文变量，将服务编排中的变量赋值给脚本中的输入参数。 输出参数/源 脚本的输出参数名称。 单击“新增行”，在下拉框中选择脚本输出参数的名称。 输出参数/目标 服务编排中的变量，脚本中的输出参数赋值给服务编排中的变量。 拖入全局上下文变量，将脚本的输出参数赋值给服务编排中的变量。

记录创建图元参数配置 在基本中，拖拽“记录创建”图元至画布中。 选中记录创建图元，单击，设置基本信息。 表1 基本信息参数说明 参数 参数说明 标签 记录创建图元的标签，用于在页面展示。系统会自动填入该值，格式为RecordCreate序号，序号从“0”开始，表示同类型图元序号。 名称 该图元的标识，请确保在当前服务编排中唯一。 描述 该图元的描述信息。 使用快速创建模式 是否启用快速创建模式。 若勾选该参数，表示为快速模式。该模式可以创建一条或者多条记录，仅需要配置对象的对象变量（与对象关联的变量）或对象变量数组。该图元负责将对象变量或对象变量数组的值写入数据库。当对象变量为数组时，则实现创建多条记录。创建成功后，返回的记录ID自动保存在对象变量中。创建记录的各个字段的值为对象变量中的值，因此一般需要在创建记录之前先给对象变量进行赋值。 不勾选，表示为普通模式。该模式下每次执行到该图元仅创建一条记录，需要配置要创建记录的对象名，对象中字段的值，返回的记录ID保存到变量名中。 默认不勾选。 单击，在“记录创建”页面进行配置。 若上一步勾选“使用快速创建模式”，则需要指定一个预先定义的对象变量或者对象变量数组，并将该对象变量或对象变量数组拖拽到“变量”输入框中，使用该对象变量或对象变量数组的值创建新记录。例如，如下图所示，使用“accountCreate”对象变量的值创建新记录。 图1 快速创建模式 表2 快速创建模式参数说明 参数名 参数说明 变量 预先定义的对象变量或对象变量数组，使用该对象变量或者对象变量数组的值创建新记录。 从全局上下文拖拽或直接输入对象变量/对象变量数组。 当前服务编排出现错误时回滚 勾选表示在服务编排中，当后续图元失败的情况下，就可以回滚到上一流程。 不勾选，在服务编排中，当出现后边图元失败的情况下，对象记录操作的图元就不回滚。 默认为勾选。无特殊要求，请不要更改设置。 若上一步未勾选“使用快速创建模式”，则需要指定对象并为对象的字段赋值来创建记录。例如，如下图所示，为“Account”对象新增“name”为“Lily”的数据记录，在变量“var_record_id”中保存新建的记录ID。 图2 普通创建模式 表3 普通创建模式参数说明 参数 参数说明 对象 指定的具体对象。 当前服务编排出现错误时回滚 当前服务编排出现错误时，回滚到上一流程。 默认为勾选。无特殊要求，请不要更改设置。 赋值 选中对象后，该赋值区域“目标”列会出现该对象的字段。如果需要给多个字段赋值，则单击“新增行”，定义其他字段的值。 在“目标”中选择需要赋值的对象字段，“源”则可从全局上下文拖拽变量或者直接输入“{!变量名}”。 变量 将创建的记录ID分配到该变量中，以便在服务编排中引用。 从全局上下文拖拽或直接输入文本类型变量。

子服务编排图元参数配置 在基本中，拖拽“子服务编排”图元到右侧画布中。 选中画布中的子服务编排图元，单击，配置基本信息。 表1 基本信息参数说明 参数 参数说明 标签 子服务编排图元的名称，用于在页面展示。系统会自动填入该值，格式为Flow序号，序号从“0”开始，表示同类型图元序号。 名称 图元的标识，请确保在当前服务编排中唯一。 描述 图元的描述信息。 单击，选择服务编排实例、输入参数和输出参数。 图1 配置子服务编排 表2 子服务编排图元配置参数说明 参数 参数说明 服务编排实例 选择服务编排的名称。 只有在启用状态下的服务编排，才能作为子服务编排被其他服务编排调用。 输入参数/目标 子服务编排的输入参数名称。 单击“新增行”，在下拉框中选择子服务编排输入参数的名称。 输入参数/源 服务编排中的变量，为目标赋值。 可直接填写，也可以拖入全局上下文变量，将服务编排中的变量赋值给子服务编排中的输入参数。 输出参数/源 子服务编排的输出参数名称。 单击“新增行”，在下拉框中选择子服务编排输出参数的名称。 输出参数/目标 服务编排中的变量，子服务编排中的输出参数赋值给服务编排中的变量。 在全局上下文变量中，将子服务编排的输出参数赋值给服务编排中的变量。

修改对象数据 介绍如何通过记录更新图元，修改Respirator对象数据。 参考如何开发服务编排中操作，创建“名称”和“标签”为“UpdateRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的入参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图15 新建对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图16 配置开始图元 拖拽“基本”目录中的“记录更新”图元到画布中，并与“开始”图元进行如下连线。 图17 拖拽图元 配置“记录更新”图元。 单击画布中的“记录更新”图元，在“基本信息”页面中，配置图元标签及名称为“UpdateRespirator”，并勾选“使用快速更新模式”。 图18 配置“记录更新”图元基本信息 单击，在“记录更新”页面，将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。 图19 配置“记录更新”页面 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 在服务编排运行页面，设置输入参数，单击“运行”。 在“输入参数”中，输入如下参数，修改Respirator对象数据，更新状态为“使用中”。其中，“CNAME”替换为环境中实际配置的命名空间，“id”取值替换为查询对象数据中查询出呼吸机的id。 { "RespiratorInfos": [ { "id": "cnE0000000m5Kvrl7kSe", "CNAME__status__CST": "使用中" }, { "id": "cnE0000000m5KvrtM7EW", "CNAME__status__CST": "使用中" } ]} 单击页面上方的，激活服务编排。

删除对象数据 介绍如何通过记录删除图元，删除Respirator对象数据。 参考如何开发服务编排，创建“名称”和“标签”为“DeleteRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的出参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图20 新建对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图21 配置开始图元 拖拽“基本”目录中的“记录删除”图元到画布中，并连接“开始”和“记录删除”图元。 配置“记录删除”图元。 单击画布中的“记录删除”图元，在“基本信息”页面中配置图元标签及名称为“DeleteRespirator”，并勾选“使用快速删除模式”。 单击，在“记录删除”页面将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。 图22 配置“记录删除”页面 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 设置输入参数，单击“运行”，删除2条对象记录。 其中，“id”取值替换为查询对象数据中查询出的呼吸机的id。 { "RespiratorInfos": [ { "id": "cnE0000000m5Kvrl7kSe" }, { "id": "cnE0000000m5KvrtM7EW" } ]} 单击页面上方的，启用服务编排。

创建对象数据 由于服务编排中内置的记录创建图元无法批量创建，需要循环调用记录创建图元，进行批量创建。 参考如何开发服务编排中操作，创建“名称”和“标签”为“CreateRespirator”的服务编排。 参照表1，定义服务编排用到的变量，并设置该服务编排的入参。 表1 变量说明 变量名 变量类型 变量说明 RespiratorInfo Respirator对象 系统中空闲状态下的呼吸机资源数组元素。 RespiratorInfos Respirator对象数组 系统中空闲状态下的呼吸机资源数组。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 图1 添加对象变量 设置对象变量名称为“RespiratorInfo” ，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），单击“保存”。 图2 配置对象变量 服务编排中只允许引用当前应用工程下的资源（例如对象、脚本），上图中的对象需要和服务编排在同一应用中。 按照上述操作，新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图3 配置数组类型对象变量 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图4 配置开始图元 拖拽快捷目录中的“循环”图元以及“基本”目录中的“记录创建”图元到画布中，并与“开始”图元进行如下连线。 图5 拖拽图元 配置“循环”图元。 单击画布中的“循环”图元，在“基本信息”页面中配置图元标签和名称为“LoopRespiratorInfos”。 图6 配置“循环”图元基本信息 单击，进入“循环”配置页面，展开“全局上下文”页面，拖拽对象变量RespiratorInfos到“数组”输入框中，拖拽对象变量RespiratorInfo到“元素”输入框中。 图7 配置“循环”页面 如上图配置，能够将数组对象变量RespiratorInfos进行遍历，并将数组中的每个元素放置到对象变量RespiratorInfo中，进行下一步操作。 配置“记录创建”图元。 单击画布中的“记录创建”图元，在“基本信息”页面中配置图元标签及名称为“CreateRespirator”，并勾选“使用快速创建模式”。 图8 配置“记录创建”图元基本信息 单击，在“记录创建”页面，展开“全局上下文”页面，将对象变量RespiratorInfo拖拽到“变量”输入框中。 图9 配置“记录创建”页面 单击页面上方的，保存服务编排。 保存后，单击，运行服务编排。 在服务编排运行页面，设置输入参数，单击“运行”，创建3条对象记录。 其中，“CNAME”替换为环境中实际配置的命名空间。 { "RespiratorInfos": [ { "name": "呼吸机1", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机2", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机3", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" } ]} 单击页面上方的，启用该服务编排。

查询对象数据 介绍如何通过记录查询图元，查询Respirator对象数据中“状态”为“空闲”的对象记录。 参考如何开发服务编排中操作，创建“名称”和“标签”为“SelectRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的出参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图10 创建数组类型对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“出参”中。 图11 配置开始图元 拖拽“基本”目录中的“记录查询”图元到画布中，并与“开始”图元进行如下连线。 图12 拖拽图元 配置“记录查询”图元。 单击画布中的“记录查询”图元，在“基本信息”页面中，配置图元标签及名称为“SelectRespirator”，并勾选“使用快速查询模式”。 图13 配置“记录查询”图元基本信息 如下图所示，单击，在“记录查询”页面中，将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。在“条件”中单击“新增行”，新增条件语句，“排序”为可选配置。 图14 配置“记录查询”页面 条件中的“值”，需要使用英文双引号。 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 由于该服务编排没有配置入参，直接单击“运行”，即可查询对象数据。 查看是否返回所有状态为空闲的对象记录。 { "interviewId": "002N0000XXXXXXx5Cy", "outputs": { "RespiratorInfos": [ { "createdBy": "10gd000XXXXXX7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5Kvrl7kSe", "lastModifiedBy": "10gd000XXXXXXq7Pea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机1", "owner": "10gd0000XXXXXXq7Pea", "owner.name": "gonCNAMEhen" }, { "createdBy": "10gd000000bZHUAq7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5KvrtM7EW", "lastModifiedBy": "10gd0000XXXXXXea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机2", "owner": "10gd000000bZHUAq7Pea", "owner.name": "XXX" }, { "createdBy": "10gd000XXXXXX7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5KvrykUhk", "lastModifiedBy": "10gd0000XXXXXXPea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机3", "owner": "10gd000000bZHUAq7Pea", "owner.name": "XXX" } ] }} 单击页面上方的，启用服务编排。

创建普通变量或集合变量 在服务编排设计器右侧，选择。 在全局上下文页面，单击“变量”后的。 图1 创建变量 单击新增变量后的“...”，选择“设置”。 设置页面参数，单击“保存”。 图2 配置变量 表1 变量参数说明 参数 参数说明 名称 新建变量的名称。 数据类型 新建变量的数据类型，直接在下拉框中选择即可。 默认值 变量的默认取值。 描述 新建变量的描述信息。 是否为数组 是否为数组型变量即集合变量。

创建私有结构体 服务编排中如果涉及复杂结构体参数，可以先创建全局或私有结构体，并用作参数类型。 创建全局结构体和私有结构体后，再参考创建对象变量/结构体变量/事件变量中操作，创建全局结构体变量和私有结构体变量，作为服务编排的参数类型。 在服务编排设计器右侧，选择，在私有结构体页面单击“新增”。 该“私有结构体”页面有两个“新增”按钮，单击上面的“新增”按钮，是通过设置页面参数新建私有结构体。单击下面的“新增”按钮，是通过输入JSON Schema类型的数据源码定义私有结构体。 图5 添加私有结构体类型 （若上一步单击“私有结构体”页面上方的“新增”按钮，请执行该步骤）设置页面参数。 在“基本信息”中，输入结构体名字、描述信息。 在“结构体成员”中，设置自定义成员变量，包括设置成员变量的名称、数据类型、是否必填、是否是集合和描述信息等。单击“新增”，可增加成员变量，支持设置全局结构体或私有结构体成员变量。当私有结构体的成员变量包含结构体类型时，您需要提前定义成员结构体。例如，下图中成员变量“hobby”为私有结构体类型，需要提前创建“create”私有结构体。 图6 配置私有结构体 （若上一步单击“私有结构体”页面下方的“新增”按钮，请执行该步骤）在“创建JSON Schema”页面中，定义结构体名称，在“JSON源码”中输入数据源码，单击，系统会进行校验，转换成服务编排中的结构体类型，单击“保存”。 图7 创建JSON Schema 数据源码示例如下： {"name": "xiaoming","age": 18,"father": {"name": "daliu","gender":"male"},"brother": {"name": "xiaolei","gender":"male"}} 创建成功后，页面显示如下。 图8 创建成功 该方式创建的结构体中，包含成员结构体时，成员结构体具体定义不会在界面显示，且其他结构体不可引用。 JSON结构体支持嵌套，例如上述创建的“family”结构体，在“JSON Schema结构体”区域再次单击“新增”，新增“company”结构体，里面“ceo”嵌套引用“family”结构体，如下图所示，在定义结构体输入值时，您可以输入“$”符号，选择当前服务编排中的其它结构体进行嵌套引用。

如何创建服务编排 登录新版应用设计器。 在左侧导航栏中，选择“逻辑”。 单击编排后的“+”，参照表1配置参数，单击“添加”。 图2 创建服务编排 表1 创建服务编排参数说明 参数 参数说明 创建一个新的服务编排 创建一个新的服务编排流程。 使用已有的服务编排 基于同一租户或基线里已有的服务编排，来创建一个服务编排，方便用户快速继承已有服务编排的配置，增加效率。 类型 服务编排的类型。 Autolaunched Flow：自启动Flow，在接口调用后会立即执行服务编排模型定义的逻辑。 Event Trigger：事件触发的服务编排，在事件触发时才会开始执行服务编排模型定义的逻辑。当选择该类型时，您需要配置具体的事件以及条件规则。 标签 新建服务编排的标签名，用于展示。 名称 系统会自动在名称前添加{命名空间}__，当其他功能调用服务编排时，调用的是服务编排的名称，而不是标签。 描述 新建服务编排的描述信息。

初识服务编排编辑器 服务编排编辑器页面由上方按钮区域、左侧图元面板区域、中间画布区域和右侧参数配置区域四部分组成。 图3 服务编排编辑器页面 表2 区域说明 区域 区域说明 按钮区域 功能按钮区域，包括锁定、解锁、启用（或者禁用）、保存、另存为新版本或者新服务编排、执行服务编排、操作回退、撤销回退等，支持快捷键操作，即可脱离鼠标直接用键盘操作。 服务编排启用后，单击页面右上角的，可查看该组件的调用关系图。 图元面板区域 图元面板区域呈现服务编排编辑器的图元算子。服务编排编辑器以图元算子为基础，您可直接将图元算子拖入画布区域进行逻辑编排。图元算子包括如下五类： 基本：基本类型图元，能够实现在服务编排中进行脚本或者服务编排的调用，增/改/删/查对象记录，以及发送邮件、发送事件的功能。 逻辑：逻辑判断图元，能够实现在服务编排中进行变量赋值Assignment、循环Loop、跳出循环Break、决策Decision、等待Wait的功能。 BO：商业对象图元，即将封装好的BO能力作为服务编排中的一个节点，实现特定的业务功能图元。 Native服务：原生服务图元，用于调用原生服务提供的接口。 连接器：与第三方系统对接的图元，例如将短信发送、支付等第三方连接器作为当前服务编排中的一个节点图元。 画布区域 服务编排设计操作区域，在该区域可对服务编排进行具体流程设计、图元放置。 配置区域 整个服务编排或图元的属性设置区域。选择画布区域服务编排中具体图元时，右侧配置区域为该图元的属性设置区域。选择服务编排中空白区域或者开始图元时，右侧配置区域为该服务编排的设置区域。 ：服务编排基本信息配置菜单。 ：显示服务编排类型、是否启用。 ：整个服务编排的入参、出参，可从“全局上下文”中，选择变量拖拽到服务编排的入参、出参中。 ：服务编排用到的私有结构体。 ：全局上下文变量，主要用于创建服务编排中需要使用的变量、公式以及结构体变量等。

创建您的第一个服务编排 此处以创建一个根据传入的用户名，配置欢迎信息的简单业务场景为例，向您介绍如何创建一个服务编排。 参考如何创建服务编排中操作，创建名称和标签为“HelloFlow”的服务编排。 创建变量。 在服务编排设计器中，单击，进入全局上下文页面。 单击“变量”后的，创建表3中的变量。 图4 创建变量 表3 变量说明 变量名 类型 变量说明 userName 文本 传入的用户名 message 文本 欢迎信息 在全局上下文中，除了创建基本类型的变量，还可以创建“常量”、“公式”、“对象变量”、“系统变量”和“全局常量”，详情请参见变量及输入输出参数配置。 单击，配置服务编排的输入输出参数。 图5 配置输入输出参数 将“逻辑”中的“赋值”图元，拖拽到画布中。 赋值图元可以实现对全局上下文中变量等参数进行赋值，其他图元的详情介绍，请参见图元配置。 图6 选择赋值图元 配置图元。 选择赋值图元，单击。 在“赋值”页面中，单击“新增行”，参照下图将创建的变量拖拽到相应的位置。 将“"Hello,"”赋值给message变量，并将userName变量拼接到message变量中，赋值语句将从上往下依次执行。 图7 配置赋值图元 连接图元指定逻辑关系，即从开始图元连向赋值图元，表示服务编排开始执行后，执行赋值图元的赋值语句。 图8 连接图元 单击页面上方的，保存服务编排。 单击，进入服务编排调试页面。 在输入参数中，输入如下内容，并单击“运行”。 { "userName": "AppCube"} 运行结果如下，输出“Hello,AppCube”。 图9 运行结果 单击页面上方的，启用服务编排。 调试已创建的服务编排。 在新版应用设计器左侧导航栏中，选择“集成”。 单击开放接口后的，新建一个hellowFlow开放接口，单击“保存”。 图10 新建开发接口hellowFlow 在新版应用设计器左侧导航栏中，选择“集成”。 单击自定义接口后的，选择“查看”。 图11 查看API 在预览页面，单击“测试一下”，输入示例模型，单击“运行”。 图12 测试接口 图13 查看API测试结果

服务编排基本能力 拖拉拽式编排流程 以往的传统编程，需要进行变量的声明并编写相应逻辑代码进行服务的开发。使用服务编排进行服务开发，能够通过拖拉拽的方式，将配置项创建的变量以及服务编排中提供的各种功能进行编排，并以流程的方式将服务所要实现的功能展现出来。整个开发过程中无需进行代码的编写，简单快捷，并能够图形化展示服务的逻辑。 逻辑处理 服务编排中提供了逻辑处理的图形化元件，包括赋值、循环、跳出循环、决策和等待。通过这些图元能够实现基本的逻辑处理，并图形化展示，便于开发者理解，详情可参见操作步骤中对逻辑处理图元的使用。 对象处理 服务编排中提供了对象处理的图形化元件，包括记录创建、记录查询、记录更新和记录删除。通过这些图元能够对通过平台创建的自定义对象或标准对象进行相应的增、删、改、查操作，简化处理对象数据的流程，提高开发效率，详情可参见如何使用服务编排开发数据的增删改查中对象处理图元的使用。 服务单元组合脚本、原生服务、BO和第三方服务 服务编排中提供了服务单元组合的图形化元件，包括脚本、子服务编排、原生服务、BO和连接器。通过这些图元能够将平台中已开发完成的服务集成到服务编排中，并重新进行组合，快速扩展出更丰富的业务功能。

服务编排与模块间调用关系 服务编排将平台提供的部分功能模块进行了封装，并提供了平台其他模块调用服务编排的能力，下面介绍其他模块与服务编排是如何进行相互调用的。 脚本 在服务编排中，可以通过配置脚本图元，选择当前应用中的脚本进行脚本的调用。 在脚本中，可以通过引入sys库，再执行sys.invokeFlow({Flow_Name})，进行服务编排的调用。其中，Flow_Name为服务编排的名称。 对象 在服务编排中，可以通过配置记录创建、查询、更新、删除图元，对当前应用中的对象记录进行增删改查，详情请参见如何使用服务编排开发数据的增删改查。 标准页面 在标准页面的模型视图中，新建服务模型，能够绑定服务编排，进行服务编排的调用。 工作流 在工作流中，可以通过配置“调用服务编排”活动，选择相应的服务编排进行服务编排的调用。 API接口 在新建接口时，选择资源类型为“服务编排”，并选择相应的服务编排，即可将服务编排绑定到服务接口上，通过API接口进行服务编排的调用。 BO 在服务编排中，调用BO（BO是封装了完整的数据模型、业务逻辑、页面展现的软件单元）进行使用，详情请参见BO图元。 连接器 在服务编排中，调用与第三方系统对接的接口，如对接短信发送、云存储、系统中已定义的Action等，详情请参见连接器图元。 服务编排中只允许调用当前应用工程下的资源，如对象、脚本。例如，服务编排A中需要调用脚本B，请确保A和B处于同一应用中，若需要调用的资源不在同一应用中，则在服务编排A所在的应用中新建脚本B，或选择“使用已有脚本”导入脚本B，再在服务编排A中调用该脚本。 图1 通过“使用已有脚本”导入脚本

操作步骤 登录新版应用设计器。 在左侧导航栏中，选择“页面”。 在对应的高级页面中，单击，选择“设置”。 图1 进入设置页面 在“水印”页签，参考如何设置页面水印设置参数，单击“保存”。 图2 水印设置 图3 设置后效果 表1 参数说明 参数 说明 启用水印 是否给该页面启用水印。 重复渲染 当需要设置满页面水印时，开启该项。 水印内容 设置水印文本内容。 当前用户 当需要设置水印内容为当前用户名时，可开启该项。 开启后，“水印内容”中的文本不生效。 水印长度 水印矩形框的长度。 水印宽度 水印矩形框的宽度。 水平起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的水平起始位置。 垂直起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的垂直起始位置。 字体颜色 水印字体的颜色。 字体大小 水印字体的大小。 旋转角度 水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度 水印的透明度设置。

步骤1 创建WebSocketAlarmEvent告警事件 创建事件。 登录新版应用设计器，在左侧导航栏中，选择“数据”。 单击事件后的，进入添加事件页面。 选择“创建新事件”，输入标签“WebSocketAlarmEvent”，单击“添加”。 单击名称对应的输入框，系统会根据标签自动生成名称。系统实际创建的事件名称为“CNAME__WebSocketAlarmEvent__e”，其中“CNAME__”为租户命名空间namespace，“__e”后缀代表是自定义事件。 图2 添加WebSocketAlarmEvent事件 在事件详情页面，选择“自定义参数”页签，单击“新建”。 设置标签、名称和字段类型，单击“保存”，添加事件自定义参数AlarmTitle。 图3 添加事件自定义参数 重复3中操作，创建事件自定义参数AlarmContent、AlarmDate。 表3 事件自定义参数说明 标签 名称 字段类型 AlarmContent 单击名称对应的输入框，系统根据标签自动生成名称。 文本 AlarmDate 单击名称对应的输入框，系统根据标签自动生成名称。 日期/时间 启用告警事件。 在事件详情页面，选择“基本信息”页签。 单击页面右上方的“启用”，启用该事件。 启用成功后，“启用”按钮会变为“禁用”按钮，同时“是否启用”标签变为状态。 图4 启用告警事件 消息事件只有启用成功后，该事件在服务编排或WebSocket中，才会有效。事件启用后，不可编辑，若需要对事件进行参数修改，请先单击“基本信息”下的“禁用”按钮，禁用该事件。

步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件，并在服务编排中配置全局变量和系统（日期/时间）变量为事件传递参数。 如果想快速了解和验证WebSocket使用，可不必创建WebSocketAlarmFlow告警服务编排，采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤，直接执行步骤3 开发alarmDisplayWidget告警展示组件，并在方法一：直接触发事件验证中采用方法1（直接触发事件验证）进行效果验证。 创建编排。 登录新版应用设计器，在左侧导航栏中，选择“逻辑”。 单击编排的，进入添加服务编排。 选择“创建一个新的服务编排”，输入标签“WebSocketAlarmFlow”，单击“添加”。 单击名称对应的输入框，系统会根据标签自动生成名称。 图5 创建服务编排WebSocketAlarmFlow 在服务编排画布左侧，单击“基本”，将“发送事件”图元拖入画布中。 图6 拖入“发送事件”图元 添加添服务编排变量。 选中“发送事件”图元，单击画布右侧。 单击“全局上下文”，进入上下文页面。 单击“变量”后的，添加表4中变量。 图7 配置全局变量 表4 告警服务编排的变量 名称 数据类型 AlarmTitle 文本 AlarmContent 文本 在“发送事件”图元中，配置1中创建的事件CNAME__WebSocketAlarmEvent__e（需替换为用户实际创建的事件名称）。 参考下图配置输入参数，通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图8 事件图元的配置 连接所有图元。 图9 连接图元 选中“开始”图元，单击，参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入，告警服务编排的入参有AlarmTitle和AlarmContent两个。 图10 配置入参 单击页面上方的，保存服务编排。 单击，启用服务编排。 服务编排只有启用后，才会生效。服务编排在启用后，不可编辑，若需要对其中的图元或参数进行修改，请先单击，禁用该服务编排。

前台页面常用调测方法 在高级页面的开发中，常借助浏览器内置的开发者工具对样式或功能问题进行定位和分析。下面以Chrome浏览器为例，简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。 图1 Elements页签查看调试DOM和CSS样式 打印日志信息 在Console页签下，可使用控制台打印日志信息。在Sources页签下，调试JavaScript时常用方法是将多个console.log()语句插入代码，重新加载页面后，可以在Console页签中，查看到打印的消息。Sources页签主要包括三个部分，左侧为页面请求文件列表，中间为选择文件的文件内容，右侧为JavaScript调试窗格。 想要在JavaScript中打印日志，需要找到相应文件，查找相关代码，然后插入console.log()。 图2 Sources页签布局 调用低代码平台API 在Console页签下，可使用控制台调用低代码平台提供的API，以获取相关信息进行调试。 图3 调用低代码平台API 断点调试 在Sources页签下，可以设置断点来调试JavaScript。使用断点，DevTools会在暂停时及时显示所有变量值。Chrome开发者工具，提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点，请根据调测的实际需求选择合适的断点。断点的类型和使用场景，如表1所示。 表1 Chrome断点类型及使用场景 断点类型 使用场景 代码行 在确切的代码区域中。 条件代码行 在确切的代码区域中，且仅当其他一些条件成立时。 DOM 在更改或移除特定DOM节点或其子级的代码中。 XHR 当XHR网址包含字符串模式时。 事件 在触发点击等事件后运行的代码中。 侦听器 在引发已捕获或未捕获异常的代码行中。 异常函数 任何时候调用特定函数时。 代码行断点调试是最为常见的断点调试方法， 设置代码行断点的方法是找到请求文件，在Sources左侧请求文件列表按照目录查找，也可以借助“Ctrl+F”搜索关键词找到相关文件。在Sources中间文件内容区域，找到要设置断点的代码行，单击行号，出现蓝色图标，这意味着这行代码上有一个代码行断点。如图4所示，在global_BubbleChartWidget.js文件的49行代码处，设置了一个代码行断点。 刷新此网页，脚本运行始终会在执行此行代码之前暂停，可单击右侧调试窗格的按钮进行单步调试，或者单击调试窗格的按钮继续执行脚本。 图4 代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。 图5 模拟移动设备

自定义高级组件调试 针对用户本地开发的高级组件，低代码平台提供了Scaffolding脚手架工具。Scaffolding可帮助您快捷实现组件的新建、本地开发、调试、预览、发布、下载等主要功能。 Scaffolding打通了本地开发环境与AppCube开发环境，实现本地开发组件的实时在线调测，简化了本地开发组件后，频繁的打包组件资产包上传至AppCube环境再查看页面显示效果的过程，提升了高级组件的开发效率。

使用说明 在高级页面组件开发过程中，低代码平台支持开发者直接引用第三方库，在降低组件开发复杂度的同时，丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖，若缺少相应的库，则高级页面组件不能正常运行。 低代码平台提供了一些系统预置库，若不满足现有需求，支持开发者制作并上传新的库。 系统预置库 系统预置库是平台已定义好的库，可在高级页面组件中直接引用或在页面设置中直接进行加载并使用。 图1 查看系统预置库 系统预置库的版本号是在资源上传或更新时，平台赋予的版本管理号和实际官网版本不存在对应关系。 表1 系统预置库列表 Library名称 Library ID 功能说明 echartsliquidfill global_echartsliquidfill 水位图组件依赖的库。 关于该库的更多介绍，请参见ECharts Liquid Fill Chart官网中2.0.5版本使用说明。 codeMirror global_codeMirror 代码编辑器组件。 关于该库的更多介绍，请参见codeMirror相关资料中5.49.2版本使用说明。 echarts global_echarts 百度开源图表控件。 关于该库的更多介绍，请参见echarts相关资料中4.1.1版本使用说明。 Element global_Element 基于Vue的一个组件库，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见Element相关资料中2.6.2版本使用说明。 Sortable global_Sortable 基于Vue开发的可拖拽组件，需要先加载Vue库，才可以使用该库。 关于该库的更多介绍，请参见Sortable相关资料中1.9.0版本使用说明。 Vue global_Vue Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 关于该库的更多介绍，请参见Vue相关资料中2.6.11版本使用说明。 VueAwesomeSwiper global_VueAwesomeSwiper 基于Vue的轮播图组件，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueAwesomeSwiper相关资料中4.1.1版本使用说明。 VueColor global_VueColor 基于Vue的颜色选择器组件，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueColor相关资料中2.4.0版本使用说明。 VueDraggable global_VueDraggable 基于Vue的拖拽事件组件，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueDraggable相关资料中2.16.0版本使用说明。 VueI18n global_VueI18n 基于Vue的多语言组件，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueI18n相关资料中8.8.2版本使用说明。 VueLazyload global_VueLazyload 基于Vue的Vue图片懒加载组件，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueLazyload相关资料中1.2.4版本使用说明。 VueQuillEditor global_VueQuillEditor 基于Vue的Vue富文本编辑器，需要先加载Vue库才可以使用该库。 关于该库的更多介绍，请参见VueQuillEditor相关资料中3.0.6版本使用说明。 xlsx global_xlsx 支持excel导入导出功能。 关于该库的更多介绍，请参见SheetJS相关资料中0.14.3版本使用说明。 xss global_xss 对用户输入的内容进行过滤，防止xss攻击。 关于该库的更多介绍，请参见xss相关资料中1.0.6版本使用说明。 ImageManagement global_ImageManagement 图片上传组件，用来连接公有云实现图片上传，需要先依次加载Vue和VueI18n库，才可以使用该库。 RuntimeFramework global_RuntimeFramework 支持在高级页面运行由标准页面发布的Widget。 polyfill global_polyfill 提供JavaScript Pollfill。 关于该库的更多介绍，请参见polyfill相关资料中0.1.42版本使用说明。 FilePreview global_FilePreview 支持文件在线预览，包括word、excel、ppt和pdf。该库相关的API介绍如下： 文件渲染：FilePreview.preview(filePath, selector,fileContent, lazyLoad, cbk) filePath：完整的文件全路径，http协议的全路径，要求与render后端服务器网络相通，支持读取OBS的文件地址，例如“/connectors/{connector_type}/{connector_name}/viewobject?object=xxxxx/xxx.pdf”。 selector：渲染区域，如#rendId、.renderClass，也可以传入vue的el对象$("#file-preview", elem)[0]。如果传入会渲染到对应区域，不传则可以使用cbk回调内容自行处理。 fileContent：文件的base64编码内容，如果传入了内容，则不会根据filePath再读取文件内容，直接使用此入参。 lazyLoad：是否懒加载。设置为“true”，表示pdf只渲染第一页、excel只渲染第一个sheet页、ppt只渲染第一页、word为全部页。设置为“false”，表示全部页。 cbk：回调方法，回调参数为完全的文件实例。pdf为pdfInstance实例，其他为所有文件内容。 文件按页渲染：FilePreview.previewPage(fileInstance, pageNumber, selector) fileInstance：preview方法回调时参数。 pageNumber：渲染页码（从1开始）。 selector：渲染区域，如#rendId、.renderClass。 使用示例如下： 直接预览整个文件。 FilePreview.preview('https://10.xxxx:1234/a.doc', "#htmlContent"); 按页预览文件：pdf按页码、excel按sheet、ppt按页码，word不支持。例如，预览文件首页，并记录返回的文件实例。 let fileInstance;FilePreview.preview('https://10.xxxx:1234/a.doc', "#htmlContent", "xxxxxx" true, funtion(fileContent) { // 需要记录返回的文件实例，在按页预览时使用 fileInstance = fileContent // 如果需要自己渲染或获取文件内容，可以在此获取并处理}); 预览指定页，传入preview返回的fileInstance，并传入相应页码。 FilePreview.previewPage(fileInstance, pageNumber, selector) VueRouter global_VueRouter VueRouter是Vue.js官方的路由管理器。 关于该库的更多介绍，请参见VueRouter相关资料中3.0.5版本使用说明。 MobileAppRuntimeFramework global_MobileAppRuntimeFramework 应用发布到手机端运行时，依赖的库。 WidgetDataTrans global_WidgetDataTrans 组件数据格式转换工具库，用于转换几种常见输入数据格式为平台预置组件需要的格式。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计。 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code;} 其中，参数说明如下表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*//*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/@media screen and (min-width: 1200px) { body { background-color:blue; }}/*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/@media screen and (min-width: 992px){ body { background-color:red; }} 避免固定尺寸。 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值。 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象。 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应。 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先。 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

操作步骤 确认高级页面属性开关“合并并压缩资源”已关闭。 登录新版应用设计器。 在左侧导航栏中，选择“页面”。 在设置中，单击“页面设置”，进入页面设置。 图1 进入页面设置 获取锁后，在“属性”页签，去勾选“合并并压缩资源”。 若勾选“合并并压缩资源”，会对所有高级页面涉及的css和js文件进行合并及压缩，使用单页面性能检查功能时，不要勾选该选项。 图2 关闭“合并并压缩资源”属性 设置完成后，单击，并单击，释放锁。 打开要进行性能检查的高级页面，在浏览器开发者工具中，勾选“Disable cache”属性。 在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 在“Network”页签，勾选“Disable cache”属性（即禁用缓存）。 在进行页面性能检查时，如果不勾选该选项，性能检查会读取缓存中的数据，导致性能检查结果不准确。 图3 勾选“Disable cache”属性 在已发布的高级页面上方，单击“性能分析”，进入页面性能分析报告页面。 开发者工具请保持打开状态，关闭后“Disable cache”属性会自动不勾选。同时请确保高级页面已发布，若未发布，单击高级页面上方的，发布页面。 图4 查看性能分析报告 在页面性能报告中，单击各指标后的“展开”，可查看性能指标详情。 图5 查看性能指标详情

使用说明 页面组件之间，可以通过配置事件和动作进行信息交互。当页面组件较多，且需要进行信息交互时，频繁的给每个组件去定义事件或动作就比较繁琐了。此时，可以通过定义全局状态，来实现页面级所有组件中数据信息的更新。 低代码平台高级页面支持设置全局状态，通过页面级内存方式共享数据，即采用集中式存储管理页面所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的理解就是全局状态，可理解为页面中所有组件的共享状态，不管组件在页面的哪个位置或层级，任何组件都能获取状态或触发状态改变的动作。全局状态相当于全局变量，属性是私有的，需要在组件的js文件中，使用预置的“this.$mstore.dispatch”方法，来修改状态数据。 思考：什么情况下，应该使用全局状态？ 解惑：当页面组件构成比较简单，组件间不需要频繁的进行信息交互时，不需要设置全局状态。反之，则建议使用全局状态，通过设置并使用全局状态，可以帮助我们管理页面所有组件的共享状态。

操作步骤 登录新版应用设计器。 在左侧导航栏中，选择“页面”。 在高级页面中，单击对应的页面，进入高级页面开发界面。 在页面右上角，单击，定义全局状态。 定义全局状态使用JavaScript编程语言，不支持TypeScript。全局状态结构固定以MStore命名，每个页面仅包含一个全局状态实例，方便在组件调试的过程中，轻易的获取整个当前页面状态的快照。全局状态的结构定义由以下三部分组成： state：定义页面所有组件的初始状态数据，即页面中所有组件共享状态的初始数据源。 mutations：状态变更的唯一方法是提交mutation。mutation以声明的方式，将state变化映射到视图，每次state的变更都需要定义一个mutation。mutation使用对象风格的提交方式，整个对象都作为载荷（payload）传给mutation函数，mutation都是同步事务。 actions：通过actions执行状态数据变更，用于衔接state和mutation。Action可以包含任意异步操作，通常用于绑定状态和组件，可以调用服务。 在页面的组件js文件中，使用预置的“this.$mstore.dispatch（）”方法，修改状态数据。 系统还预置了onStateChanged(state) 方法，用于监听属性整个全局状态的变更。

场景描述 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。参考华为消费者业务网站（如图1所示），页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。 图1 消费者业务网站示例 本章节主要在高级页面中，通过两个组件（标签页组件、信息展示组件）复现上述场景。其中，标签页组件包含产品类别（手机、笔记本、平板等），信息展示组件用于展示不同产品类别的图片信息。两个组件通过事件-动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定信息展示组件中切换产品图片的动作。 本章节使用的示例组件开发过程中，使用了前端开发框架Vue及组件库Element。事件-动作机制的详情介绍，请参见如何实现组件交互。

使用说明 页面间组件的交互，除了需要事件-动作机制，还需要用到低代码中的页面宏。本章节通过具体示例，为您介绍页面间组件交互的方法。如图1所示，高级页面Page1中包含示例组件widgetEventTemplate，高级页面Page2中包含示例组件widgetPageMacroTemplate，单击Page1页面中的OK按钮，输入框中的数据会通过页面宏传递给Page2。 图1 页面间组件交互场景示例 页面间的组件交互原理如下图所示，在配置事件时，选择“默认”类别中的页面跳转，并通过新增动作参数将事件的参数传给页面宏，在跳转的目标页面中读取页面宏数据。 图2 Page传值原理 主要实现原理如下： widgetPageMacroTemplate 在widgetPageMacroTemplate.editor.js文件中定义页面宏数据。 propertiesConfig: [ { config: [ { "type": "text", "name": "pageMacro", "label": "Page Macro", "value": "${pm.pageMacro}", "validation": { "rules": {} } }]}]; 表1 页面宏数据配置项说明 配置项 参数说明 propertiesConfig 配置组件的自定义属性。 type 配置项的数据类型，本例中配置为text（文本）。 name 配置项的变量名称，本例中设置为“pageMacro”。通过获取组件自定义配置属性的API，来获取该值。 label 配置项的展示标签。 value 配置项的默认值，本例中设置为${pm.pageMacro}。 其中，pageMacro为页面宏变量名，${pm.}为低代码平台定义的固定语法。 validation 无需关注此配置项。 在widgetPageMacroTemplate.js文件中读取页面宏数据，并将其显示到页面中。 var widgetProperties = thisObj.getProperties();//获取该组件自定义配置属性的API。...var pageMacro = widgetProperties.pageMacro || "";$("#macro",elem).html(pageMacro); 上述示例代码中widgetProperties.pageMacro的PageMacro，即表1中name配置项设置的变量名称。 widgetEventTemplate：关于widgetEventTemplate的介绍，请参见同页面内组件的交互。

自定义布局样式 如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。 图13 自定义布局样式页面效果 在头部组件的“.css”样式文件中，指定头部组件的高度。 样例代码如下： #headerWidget { height: 90px;} 参考基于预置组件进行自定义中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget.zip。 修改解压后的“Navigator_Widget.css”文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。 样例代码如下： html[app=desktop] body { overflow: hidden;} #navigatorWidget, #global_RouterViewWidget { height: calc(100% - 90px); overflow: scroll;} 将修改后的头部组件和组件路由导航组件文件，重新打成zip包。 参考基于预置组件进行自定义中操作，上传重新打包后的组件。 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的，保存页面。 保存成功后，单击，发布页面。 发布成功后，单击，可查看页面效果。

初识事件-动作 查看组件可配置事件列表。 以雷达图组件为例，在画布中拖入并选中雷达图组件，在右侧“组件属性设置”栏中选择“事件”页签，会显示当前组件可配置的事件列表。 图1 事件配置示例 表1 预置事件列表 事件名称 事件说明 点击 通过鼠标左键，单击该组件时触发。 双击 通过鼠标左键，双击该组件时触发。 右击 通过鼠标右键，单击该组件时触发。 右双击 通过鼠标右键，双击该组件时触发。 鼠标滑过 鼠标光标滑过该组件时触发。 组件加载 组件加载完成后触发。 单击组件标题 单击组件标题时触发。 当点击图例时 单击图例时触发。 当点击数据时 单击数据时触发。 图1所示的“跳转页面”事件，并非低代码平台预置的事件，而是在“雷达图”组件中注册的事件，当单击该组件标题时触发。即事件列表中也会展现该组件注册的事件，用于配置。组件中如何注册事件，请参见同页面内组件的交互。 事件在开发态（高级页面编辑页面）不能触发，只有在页面的运行态（应用运行状态或预览页面）才能触发生效。 配置事件触发时的响应动作。 单击事件名称后的，在弹出的“事件编辑”页面，可配置该事件触发时的响应动作。 图2 配置事件示例 “事件编辑”弹窗说明 如下图所示，其中标签1“新建动作”按钮，可为当前事件添加响应动作，标签2为当前事件已配置的动作列表，可在列表中操作列对其再次编辑或删除。 图3 事件编辑弹窗 预置动作说明 图4 动作列表示例 如上图所示，当单击“新建动作”按钮后，可展现当前事件可配置的动作列表。 表2 预置动作列表 动作类别 动作名称 详细说明 默认 页面跳转 跳转至其他页面，配置参数说明： 页面类型：设置待跳转的页面是当前应用中的标准页面、高级页面或外部页面。 高级页面、标准页面、外部页面：选择高级页面、标准页面或输入外部页面的地址。 动作参数：通过页面宏传递参数，可暂且不关注。 页面打开方式：设置跳转页面的打开方式，可选项包含当前浏览器窗口打开或新窗口打开。 自定义 自定义动作 自定义动作可通过代码，实现响应动作的逻辑。 //var flag=true //{widgetxxx}.flag=flag;console.log('测试自定义动作'); BPM动作 提交实例 详细介绍，请参见在高级页面中与工作流交互。 提交任务 转派任务 更改变量 图4中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册动作，请参见同页面内组件的交互。 配置完成后，单击页面上方的，保存页面。 单击，进入预览页面，查看已配置的事件和动作是否能正常触发。