华为云用户手册

自定义布局样式 如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。 图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中所示的“满月饼图”动作，并非低代码平台预置的动作，而是在“满月饼图”组件中注册的动作，即动作列表中也会展现在画布中所有组件注册的动作，用于配置。组件中如何注册动作，请参见同页面内组件的交互。 配置完成后，单击页面上方的，保存页面。 单击，进入预览页面，查看已配置的事件和动作是否能正常触发。

属性 在属性中，设置雷达图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置翻牌器组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

如何设置数据系列 选中水位图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 图4 新增数据系列 {"resCode": "0","resMsg": "成功","result": [{"dataValue": [{"name": "报警处理率","value": [{"value": 0.65,"name": ""}]},{"name": "命中率","value": [{"value": 0.15,"name": ""}]}]}]} 配置添加的数据系列图表位置、图表形状等。 设置完成后，单击“确定”。

属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置仪表盘组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

如何设置数据系列 选择基本柱图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 图5 配置数据系列 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗标红字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 {"resCode": "0","resMsg": "成功","result": [{"order": {"dataX": ["保洁","安管","工程","绿化","消杀","特约"],"dataValue": [{"title": "工单总数","value": [411,965,427,630,85,800]},{"title": "费用","value": [500,1065,327,730,185,1000]}]}}]} 配置添加的数据系列柱状条颜色、柱状条宽度、柱条边框圆角、数值是否显示，柱状图上显示的数值对应上述静态数据中的数值。 设置完成后，单击“确定”。

属性 在属性中，设置基本柱图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

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

属性 在属性中，设置散点图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

高级设置 在高级设置中，选择设置的文本内容，在出现的配置弹窗中，可进行是否加粗、是否倾斜、字号、字体、文本颜色、背景颜色、对齐方式等配置。 图3 编辑器中文本配置 另外，若需要在文本中设置变量，变量值来自文本桥接器“TextConnector”中的配置，若配置为静态数据，变量值取自“outDatas”中配置的数据。 可变参数下标请从0开始，变量样式为“{0}”，预览页面后效果为“变量值”。带转义符“\”的变参不会被替换，例如文本组件内容为“\{1}{1\}{\1}”，预览页面后效果为“{1}{1}{1}”。连续两个转义符时，则第二个转义符失效，变参会被替换，例如文本组件内容为“\\{2}”，预览页面后效果为“\变量值”。 图4 文本中变量配置 图5 预览页面效果

属性 在属性中，设置基本折线图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

系统预置库 系统预置库是系统已定义好的库，可在页面设计中直接进行加载并使用。 表1 系统预置库 Library名称 Library ID 功能说明 GISMap global_GISMap 地图组件依赖库：GISMap库是将百度地图、谷歌地图和高德地图中一些常用JS API封装，生成的组件库，为地图组件提供应用编程接口。更多说明请参考GISMap库说明文档.zip。 EchartsGISMap global_EchartsGISMap 地图组件依赖库：EchartsGISMap库是echarts库的插件，功能是将百度echarts散点图在百度、谷歌、高德地图上应用。 需要先加载echarts库才可以使用该库。更多说明请参考EchartsGISMap库说明文档.zip。 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的一个组件库，CC管理员界面开发。 需要先加载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。 VueRouter global_VueRouter Vue Router是Vue.js官方的路由管理器。更多使用说明请参考VueRouter相关资料中3.0.5版本使用说明。 MobileAppRuntimeFramework global_MobileAppRuntimeFramework 是AppCube应用发布到手机端运行时依赖的库。 WidgetDataTrans global_WidgetDataTrans 组件数据格式转换工具库，用于转换几种常见输入数据格式为平台预置组件需要的格式。 平台的global库的版本号是在资源上传或者更新时平台赋予的版本管理号，和实际官网版本不存在对应关系。

属性 在属性中，设置自定义背景框组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

高级设置 在高级设置中，可设置图片填充类型。 图3 高级设置 图4 图片设置页面 图5 上传图片/视频 单击“选择图片”，在页面单击目录后的和，可管理图片目录。单击“上传图片/视频”，可进行上传操作。 选择“填充”表示图片不保证保持原有比例，图片拉伸填满整个容器。 选择“包含”表示图片保持原有尺寸比例，可能会在容器内留有空白。 选择“覆盖”表示图片表示原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。 选择“无”表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。

