云服务器内容精选

华为云首页用户手册

标准页面

ASTRO轻应用 ASTROZERO-创建空白AstroZero标准页面:创建标准页面

创建标准页面参考登录AstroZero新版应用设计器中操作，进入应用设计器。在应用设计器的左侧导航栏中，选择“界面”。（可选）单击页面后的，为标准页面添加目录。标准页面默认存放在根目录下，在创建标准页面前，您可以先创建标准页面存放的目录，也可以在标准页面创建后将其拖拽到指定目录。将鼠标放在已创建的标准页面目录上，单击。如果无需创建标准页面目录，请直接单击页面后的。选中“空白”，设置页面的标签和名称，单击“添加”。图1 设置标准页面基本信息表1 标准页面参数说明参数说明标签输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。名称输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。说明：名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。根据业务需求，设计标准页面。参考为AstroZero标准页面添加组件中操作，为标准页面添加组件。参考设置AstroZero标准页面组件属性中操作，设置标准页面组件属性。参考添加事件实现AstroZero组件间交互中操作，为组件添加交互动作。设计完成后，单击页面上方的，保存标准页面。保存成功后，单击，预览标准页面。如果预览效果和预期不符，可返回标准页面进行修改，直至符合预期。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面表单组件属性:样式

样式针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。布局：对页面 CSS 属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写 CS S代码进行更深度的个性化布局定制。单击“显示”属性后的按钮，可以快速指定当前元素布局为“block”、“inline-block”、“inline”和“flex”。 “显示”属性下方展示了当前元素的盒模型示意图，在对应的数字位置单击并改变值，即可快速改变元素上下左右位置上的内外边距属性。当前元素盒模型示意图下方，展示了当前元素的宽和高，默认是根据当前布局自适应后的宽高，可以在这里手动输入值配置当前元素的宽和高。盒模型和宽高配置时，支持“px”、“em”、“%”、“auto”等多种单位。图5 样式属性配置面板字体：设置字体大小、字体样式、颜色等。背景：设置背景颜色、透明度。边框：设置边框颜色、宽度等，支持“px”、“em”和“%”三种单位。阴影：设置阴影颜色、模糊、扩散等，支持“px”、“em”和“%”三种单位。高级设置：在高级设置中，直接编写CSS代码作用于当前元素。同一个组件如果在“基本属性”和“样式”中，同时对布局属性进行了设置，最终生效是“样式”栏中的设置。样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面表单组件属性:数据绑定

数据绑定通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。图3 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。表1 模型来源说明分类模型说明模型参数的定义模型方法的定义 API调用方法自定义开发者自行定义的模型。由开发者自定义，可以添加子节点。开发者自定义方法。 $model.ref("modelName").actionName(); 对象由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。系统自动生成run方法，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。参数根据后台事件的字段映射生成。直接使用直接使用除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。在“数据绑定”中，单击“属性值绑定”后的“+”。在“属性”下拉框中，选择容器的某个属性。在模型字段中，单击，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。图4 定义模型在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-将AstroZero标准页面保存为模板:自定义标准模板

自定义标准模板参考登录AstroZero新版应用设计器中操作，进入应用设计器。在应用设计器的左侧导航栏中，选择“界面”。在页面中，将鼠标放在对应的标准页面上，单击，选择“编辑”。在标准页面的编辑页面，单击，进入另存为页面。设置模板标签和名称，打开“另存为模板”开关，单击“创建”。图1 另存为模板表1 另存为模板参数说明参数说明标签输入模板的标签名，用于在页面显示，创建后可修改。名称输入模板的名称，名称是模板在系统中的唯一标识，创建后不可修改。命名要求：必须以字母开头，不允许有连续的下划线，空格和特殊字符。另存为模板（模板可在标准页面-页面模板中查看到）勾选后，该标准页面模板，可在页面模板中查看到。缩略图显示当前标准页面的缩略图。另存为完成后，当前用户或同一华为账号下的其他用户，创建类似应用时，可以直接使用该模板来创建。图2 选择基于模板图3 我的模板

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面模态框组件:基本属性

基本属性基本属性通过数据绑定后，在运行时以数据绑定的值为准。标题：模态框的标题。确定按钮文字：模态框的“确定”按钮上的文字。取消按钮文字：模态框的“取消”按钮上的文字。显示Loading：开启后，确定按钮显示loading状态。显示遮罩层：开启后，显示遮罩层。点击遮罩层关闭：开启后，允许单击模态框外的遮罩层关闭模态框。关闭后，必须先对该模态框进行响应，才能将该模态框关闭，例如单击模态框中的按钮（“确定”、“取消”）以及图标。可拖动：开启后，该容器可拖动。不显示底部：开启后，隐藏“确认”和“取消”按钮区域。显示取消按钮：开启后，显示取消按钮。确定按钮在前：开启后，确认按钮在前。确定按钮禁用：开启后，确认按钮被禁用。懒加载：开启后，弹框不打开不渲染，以提高性能。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面模态框组件:数据绑定

