# 什么是高级页面 #### 什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用Widget组件进行组装和配置，方便用户达到自己想要的效果。高级页面支持多种框架，支持代码开发，比较自由，多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面，提供了常用组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。 #### 初识高级页面开发界面 进入经典版应用设计器，将鼠标放在某个文件夹上，单击"+"，选择"高级页面"，即可新建一个空白高级页面或基于模板创建一个高级页面。页面创建后，自动进入高级页面开发界面，您可以阅读以下内容初步了解高级页面。 图1高级页面开发界面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286205.png "点击放大") 高级页面开发工作台，功能模块布局说明如下： - 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如获取、释放锁，电脑端或者移动端页面设置等。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047064.png)组件列表：用于展开、收起高级组件列表。 - 获取锁\\释放锁：低代码平台提供了多人协同开发保护机制，即**页面锁** 机制。在应用开发过程中除了新建页面，其它页面相关操作都必须先锁定页面，包括编辑页面、删除页面、下载页面、发布页面模板、复制页面、保存发布页面。同时，在进行**页面设置** 前，必须先锁定页面设置。 多人协同操作页面，锁定规则如下： - 锁定**高级页面**的前提：该页面未被他人锁定，且页面设置未被他人锁定。 - 锁定**页面设置**的前提：所有页面包括页面设置，未被他人锁定。 - 每个用户只允许锁定一个页面或页面设置。 - 电脑端\\移动端：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。多终端适配的详细介绍，请参见[如何适配多终端](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0079.html)。 - 保存：保存当前开发页面的修改。 - 发布：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 - 预览：页面发布后，可以预览该页面运行态效果。 - 撤销\\复原：页面开发过程中若出现误操作，可执行撤销、复原操作。 - 性能分析：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 - 高级页面缩放比例：用于调节页面画布在开发工作台中的大小比例。 - 自动适应大小：自动适应页面画布在开发工作台中的大小比例。 - 网格线：开启画布网格线功能，用于标定组件在画布中的位置。 - 页面视图设置：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 - 页面状态设置：设置页面的状态。 - 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 - 高级组件展示、选择区域（序号2、3） 选定组件分类后，属于该功能分类的组件将显示在该区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 - 搜索框：通过组件名称，可快速查询归属于当前选定**组件分类** 中的高级组件。 图2搜索框 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126405.png "点击放大") - 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3应用场景筛选 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047084.png) - 预置和自定义筛选：用于筛选当前选定**组件分类** 中，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见[全局高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0166.html)。自定义组件为用户自主开发的高级组件，详情请参见[开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0064.html)。 - 画布 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。此处以**绝对布局** 方式的高级页面为例，流式布局相关操作方法请参见[流式布局高级页面](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0062.html#astrozero_05_0062__section105306201417)。 - 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4拖拽组件示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887696.gif "点击放大") - 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5画布中调整组件示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887684.gif "点击放大") 如上图中所示，在执行操作前请确保已获取当前页面的页面锁，未获取页面锁的状态下执行的所有操作都不能保存。当页面处于锁定状态下时，当前应用中其他页面均无法获取页面锁，若需要进行页面开发，请先释放页面锁。 - 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（若已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 - 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 - 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 - 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 - 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6格式刷操作示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047076.gif "点击放大") - 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 - 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见[全局高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0166.html)。 - 组件属性设置区域 未选中画布中任何组件时，此模块显示内容为"当前视图组件列表"即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的"组件属性设置"栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 图7组件属性设置操作示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286197.gif "点击放大") - 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见[开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0064.html)。 表1组件属性设置说明 | 类别 | 设置项 | 详细说明 | |:---|:---|:---| | 基础 | 组件标题 | 设置该组件在"**当前视图组件列表**"中的组件标题。 | | 基础 | 组件名称 | 设置该组件在运行态时，DOM结构中widgetname属性。 | | 位置（仅在绝对布局类型的高级页面中存在此设置） | 距离左端 | 设置组件在画布中，距离画布左边的距离，单位为px。 | | 位置（仅在绝对布局类型的高级页面中存在此设置） | 距离顶端 | 设置组件在画布中，距离画布顶端的距离，单位为px。 | | 位置（仅在绝对布局类型的高级页面中存在此设置） | 宽度 | 设置组件宽度，单位为px。 | | 位置（仅在绝对布局类型的高级页面中存在此设置） | 高度 | 设置组件高度，单位为px。 | | 位置（仅在绝对布局类型的高级页面中存在此设置） | 堆叠顺序 | 设置组件堆叠顺序，即CSS中的z-index属性，单位为px。当存在多个组件堆叠的情况时，可通过该设置项设置堆叠顺序，设置值较大的显示在上方。 | | 边框 | 全边框 | 设置组件全边框，包含边框样式、宽度、颜色和弧度。 | | 边框 | 角边框 | 设置组件角边框，包含边框宽度、长度、颜色、弧度和边距。 | | 背景 | 样式 | 设置组件背景图片的展示模式，包含普通、居中、拉伸和平铺。 | | 背景 | 图片链接 | 设置背景图片。 | | 背景 | 颜色 | 设置组件背景颜色。 | - 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。 - 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见[如何实现组件交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0063.html)。 - 路由设置：当前该功能主要用于流式布局类型高级页面中的"**路由导航**"组件。 #### 高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： - **组件**为高级页面的元素，组件的可复用性可以大幅提高开发效率。 - 组件的**事件-动作**机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 - **库**作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 - 组件可以通过**桥接器**调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及"事件-动作"机制，构建了高级页面的基本框架。 图8组件、库、桥接器关系图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933047060.png) - 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如[图9]所示，其中Page为高级页面，Widget为高级组件。 图9高级页面与组件的关系 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126381.png) 高级页面中的组件，包括如下两类： - 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见[全局高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0166.html)。 - 自定义组件 若全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下三类： - 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见[开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0064.html)。 - 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的**组件模板** 进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见[开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0064.html)。 - 库 库是支撑高级组件运行的第三方依赖，若缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。系统预置库及第三方库的引入方法，请参见[如何引入第三方库](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0187.html)。 - 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。 - 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见[如何实现组件交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0063.html)。 #### 如何快速创建一个高级页面 以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。 1. 新建高级页面。 1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典版应用设计器。 2. 在模块树中，将鼠标放在某个文件夹上，单击加号，选择"高级页面"。 3. 设置标签和名称，单击"添加"。 图10添加高级页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887680.png "点击放大") ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/note_3.0-zh-cn.png) - 在应用中首次创建高级页面时，才会显示"视图"选项。 - 高级页面支持在如下两种布局模式下，使用组件搭建页面（具体说明请参见[高级页面布局](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0062.html)）。 - 绝对布局：在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。 - 流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。 2. 搭建高级页面。 1. 在高级页面开发界面，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286213.png)，打开组件列表。 2. 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。 图11搭建高级页面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126409.png "点击放大") 3. 进行组件属性配置。 以修改组件的图表数据为例，向您介绍如何进行组件属性配置。 1. 选中基本柱图组件，在组件属性设置中，单击"数据"页签。 2. 在桥接器实例中，选择"折线图数据桥接器"，数据类型选择"静态数据"，并在静态数据中拷贝如下示例。 图12组件数据设置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887672.png) ``` { "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 ] } ] } }] } ``` 3. 返回高级页面开发界面，单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887664.png)，保存页面。 4. 如何进行高级页面的预览与发布。 页面创建完成后，可直接单击高级页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960286201.png)，预览页面，也可以单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960126377.png)，发布高级页面。 图13高级页面的发布 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932887676.gif "点击放大")