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