数据绑定通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。表1 模型来源说明分类模型说明模型参数的定义模型方法的定义 API调用方法自定义开发者自行定义的模型。由开发者自定义，可以添加子节点。开发者自定义方法。 $model.ref("modelName").actionName(); 对象由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。系统自动生成run方法，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。参数根据后台事件的字段映射生成。直接使用直接使用除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。在“数据绑定”中，单击“属性值绑定”后的“+”。在“属性”下拉框中，选择容器的某个属性。在模型字段中，单击，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。图3 定义模型在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-什么是标准页面:与高级页面的区别

与高级页面的区别标准页面提供流式布局（Flow Layout）和弹性布局（Flex Layout），高级页面提供流式布局与绝对布局，适用于对样式个性化布局需求更高的业务场景。标准页面提供基础组件，高级页面具有更复杂的展示组件，如“地图”、“水滴图”和“折线图”等。在沙箱环境、运行环境中，标准页面均不支持匿名访问，“高级页面”则支持匿名访问。更多高级页面的介绍，请参见5.1 什么是高级页面。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-什么是标准页面:初识标准页面

初识标准页面将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面。页面创建后，自动进入标准页面开发界面，您可以阅读以下内容初步了解标准页面。图1 标准页面开发界面标准页面开发界面由四部分组成，分别是：左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域，具体功能说明如下表所示。表1 界面布局说明分类功能说明按钮区域页面功能按钮区域，包括获取锁、释放锁、保存、另存为、预览页面、修订记录、操作回退、撤销回退、页面性能分析、布局切换以及发布成高级页面组件的操作。组件区域页面的组件区域。设计页面时，需要从组件区域拖拉拽各种组件（按住鼠标拖动）到工作区域中以丰富页面功能。组件区域由以下两个页签组成：基本组件：平台预置的各类组件，具体说明如基本组件分类说明所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。平台标准组件介绍介绍了常用的基本组件属性说明。扩展组件：存放用户自定义的组件，自定义组件由用户在线下开发完成并上传到AstroZero，用于丰富页面组件的功能。自定义组件开发过程及上传方法，请参考创建自定义标准组件。工作区域工作区域即是编辑页面内容区域以及页面视图区，主要的页面布局设计操作区域，完成对页面具体布局、组件放置等操作。设计视图：页面默认视图，此视图下，可以在页面内容中，通过拖拉拽的方式对需要在页面布局中展示的组件元素进行编排，所有组件视图化，所见即所得，让您快速构建您需要的页面布局。页面右上角“外层容器”开关，可快速呈现外层容器和范围。模型视图：该页面所涉及的模型展示视图。事件视图：该视图下，页面布局中各事件以代码形式展示在工作区域。样式代码：页面自定义的样式代码。更多：单击“更多”后，将会展开以下页签。模型代码：该视图下，页面布局中各模型以代码形式展示在工作区域。第三方库：该页面加载的第三方库代码。可配置页面元素区域页面和组件属性设置区域，在该区域可以对组件属性、事件进行设置，也可以加载第三方库以完成对组件的应用。该区域由以下三个页签组成：属性：组件的属性展示区域，可在属性面板修改组件属性使页面达到预期效果。在工作区域“设计视图”下选中组件，键盘上按Tab键，可在“属性”页签中切换属性参数项，按Enter键可设置属性值。事件：进入事件编排器的入口，您可通过系统预置的事件编排器，或者直接通过定义JS代码，来实现页面组件与后台接口之间的交互。库：加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成，用户可以在该页签下新增或删除某些库。系统默认会提供部分库，若不满足现有需求，也可以根据实际情况加载新的库。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-什么是标准页面:基本组件分类说明

