检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
场景描述 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示，页面中主要包含标签栏和详情展示模块两部分，可以通过切换标签来控制详情展示模块中的展示内容。
本脚本实例不涉及对象，及调用接口等内容，脚本只实现请求“http://www.example.com”，返回网站请求的消息头功能。 创建空白脚本 参考登录经典应用设计器中操作，登录经典版应用设计器。 将光标放在某个文件夹（例如Logic）上，单击，选择“脚本”。
更多ModelArts的介绍，请参见ModelArts官方网站。 在AstroZero中，通过配置ModelArts连接器，可实现AstroZero与华为ModelArts对接，用于图像识别、文字识别等AI（人工智能）场景。 场景描述 对花卉类图片进行识别，识别出具体花卉品种。
您也可以为图片添加超链接，即单击图片，跳转到指定的网站。 图1 最终实现效果 功能实现方法 在应用设计器中，选择“界面”，单击高级页面后的“+”，新建一个高级页面。 单击，拖拽轮播组件到右侧画布中。 图2 拖入轮播组件 在轮播组件上，单击右键选择“高级设置”。
使用企业账号登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 在左侧导航栏上方，单击，选择服务实例所在的区域项目。 单击，在查找框中搜索“Astro轻应用（原AppCube）”，单击查找出的结果，进入AstroZero管理控制台。
设置AstroZero标准页面面包屑组件属性 面包屑组件用于显示网站的层级结构，告知用户当前所在位置。 图1 面包屑组件 数据绑定 将面包屑组件的某个属性，如隐藏、样式、跳转等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。
该布局常用于常规Web应用开发，例如电商网站、管理网站等等。 搭建高级页面。 在高级页面开发界面，单击，打开组件列表。 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。 图11 搭建高级页面 进行组件属性配置。
流式布局 流式布局为自适应布局，用于常规Web应用开发，例如电商网站、管理网站等。流式布局为12列栅格布局，可拖动组件右侧边界，按栅格进行组件宽度调整。组件高度将根据组件内容进行自适应，页面中组件将按照从左到右、从上到下的顺序依次排列。
面包屑 面包屑组件用于显示网站的层级结构，告知用户当前所在位置以及在需要向上级导航时显示。 在标准页面设计界面，从“基本组件 > 基本”中，拖拽“面包屑”组件至页面工作区域，如图1。 图1 面包屑 查看组件帮助 将鼠标放在对应的组件上，单击，可查看组件说明。
流式布局常用于常规Web应用开发，例如电商网站、管理网站等。 开发高级页面。 下面以开发一个绝对布局的高级页面为例，向您如何使用AstroZero快速开发一个高级页面。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。
登录AstroZero新版应用设计器 新版应用设计器优化了功能入口布局，寻找功能更符合开发者思维习惯。 同时，以需求场景为开发起点，一路引导，让开发旅程更顺畅。申请AstroZero免费试用或购买商用实例后，即可参考本章节操作登录新版应用设计器，开启您的应用开发之旅。
页面 新创建的页面，默认是一个空白的页面框架，可以通过设置页面属性，优化页面效果，支持设置页面水印。 在标准页面设计界面，选择“组件导航 > 页面”后，即可选中“页面”页签。在右侧的属性页签中，可设置整个页面的属性。
优化数据标题，支持自定义文字内容。 优化周期填报的配置能力，支持更灵活的场景配置。 优化表单组件的默认值能力。 优化零代码菜单能力，支持通过iframe嵌套其他页面作为菜单。 优化组件取色笔能力，支持自定义颜色。 商用 部门 定位 新建外部链接 跨应用共享
进入经典版开发环境 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 图1 进入华为云控制台 在左侧导航栏上方，单击，选择服务所在的区域。 单击，在查找框中搜索“Astro轻应用”，单击查找到的结果，进入AstroZero服务控制台。
如何进入经典开发环境 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 单击管理控制台左上角的，展开服务列表，选择“开发与运维 > Astro轻应用（原AppCube）”，进入AstroZero服务控制台。
操作步骤 使用企业账号登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 在左侧导航栏上方，单击，选择服务实例所在的区域项目。 单击，在查找框中搜索“Astro轻应用（原AppCube）”，单击查找出的结果，进入AstroZero管理控制台。
流式布局常用于常规Web应用开发，例如电商网站、管理网站等。 绝对布局高级页面 创建绝对布局类型的高级页面。 参考登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。
图1 标准页面 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面，您也可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。
高级页面：对于一些样式比较复杂的页面，例如网站、电商、园区大屏等，您可以使用平台提供的“高级页面”。 高级页面是由一个或者多个Widget（即组件）拼装而成。如图1所示，组件是可复用的页面组成元素，一个页面由一个或多个组件拼装而成。
在开发环境新增业务用户 使用华为账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。 在左侧导航栏上方，单击，选择服务实例所在的区域项目。 单击，在查找框中搜索“Astro轻应用（原AppCube）”，单击查找到的结果，进入AstroZero服务控制台。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
