检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
图1 选择设置 在外观设置中，设置应用布局样式。 桌面端：设置应用在PC端显示的样式。 移动端：设置应用在移动端显示的样式。 应用主题：系统预置的主题颜色，单击“管理应用主题”，可自行设计应用主题。 布局选项：提供了一些常见选项，用于设置应用布局。 启用页签栏：是否启用页签栏。
在“布局”页签，单击待删除页面布局后的。 图2 删除标准页面对应对象的布局 勾选“是的，我想要删除这条记录”，单击“确认”，即可彻底删除对象。 父主题： 应用后端开发
配置应用程序的布局。 ：将应用发布到小程序运行。 ：支持查看具体版本对应的该应用的高级页面。在高级页面中单击“查看页面地址”可查看页面的地址。 ：该图标只在开发环境出现，表示删除应用。 父主题： 应用管理
在页面上方，单击“选择布局”后的箭头图标，选择页面布局。 选择终端视图类型，支持电脑端和移动端。 参考统计页面组件介绍，从左侧选择合适的组件类型拖入到中间区域，并设置组件属性。 如图3所示，使用了饼图、柱状图、汇总值组件，并根据表单填报数据配置组件属性。
根据权限查看应用的页面布局。 根据权限查看、创建、编辑和删除应用中的对象。 根据权限查看和编辑应用中的对象字段。 根据权限执行应用中开发的服务编排、脚本、BPM。 根据权限访问在应用中自定义的公共接口。
高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面，您也可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。
场景描述 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示，页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。
设置AstroZero标准页面面包屑组件属性 面包屑组件用于显示网站的层级结构，告知用户当前所在位置。 图1 面包屑组件 数据绑定 将面包屑组件的某个属性，如隐藏、样式、跳转等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。
面包屑：显示网站的层级结构，告知用户当前所在的位置，如“首页/菜单1/菜单2/菜单3”。 滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等组件中。
在对象详情页单击“布局”页签，进入该对象的布局。 如图3，单击“Class Records”后的，会弹出布局预览页面。 图3 如何进入布局预览页面 在布局的预览页面，单击“添加”，新增并保存即完成增加一条数据操作。
高级页面 对于一些样式比较复杂的页面，例如网站、电商、园区大屏等，您可以使用平台提供的“高级页面”。高级页面详细介绍，请参见高级页面。 报表 报表是AstroZero对内部数据提供的一种汇总方式的视图。利用报表功能，可以让数据进行可视化的展示，并进行分析与洞察。
验证 “工单列表（客服人员）”和“生成工单”页面开发完成后，需要验证两个页面间的关联跳转事件，以及相关页面布局样式。 操作步骤 在“HW__workOrderList”页面中，单击界面上方预览图标。 系统会弹出预览页面。 查看页面中页面布局、样式是否符合预期。
样式 针对有丰富前端开发经验的用户，可通过“样式”面板对页面进行更深度的个性化布局定制。 布局：对页面CSS属性进行直接配置，如设置组件的宽度、高度等。您也可以在“高级设置”中，直接编写CSS代码进行更深度的个性化布局定制。
极简、易用、高效 图10 新老设计器对比 更合理的空间布局 新版设计器优化了功能入口布局，寻找功能更符合开发者思维习惯。 引导式开发体验 以需求场景为开发起点，一路引导，让开发旅程更顺畅。 降低门槛 持续降低开发门槛，功能更易用。
查看AstroZero中已安装的应用 在应用列表中，可以查看当前账号已安装的应用，并配置导航条和布局。 查看已安装的应用 在AstroZero服务控制台，单击“进入首页”，进入应用开发页面。 单击页面左上角的，选择“环境管理 > 环境配置”，进入环境配置页面。
本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。参考消费者业务网站（如图1所示），页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
图4 自定义行布局 布局模式：设置PC或Phone屏幕，每一个分栏的栏布局模式。 流式布局：页面元素的宽度，按照屏幕分辨率进行适配调整，但整体布局不变。 弹性布局：可以简便、完整、响应式的实现各种页面布局，选择“弹性布局”时还可以设置垂直对齐方式、水平排列方式以及分栏间隔。
在标准页面设计界面，从“基本组件 > 布局”中，拖拽“模态框”组件至页面工作区域，如图1。 图1 模态框 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。
首次创建高级页面时，会出现视图选项，请勾选“电脑端”和“手机端”，布局类型选择“流式布局”（流式布局为自适应布局）。 图3 新建CommodityDisplay高级页面 开发CommodityDisplay电脑端和移动端高级页面。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