基本组件分类说明组件包括平台预置基本组件、用户自定义的扩展组件，基本组件具体说明如表2所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。表2 基本组件分类说明分类说明布局用于控制页面的布局，即将页面设计几行几列。例如先拖入一个栅格容器，将栅格容器用行列划分成小区域后，再向单元格中拖入其他组件。容器本身可以包含容器，也可以包含其他组件。表单：元数据表单。根据数据对象可生成表单。可用于制作带数据的交易类页面。表格：元数据表格，用于展示对象记录。根据数据对象可生成表格。数据对象中的属性映射为表格中的列。用于通过一个表格完成数据对象的增、删、改、查操作场景。基础容器：基本的布局容器，支持拖拽放置任何组件进去，按照流式布局模式布局（非独占整行组件如按钮组件，从左往右排列，占满整行即换行；独占整行组件如标题组件，则默认独占一行）。分栏：容器组件，相当于行，内部可分多栏（列）。可将页面划分为两栏或者多栏，每一栏都可以拖入其他组件。折叠面板：用于对页面的某些区域进行折叠和展开，可放下多个折叠页组件。页签：用于制作多页签页面时使用，可放下多个页签组件，实现多页签效果，可在不同的页签内放置内容，通过点击标签切换显示不同的内容。列表视图：用于灵活组合列表项的内容，并且根据实例化数据动态展示。使用时需要在List View上绑定数据模型。数据类型为数组。如果要使用分页，分页组件需放在List View Container内。模态框：弹框样式布局，使用数据绑定实现双向绑定，通过控制模型的值true、false来显示、隐藏对话框。表单输入框：文本输入框，关联对象文本（text）类型，可编辑一行的文本控件，包含标签。控件内的标签将其与输入组件区分开。适用于普通文本输入。多行输入框：多行文本输入区域，关联对象文本区（Text Area）类型，多行可编辑的文本控件。适用于多行文本输入。日期选择框：用于日期选择或输入，关联对象日期（Date）类型、日期/时间（Date/Time）类型，可以选择或输入日期，支持年、月、日期等类型，支持选择范围。数字输入框：数字（Number）类型的输入框，关联对象数字类型。复选按钮：该控件允许用户从多个选项中进行多种选择。单选按钮：用于有一组可选项的单项选择，或者切换某个选项的选中状态，以实现从一组互斥的选项组中选择一项。下拉框：下拉框的可选值为对象的SingleSelect类型字段的不同Picklist取值，也可以是自定义json数据。如果Picklist和自定义json数据同时存在，以Picklist的取值为准。级联选择框：提供按层级选择的选择框，可对选择框的数据进行校验，可以对数据进行搜索。开关：滑动开关，可关联对象的复选框（Boolean）类型字段。允许用户选择“真”（选取）或“假”（不选取）值。上传：文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。自动完成：带有提示的文本输入框。弹出对话框：单击后会弹框的组件，需要自定义实现代码。多语言选择框：多语言切换组件，关联对象多语言（mutillang）类型。评分：评分、评价组件。关联选择框：一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。基本按钮：通过编排事件实现Button，触发业务逻辑使用。按钮卡：包含多个按钮（两个或更多）的整体面板。该组件可用于构建多项菜单，用于在视图之间导航。标签：用于显示页面信息的静态文本。图标：用于辅助相关文字进行展示，也可当做按钮点击使用，常配合其他组件一起使用。标题：用于添加具有标题意义的文字，可以通过选择属性“标题类型”的值来控制添加的标题的文字大小。链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。面包屑：是项目中常用的一种组件。结构大致是“首页/菜单1/菜单2/菜单3”。滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等地方。当鼠标在轨道上点击时，滚动球会移动到当前鼠标点击的位置，单击过的地方会以蓝色显示，未单击的地方是灰色。分页：用于多条数据展示时可设置分页展示，每页展示固定数据条数。高级选项树：树形结构选择设置。适用于要展示的数据为树形结构。步骤条：步骤进度条。可设置总步骤数和每一步的展示名称。时间轴：一般绑定数据服务使用，动态的展示时间轴的内容。走马灯：在满足设置的条件可切换显示灯。可收缩面板：弹性伸缩布局，可左右伸缩的容器。滚动容器：由于屏幕尺寸限制，当页面内容已经超出屏幕的范围时，需要拉动滚动条，在有限的屏幕中浏览更多内容。代码块：用于代码块展示。选择卡：可从某一卡片区域选中到另一卡片区域。栅格容器：用于控制页面的布局，即将页面设计几行几列，先设置元素在页面中纵向排列，然后在每一行中又可设置元素横向排列。标签栏：只有页面布局模式为手机模式时，才会显示该组件。为底部导航组件，单击标签栏中的选项可切换本应用中不同的页面。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-什么是标准页面:快速开始

快速开始在进行标准页面设计前，需要对开发界面进行全面的了解。将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面，页面创建后，自动进入标准页面开发界面，标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”上。图2 标准页面编辑界面（UI Builder）在配置使用组件前，您可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标，单击问号图标，即可进入该组件介绍页面。若需了解更多AstroZero预置组件的使用及配置方法，请参见平台标准组件介绍。图3 组件的帮助图标在“设计视图”中，选中一个页面组件，可在右侧“属性”页签，设置该组件的绑定数据、样式等属性，如图4所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。图4 组件属性面板在“设计视图”中，选中任意组件，可以在右侧“事件”页签，设置组件的关联事件。例如，选择一个“按钮”，然后在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。图5 编辑组件的关联事件利用组件导航，快速选中组件。当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，您可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。利用组件树，快速选中组件。在组件数量比较多，位置较为紧密时，您也单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。图6 利用组件树快速选中组件

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-AstroZero标准页面概述:什么是标准页面

