检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用华为云Astro轻应用创建高级页面适配多终端显示 期望实现效果 当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，华为云Astro轻应用提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供“拉伸”功能
访问方式 您可以通过以下任何一种方式访问华为云Astro轻应用。 管理控制台 基于浏览器的可视化界面，即控制台方式访问华为云Astro轻应用，详情请参见用户指南。 REST API 使用华为云Astro轻应用服务提供的REST API接口以编程方式访问华为云Astro轻应用，详情请参见API参考。
设计，是高级页面适配多终端的重要前提。 电脑端和手机端视图 为了让同一网页能够完美呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后，发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测加载相应视图页面。
如何适配多终端 什么是适配多终端 适配多终端样例 父主题： 高级页面
适配多终端样例 场景描述 本章节以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。 商品列表组件可以用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。例如，视区（屏幕或浏览器可视区域）由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。
为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 默认为电脑端和手机端全部选中。
n配置中文和英文两种语言属性。 使用华为云Astro轻应用创建高级页面适配多终端显示 当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，华为云Astro轻应用提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供“拉伸”功能辅助自适应。
是高级页面适配多终端的重要前提。在高级页面中如何实现多终端适配，请参见使用AstroZero创建高级页面适配多终端显示 电脑端和手机端视图 为了让同一网页能够完美呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定
代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。
站点设置 合并并压缩资源：勾选后，在发布该应用时，对应用中所有高级页面涉及的css和js文件进行合并及压缩，这样可以有效降低运行时服务器压力，但从终端浏览器首次访问该站点页面时，访问时间会稍微增加。 资源延迟加载：勾选后，在body标签中加载资源。 包含HTML5的DOCTYPE标签：勾
高级页面专项 使用华为云Astro轻应用自定义组件在页面中的属性 使用华为云Astro轻应用为组件配置中英文语言属性 使用华为云Astro轻应用创建高级页面适配多终端显示 使用华为云Astro轻应用开发高级页面时如何引用第三方库 在华为云Astro轻应用高级页面中使用花瓣图展示订单数据
高级页面布局 全局高级组件 开发高级组件 如何实现组件交互 如何调用后台接口 如何自定义组件属性 如何配置组件多语言 如何引入第三方库 如何适配多终端 如何使用WebSocket 管理页面级数据源、全局状态 如何检查页面性能 如何调测前台页面 如何设置页面水印 父主题： 经典版开发指导（白名单特性）
高，软件实现越来越复杂，软件构建技术难度呈指数级增长。华为云Astro轻应用充分考虑了开发者和企业用户的痛点，提供了高效率、高效能的开发平台。 降低应用构建门槛 全云化线上开发，No Code/Low Code开发模式，多终端适配，所见即所得的应用构建，图形化业务编排，具备极低的
创建统计报表入口 配置统计页面。 在页面左上角，设置统计页面名称。 在页面上方，单击“选择布局”后的箭头图标，选择页面布局。 选择终端视图类型，支持电脑端和移动端。 参考统计页面组件介绍，从左侧选择合适的组件类型拖入到中间区域，并设置组件属性。 如图3所示，使用了饼图、柱状图、汇总
对接华为云ModelArts 背景信息 ModelArts是面向AI开发者的一站式开发平台，提供海量数据预处理及半自动化标注、大规模分布式训练、自动化模型生成及端-边-云模型按需部署能力，帮助用户快速创建和部署AI智能模型，管理全周期AI工作流。更多ModelArts的介绍，请参见ModelArts官方网站。
代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。
如图2，单击已有视图后的“+”，进入新建视图开发页面。 图2 新建视图 在页面左上角，设置视图页面名称。 图3 设置视图页面名称 在中间区域上方，选择终端视图类型，当前支持电脑端或移动端。 根据需要从左侧选择组件拖拽到中间区域，并设置组件属性，组件属性配置说明可参考零码组件介绍。 图4 拖拽组件 在右侧
归档实例配置 设置数据归档实例后，该账号下的所有归档任务都会将数据归档存放到此实例中。华为云Astro轻应用只提供归档实例数据的功能，不提供归档实例数据的存储功能。 设置归档实例 在华为云Astro轻应用服务控制台，单击“进入首页”，进入应用开发页面。 在页面左上方单击，选择“环境管理
服务器成功处理了部分GET请求。 300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如浏览器）选择。 301 Moved Permanently 永久移动，请求的资源已被永久的移动到新的URI，返回信息会包括新的URI。
在调用Astro轻应用API前，请确保已充分了解Astro轻应用的相关概念，详细信息请参见产品介绍。 终端节点 终端节点即调用API的请求地址，AstroZero当前仅支持在华北-北京四的环境使用，AstroZero服务的终端节点开发态默认域名为“appcube.cn-north-4.huaweicloud
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