属性 在属性中，设置图片组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片地址：直接输入图片地址，来展示图片。 连接器设置 使用连接器：是否使用连接器。 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。 选择连接器：选择具体的连接器实例。 选择桶：连接器的存储桶。 使用相对地址：使用图片的相对路径。

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

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

如何快速创建一个高级页面 以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。 新建高级页面。 登录新版应用设计器。 在左侧导航栏中，选择“页面”。 单击高级页面后的，设置标签和名称，单击“添加”。 图8 添加高级页面 在应用中首次创建高级页面时，才会显示“视图”选项。 搭建高级页面。 在高级页面开发界面，单击，打开组件列表。 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。 图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 高级页面的发布

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

绝对布局高级页面 创建绝对布局类型的高级页面。 登录新版应用设计器。 在左侧导航栏中，选择“页面”，单击高级页面后的，进入添加高级页面。 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。 图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或%。

使用说明 为了降低应用开发成本，让用户通过拖拽的方式，快速完成应用的搭建，低代码平台提供了丰富的应用模板。用户可以直接使用应用模板快速创建应用，也可以使用标准页面模板创建页面。页面模板包括预置模板（通用模板）和自定义模板两大类。 预置模板（通用模板） 基础表单：基本的表单页面。 多区域表单：有间隔区域的多区域表单页面。 基础表格：单张表生成表格模板，包含增、删、改、查。 基础详情页面：基础的详情页面。 自定义模板（我的模板） 用户自定义的页面模板，开发好页面后，单击上方的另存为，即可创建自定义页面模板。创建后，该开发者用户、注册AppCube的华为云帐号、华为云帐号下其他AppCube用户都可直接使用该页面模板来创建标准页面。

属性 在属性中，设置轮播组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片源设置：图片来源是否取自OBS连接器。 勾选使用连接器，表示取自OBS连接器。当连接器中图片过多时，可能会导致读取图片缓慢，且打包该页面时，由于图片地址为绝对地址，打包安装后，图片地址不可用，需要重新上传图片并进行配置。 不勾选使用连接器，表示图片来源取自平台接口。选择图片后实际存储的是图片id，页面随应用打包时会将图片一起打包，在新环境安装后无需重新上传配置。 连接器设置 选择连接器：选择有存储功能的OBS类型连接器。OBS连接器配置完成后，才可以进行图片的查询、上传等操作，连接器的配置方法请参见对接OBS云对象存储实例。 选择桶：连接器的存储桶。

使用说明 低代码平台预置了很多默认样式，供您选择使用，同时也支持对标准页面的主题样式进行自定义修改。 自定义主题时，可以自定义修改标准页面的样式。设置完成并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 配置菜单：单击“设置”，可设置菜单。 图标：配置菜单的图标。 文本内容：配置菜单的显示名称。 RUL类型：菜单跳转页面的URL类型，如“常量”、“选择页面”。 地址：当“URL类型”为“常量”时，需要配置跳转页面的具体URL地址。当“URL类型”为“选择页面”时，需要选择系统中创建的具体跳转页面。 链接目标：跳转后页面显示形式。 新窗口：在新窗口页，显示跳转页面。 当前框架：在当前框架，显示跳转页面。 父框架：在父框架区域，显示跳转页面。 整个窗口：在当前整个窗口，显示跳转页面。 分隔符：菜单名之间的分隔符。 跳转：单击面包屑组件的菜单标签，是否开启自动跳转，默认为开启。若不开启跳转，可在“事件”页签定义跳转的实现方法，即进行事件编排。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的 CSS 样式类名，可在 CS S代码中进行引用。

事件 在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。 表1 事件编排 事件名 说明 返回值 数据改变 已上传文件列表改变时触发。 当前已上传文件列表。 文件上传 开始上传文件时触发。 当前开始上传的文件。 当前已上传文件列表。 操作成功 上传成功后触发。 上传成功文件的地址。 选中文件 文件列表选中时或取消选中时触发。 当前文件。 已选中的文件。 文件上传前 文件上传前触发。 在“文件上传前”事件后，单击齿轮图标，在“自定义JS代码”中增加“$current.showUploadList = false”语句，可取消上传预览。 当前文件。 文件名。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 默认分页大小：设置默认每页条数（分页大小）。 每页条数切换的配置：每页条数切换的配置。 大小：分页显示大小，可选值为small（迷你版）或不填（默认）。 简洁版：是否简洁版显示分页样式。 AUI风格：是否展示AUI风格。 显示跳转：是否显示跳转，显示后可设置快速跳转到某一页。 显示分页：是否显示分页，显示后可设置具体的分页大小。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。