# 华为云Astro轻应用高级页面概述 #### 什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用组件进行组装和配置，方便用户达到自己想要的效果。高级页面支持多种框架，支持代码开发，比较自由，多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面，提供了常用组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。 #### 初识高级页面开发界面 图1高级页面开发界面 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138784.png "点击放大") 高级页面开发工作台，功能模块布局说明如下： - 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如保存、发布，电脑端或者移动端页面设置等。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138780.png)：用于展开、收起高级组件列表。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001963973904.png)/![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000614089.png)：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001963974380.png)：保存当前开发页面的修改。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000575093.png)：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000575549.png)：页面发布后，可以预览该页面运行态效果。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001964134732.png)：页面开发完成后，可将该页面发布为模板。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001964134964.png)/![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001963975940.png)：页面开发过程中如果出现误操作，可执行撤销、复原操作。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000577261.png)：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000577413.png)/![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000617377.png)：用于调节页面画布在开发工作台中的大小比例。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001964137328.png)：自动适应页面画布在开发工作台中的大小比例。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001964137376.png)：开启画布网格线功能，用于标定组件在画布中的位置。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002000578285.png)：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 - ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001964137484.png)：设置页面的状态。 - 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 - 高级组件展示、选择区域（序号2、3） 选定序号2的组件分类后，属于该功能分类的组件将显示在序号3的区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 - 搜索框：通过组件名称，可快速查询归属于当前选定**组件分类** 中的高级组件。 图2搜索框 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894298708.png "点击放大") - 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3应用场景筛选 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894298712.png) - 预置和自定义筛选：用于筛选当前选定组件分类，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见[设置华为云Astro轻应用高级页面预置组件属性](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9094.html)。自定义组件为用户自主开发的高级组件，详情请参见[为华为云Astro轻应用高级页面添加自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9109.html)。 - 画布（序号4） 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。下面以**绝对布局** 方式的高级页面为例进行介绍。 - 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4拖拽组件到画布中 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138788.png "点击放大") - 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5调整组件 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138772.png) - 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（如果已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 - 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 - 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 - 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 - 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6格式刷操作示例 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936098373.png) - 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 - 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见[设置华为云Astro轻应用高级页面预置组件属性](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9094.html)。 - 组件属性设置区域（序号5） 未选中画布中任何组件时，此模块显示内容为"当前视图组件列表"即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的"组件属性设置"栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 - 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见[为华为云Astro轻应用高级页面添加自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9109.html)。 - 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见[使用桥接器为高级页面组件绑定数据](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9117.html)。 - 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见[添加事件或宏实现高级页面组件交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9113.html)。 - 路由设置：当前该功能主要用于流式布局类型高级页面中的"**路由导航**"组件。 #### 高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： - **组件**为高级页面的元素，组件的可复用性可以大幅提高开发效率。 - 组件的**事件-动作**机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 - **库**作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 - 组件可以通过**桥接器**调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及"事件-动作"机制，构建了高级页面的基本框架。 图7组件、库、桥接器关系图 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138760.png) - 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如[图8]所示，其中Page为高级页面，Widget为高级组件。 图8高级页面与组件的关系 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894138768.png) 高级页面中的组件，包括如下两类： - 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见[设置华为云Astro轻应用高级页面预置组件属性](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9094.html)。 - 自定义组件 如果全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下几类： - 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见[为华为云Astro轻应用高级页面添加自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9109.html)。 - 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的**组件模板** 进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见[为华为云Astro轻应用高级页面添加自定义组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9109.html)。 - 库 库是支撑高级组件运行的第三方依赖，如果缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。如何在高级页面中引入库，请参见[使用AstroZero开发高级页面时如何引用第三方库](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0019.html)。 - 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见[使用桥接器为高级页面组件绑定数据](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9117.html)。 - 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见[添加事件或宏实现高级页面组件交互](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9113.html)。 #### 高级页面多终端适配 当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，华为云Astro轻应用提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供"拉伸"功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。在高级页面中如何实现多终端适配，请参见[使用华为云Astro轻应用创建高级页面适配多终端显示](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0022.html) - 电脑端和手机端视图 为了让同一网页能够完美呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后，发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测加载相应视图页面。 - 如果用户开发的高级页面用于多种设备，推荐使用具有响应式布局的流式布局进行高级页面开发。 - 如果用户仅开发了电脑端高级页面，在移动端也可加载显示，但由于分辨率差别较大，可能会出现效果不佳的情况。所以，开发显示在电脑端和移动端设备的高级页面时，推荐用户对电脑端和移动端视图分别进行设计与开发，这样能更好的自适应电脑端和移动端设备。 - 流式布局与绝对布局的自适应设计 以电脑端为例，分别为您介绍流式布局与绝对布局的自适应设计。 - 流式布局 流式布局为自适应布局，用于常规Web应用开发，例如电商网站、管理网站等。流式布局为12列栅格布局，可拖动组件右侧边界，按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应，页面中组件将按照从左到右、从上到下的顺序依次排列。 在运行环境中，针对不同分辨率的终端或不同尺寸的浏览器窗口，流式布局始终以12列栅格为原则进行栅格分割，组件宽度也会根据栅格的宽度变化而自动调整，如[图9]所示。其中，组件本身需满足响应式设计，其开发规范请参见[响应式组件开发基本原则]。 图9流式布局运行态自适应布局 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001944061220.png "点击放大") - 绝对布局 绝对布局为固定尺寸页面，常用于IOC大屏页面开发。在绝对布局中，组件可在画布中任意位置进行拖拽放置，组件的宽高可自定义设置，组件位置和大小都为固定值。在页面右上角，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001971259661.png)，可进行当前页面视图设置，选择您所需要的应用屏幕大小。 图10设置绝对布局屏幕大小 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001944220544.png "点击放大") 绝对布局一般情况下，不能进行自适应，在运行环境，如果终端屏幕大小或浏览器窗口尺寸小于设定屏幕尺寸，会出现滚动条，如[图11]所示。如果终端屏幕大小或浏览器窗口尺寸大于设定屏幕尺寸，则内容居中外加背景。 图11绝对布局页面运行态出现滚动条 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001971379409.png "点击放大") 为实现绝对布局自适应，低代码平台为绝对布局提供了"拉伸"辅助自适应功能。单击绝对布局的高级页面名称右侧的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001944061224.png)，选择"设置 \> 基本设置"，勾选"拉伸"，如[图12]所示。 图12绝对布局拉伸设置 ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001971259673.png "点击放大") 勾选"拉伸"设置后，即可将页面宽度扩展至100%，以适应整个浏览器或设备的可视宽度。同时组件内容的宽度，也会根据其容器的宽度进行调整。在运行态，绝对布局针对不同分辨率的终端或不同尺寸浏览器窗口，以同等缩放比例对组件大小进行调整。其中，组件本身需满足响应式设计，其开发规范请参见[响应式组件开发基本原则]。 #### 响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 - 根据内容设计 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： ``` @media mediatype and|not|only (media feature) { CSS-Code; } ``` 其中，参数说明如[表1]所示。 表1@media语法参数说明 | 参数 | 值 | 说明 | |:---|:---|:---| | mediatype | all | 用于所有设备。 | | mediatype | screen | 用于电脑屏幕、平板电脑、智能手机等。 | | mediatype | print | 用于打印机和打印预览。 | | media feature | aspect-ratio | 定义输出设备中，页面可见区域宽度与高度的比率。 | | media feature | max-width | 定义输出设备中，页面最大可见区域的宽度。 | | media feature | max-height | 定义输出设备中，页面最大可见区域的高度。 | | media feature | min-width | 定义输出设备中，页面最小可见区域的宽度。 | | media feature | 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的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。