# 创建华为云Astro轻应用高级页面
标准页面主要用于后台管理类的表格表单类的开发，而高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。
#### 创建高级页面
1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，登录应用设计器。
2. 在左侧导航栏中，选择"界面"。
3. （可选）单击高级页面后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001914210610.png)，为高级页面添加目录。
   
   高级页面默认存放在根目录下，在创建高级页面前，您可以先创建高级页面存放的目录，也可以在高级页面创建后将其拖拽到指定目录。
   
   
4. 将鼠标放在已创建的高级页面目录上，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001946089685.png)，进入添加高级页面。
   
   如果未创建高级页面目录，请直接单击高级页面后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001914370518.png)，进入添加高级页面。
   
   
5. 设置高级页面的基本信息，单击"添加"。 
   图1新建高级页面   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002012921261.png "点击放大")
   表1高级页面参数说明 
   | 参数   | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                |
   |:---|:---|
   | 标签   | 输入高级页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~100个字符。                                                                                                                                                                                                                                                                                                                                                                       |
   | 名称   | 输入高级页面的名称，名称是高级页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度范围为1\~100个字符。  - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。                                                                                                                 |
   | 视图   | 为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 默认为电脑端和手机端全部选中。 **在应用中，首次创建高级页面时，才会显示"视图"参数。如果应用中已存在高级页面，则不会显示该参数。**                                                                                                                                                             |
   | 描述   | 根据实际需求，在输入框中输入高级页面的描述信息。 取值范围：1\~255个字符。                                                                                                                                                                                                                                                                                                                                                                      |
   | 关键字  | 为了便于搜索高级页面，可以在此处自定义一些关键字。                                                                                                                                                                                                                                                                                                                                                                                                                         |
   | 布局类型 | 在华为云Astro轻应用中创建高级页面时，提供了两种布局模式的页面布局供您选择，请按需进行选择。 - 绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。绝对布局常用于大屏页面的开发。  - 流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。流式布局常用于常规Web应用开发，例如电商网站、管理网站等。   |
      
   
   
6. 开发高级页面。 
   下面以开发一个绝对布局的高级页面为例，向您介绍如何使用华为云Astro轻应用快速开发一个高级页面。
   图2绝对布局类型高级页面组件布局示例   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894139140.png "点击放大")
   如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。
   1. 在高级页面右上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936098657.png)，设置背景图片。
      图3设置页面背景色示例   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894139160.png "点击放大") 
   
   2. 查找并拖入该页面中包含的组件（1个文本编辑、1个基本柱图和1个多区域折线图），通过拖拽进行位置、大小调整。
   
   3. 设置文本编辑组件内容为"绝对布局类型高级页面"，字号为"大号"。
      图4设置文本编辑组件内容   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002012922365.png "点击放大") 
   
   4. 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。
      图5精确设置组件大小   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894299040.png "点击放大") 
   
   5. 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。
      图6复制组件   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894139112.png "点击放大") 
   
   6. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894139104.png)，保存页面。
   
   7. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894139148.png)，预览高级页面，查看当前页面在运行态的效果。
      图7预览高级页面   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894299064.png "点击放大") 
   
   
   
   
 
#### 相关文档
- [使用华为云Astro轻应用自定义组件在页面中的属性](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0036.html)
- [使用华为云Astro轻应用为组件配置中英文语言属性](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0006.html)
- [使用华为云Astro轻应用创建高级页面适配多终端显示](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0022.html)
- [使用华为云Astro轻应用开发高级页面时如何引用第三方库](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0019.html)
- [在华为云Astro轻应用高级页面中使用花瓣图展示订单数据](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0017.html)
- [在华为云Astro轻应用高级页面中使用轮播组件实现图片展示和URL跳转](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0016.html)