# 华为云Astro轻应用标准页面概述
#### 什么是标准页面
标准页面是华为云Astro轻应用面向"业务数据增删改查"场景的零代码/低代码前端开发工具，其核心优势在于组件开箱即用，无需编写基础样式和事件代码，帮助开发者快速构建简洁实用的业务页面。该工具支持将一个或多个组件拖入画布，通过低代码或无代码配置，迅速实现业务功能的前端页面。
对于一般的业务应用系统，例如请假电子流、出差报销、在线投票等企业常见业务场景，其功能主要是针对业务数据的增、删、改、查，且前端界面的样式相对简单的页面，可以使用华为云Astro轻应用提供的标准页面。
标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。
#### 初识标准页面开发界面
进入应用设计器的"界面"，单击页面后的"+"，即可新建一个空白标准页面或基于模板创建一个标准页面。页面创建后，自动进入标准页面开发界面，您可以阅读以下内容初步了解标准页面。
图1标准页面开发界面   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302612.png "点击放大")
标准页面开发界面由左侧**组件区域** 、上方**按钮区域** 、中间**工作区域** 和右侧**可配置页面元素区域** 四部分组成。各区域功能介绍，请参见[表1]。
 表1标准页面区域功能说明 
| 分类        | 功能说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
|:---|:---|
| 按钮区域      | 页面的功能按钮区域，包括保存、另存为、预览页面、修订记录、操作回退、撤销回退和页面性能分析等。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| 组件区域      | 页面的组件区域。设计页面时，需要从组件区域拖拉拽各种组件（按住鼠标拖动）到工作区域中以丰富页面功能。 - 基本组件：低代码平台预置的组件，将鼠标悬浮在基本组件上，组件右上方会出现问号图标![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936102277.png)，单击该图标会出现该基本组件的使用说明。  - 扩展组件：用户自定义的组件，自定义组件由用户在线下开发完成并上传到低代码平台，用于丰富页面组件的功能。                                                                                                                                                                                                                                                                                                                                                                                                                         |
| 工作区域      | 编辑页面内容及页面视图区域，在页面布局设计操作区域，完成对页面具体布局、组件放置等操作。 - 设计视图：页面默认视图，在此视图下通过拖拉拽的方式对需要在页面布局中展示的组件元素进行编排。所有组件视图化，所见即所得，让您快速构建所需的页面布局。  - 模型视图：显示页面所涉及的模型视图。  - 事件视图：在该视图下，页面布局中各事件以代码形式展示在工作区。  - 样式代码：页面自定义的样式代码。  - 更多 \> 组件代码：页面布局中，各组件以代码形式展示在工作区。  - 更多 \> 模型代码：页面布局中，各模型以代码形式展示在工作区。  - 更多 \> 第三方库：展示页面加载的第三方库代码。   |
| 可配置页面元素区域 | 页面和组件属性设置区域，在该区域可以对组件属性、事件进行设置，也可以加载第三方库。 - 属性：组件的属性展示区域，通过修改组件的属性，使页面达到预期效果。  - 事件：事件编排器的入口，通过系统预置的事件编排器，或者直接定义JS代码，来实现页面组件与后台接口之间的交互。  - 库：加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成，用户可以在该页签下新增或删除某些库。低代码平台提供了一些默认的库，如果默认的库不满足现有需求，可以根据实际需求加载新的库。                                                                                                                                                                               |
   
#### 标准页面常用操作入门
在进行标准页面设计前，建议您先对开发界面的常用操作进行简单的了解。
- 在应用设计器的"界面"中，单击页面后的"+"，设置页面标签和名称，单击"添加"，即可创建一个标准页面（空白页面或基于模板创建）。

- 标准页面中预置了多种组件，可以直接从左侧"组件"区域，将这些组件拖拽到中间"设计视图"。
  图2拖拽组件到设计视图   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302600.png "点击放大") 

- 在配置使用组件前，可以将光标放在每个组件上，单击组件右上角的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894142688.png)图标，可查看组件的详细介绍。如果需了解更多预置组件的使用及配置方法，请参见[设置华为云Astro轻应用标准页面组件属性](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9064.html)。
  图3组件的帮助图标   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894142696.png) 

- 在"设计视图"中，选中某个组件，在右侧"属性"页签，可设置该组件的绑定数据、样式等属性，如[图4]所示。
  图4组件属性面板   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001936102293.png "点击放大") 
- 在"设计视图"中，选中某个组件，在右侧"事件"页签，可设置组件的关联事件。例如，选择一个"按钮"，在按钮的"点击"事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。
  图5编辑组件的关联事件   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894302608.png "点击放大") 
- 利用组件导航，快速选中组件。 当选中某个组件时，页面上方会在组件导航上显示组件的html标签层级。当组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，单击[图5]组件导航中的"页面"，可直接选中页面上的最外层页面组件。
  
- 利用组件树，快速选中组件。 在组件数量比较多，位置较为紧密时，也可以单击页面右下角的"组件树"，展开组件树。在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。
  图6利用组件树快速选中组件   
  ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894142708.png "点击放大") 
 
#### 标准页面与高级页面的区别
- 标准页面提供了流式布局（Flow Layout）和弹性布局（Flex Layout），高级页面提供了流式布局与绝对布局，适用于对样式个性化布局需求更高的业务场景。
- 标准页面提供了基础组件，高级页面具有更复杂的展示组件，如水滴图、折线图等。
- 在沙箱环境、运行环境中，标准页面不支持匿名访问，"高级页面"则支持匿名访问。
更多关于高级页面的介绍，请参见[5.1 什么是高级页面](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9092.html)。