什么是标准页面标准页面是一种将一个或多个组件拖进画布，进行低代码甚至无代码的配置，即可快速完成业务功能的前端页面。对于一般的业务应用系统，例如请假电子流、出差报销、在线投票等企业常见业务场景，其功能主要是针对业务数据的增、删、改、查，且前端界面的样式相对简单的页面，可以使用AstroZero提供的标准页面。标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-AstroZero标准页面概述:标准页面常用操作入门

标准页面常用操作入门在进行标准页面设计前，建议您先对开发界面的常用操作进行简单的了解。在应用设计器的“界面”中，单击页面后的“+”，设置页面标签和名称，单击“添加”，即可创建一个标准页面（空白页面或基于模板创建）。标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”。图2 拖拽组件到设计视图在配置使用组件前，可以将光标放在每个组件上，单击组件右上角的图标，可查看组件的详细介绍。如果需了解更多预置组件的使用及配置方法，请参见设置AstroZero标准页面组件属性。图3 组件的帮助图标在“设计视图”中，选中某个组件，在右侧“属性”页签，可设置该组件的绑定数据、样式等属性，如图4所示。图4 组件属性面板在“设计视图”中，选中某个组件，在右侧“事件”页签，可设置组件的关联事件。例如，选择一个“按钮”，在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。图5 编辑组件的关联事件利用组件导航，快速选中组件。当选中某个组件时，页面上方会在组件导航上显示组件的html标签层级。当组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，单击图5组件导航中的“页面”，可直接选中页面上的最外层页面组件。利用组件树，快速选中组件。在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树。在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。图6 利用组件树快速选中组件

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-调测AstroZero标准页面:调试事件

调试事件打开一个标准页面。图1 标准页面实例选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。图2 单击文件上传后的加号在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。图3 使用“debugger”设置断点返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。图4 “Console”页签查看日志相关信息图5 在“Network”页签查看网络请求信息单击上传按钮上传文件，由于之前在上传事件的自定义JavaScript代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。图6 调试JavaScript代码

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-标准页面布局:基础布局设置

基础布局设置标准页面提了流式布局（Flow Layout）和弹性布局（Flex Layout），标准页面的基础布局主要是通过“容器”组件实现的。容器组件就是基础的布局容器，可以将其理解为CSS中DIV的概念。DIV是层叠样式表中的定位技术，全称Division，即为划分，有时可以称其为图层。 DIV是HTML中的一个标签元素，用来为HTML文档内大块的内容提供结构和背景的元素，可以将“容器”简单理解为画布，通过设置外层画布的属性达到控制内容布局的效果。流式布局容器组件默认弹性布局未开启，处于流式布局的状态，如图1所示。图1 流式布局在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图2所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。图2 流式布局中组件为块级元素流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图3、图4所示。图3 居中水平对齐图4 靠右水平对齐弹性布局将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局，弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图5所示。图5 弹性布局为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图6所示。图6 弹性布局默认效果排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图7。图7 排列方向“列” 水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图8、图9所示。图8 水平对齐方式选择“中间对齐” 图9 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图10、图11所示。图10 垂直对齐方式选择“中间对齐” 图11 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图12所示。图12 弹性布局实现居中

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-标准页面布局:自适应布局

自适应布局自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人满意的效果。利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提供某一部分的布局，多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中，“栏”组件的呈现形式，实现不同大小屏幕下不同的显示方案，如图13。图13 分栏组件 “分栏”组件右侧属性配置面板的“行布局”中，可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。为了方便说明，如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图14。图14 分栏组件模拟录入员工信息 “phone”属性中，可以依据图示，选择“分栏”组件中“栏”，在移动端的布局形式，如图12所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列，此时单击页面上方的“全屏”，手机图标就可以模拟在移动端展示的效果，如图15。图15 移动端展示效果“竖排” 如果在“phone”中，依旧选择从左到右的布局方式，则展示效果如图16。图16 移动端展示效果“横排” 布局模式：可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的介绍请参见标准页面布局。录入分隔比例：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”为“8:8:8”，如图17所示。图17 “录入分隔比例”为“8:8:8” 调整“录入分隔比例”为“6:12:6”时，中间的“栏”的宽度就会按比例放大，两侧“栏”的宽度按比例缩小，如图18。图18 “录入分隔比例”为“6:12:6”

ASTRO轻应用 ASTROZERO 标准页面