# 使用华为云Astro轻应用创建高级页面适配多终端显示 #### 期望实现效果 当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，华为云Astro轻应用提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供"拉伸"功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。下面以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。 商品列表组件可以应用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。如[图1]中呈现的效果，屏幕或浏览器可视区域由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。 图1商品列表组件的响应式设计 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001945695633.gif "点击放大") #### 功能实现方法 1. 下载组件模板。 1. 在华为云Astro轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。 2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001949279565.png)，选择"环境管理 \> 环境配置"，进入环境配置。 3. 在主菜单中，选择"维护"。 4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件模板"。 5. 在组件列表中，单击widgetVueTemplate，进入模板详情页。 6. 单击"下载"，设置组件的名称为"commodityListWidget"，单击"保存"，将模板下载到本地。 如果选择"下载原始模板"，下载到本地的组件包中，组件名称不会被修改。 图2保存模板 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992366177.png "点击放大") 2. 解压下载到本地的模板包，新建"img"文件夹，存放商品图片，此处存放了10张商品图片，分辨率统一为380x440，如[图3]所示。 图3新建img存在商品图片 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913336548.png "点击放大") 3. 在commodityListWidget.js中，新建Commodity对象并为其赋值。 其中，Commodity对象包含三个属性，分别为src（商品图片路径）、title（商品标题）和content（商品描述）。 ``` var vm = new Vue({ el: $("#widgetVueTemplate",elem)[0], data:{ Commodity: [ { src: widgetBasePath+"img/mate40.PNG", title: "HUAWEI Mate 40", content: "HUAWEI Mate 40 5G 全网通 8GB+128GB（亮黑色）" }, { src: widgetBasePath+"img/mate40White.PNG", title: "HUAWEI Mate 40", content: "HUAWEI Mate 40 5G 全网通 8GB+128GB（釉白色）" }, { src: widgetBasePath+"img/mate40pro.PNG", title: "HUAWEI Mate 40 Pro", content: "HUAWEI Mate 40 Pro 全网通 8GB+128GB（亮黑色）" }, { src: widgetBasePath+"img/mate40proWhite.PNG", title: "HUAWEI Mate 40 Pro", content: "HUAWEI Mate 40 Pro 全网通 8GB+256GB（秘银色）" }, { src: widgetBasePath+"img/mateXs.PNG", title: "HUAWEI Mate Xs", content: "HUAWEI Mate Xs 5G 全网通 8GB+512GB（星际蓝）" }, { src: widgetBasePath+"img/mate30Epro.PNG", title: "HUAWEI Mate 30E Pro", content: "HUAWEI Mate 30E Pro全网通 8GB+128GB（星河银）" }, { src: widgetBasePath+"img/p40pro.PNG", title: "HUAWEI P40 Pro", content: "HUAWEI P40 Pro 5G 全网通 8GB+256GB（零度白）" }, { src: widgetBasePath+"img/nova8Black.PNG", title: "HUAWEI nova 8", content: "HUAWEI nova 8 8GB+128GB 全网通版（亮黑色）" }, { src: widgetBasePath+"img/nova8Provence.PNG", title: "HUAWEI nova 8", content: "HUAWEI nova 8 8GB+128GB 全网通版（普罗旺斯）" }, { src: widgetBasePath+"img/nova7Purple.PNG", title: "HUAWEI nova 7", content: "HUAWEI nova 7 8GB+128GB 全网通版（仲夏紫）" } ] } }); ``` 4. 在commodityListWidget.ftl中定义渲染页面，遍历Commodity对象，将多个商品的图片、标题和描述显示于组件中。 ```

{{obj.title}}

{{obj.content}}

``` 5. 在commodityListWidget.css中，定义组件的样式。 其中，采用百分比调节单个商品宽度，并设置断点，通过@media查询改变不同视区宽度下商品显示宽度的百分比。 ``` /*设置组件字体、内边距、外边距和背景颜色*/ #widgetVueTemplate{ font:15px/1.5 Arial, Helvetica, 'Microsoft YaHei'; padding:0; margin:0; background-color: #f4f4f4; } /*商品列表*/ #boxes{ margin-top:10px; } /*商品列表宽度为boxes宽度80%*/ .container{ width:80%; margin: auto; overflow: hidden; } /*单商品样式 默认宽度为.container宽度18%，单行商品最大个数：5*/ #boxes .box{ background: #ffffff; float:left; text-align: center; width:18%; padding:5px; margin: 7px 7px 7px 7px; } /*商品图片样式 默认宽度为.box宽度95%，为保证在屏幕宽度较大时，图片比例合理，限制其最大宽度为200px*/ #boxes .box img{ width: 95%; max-width:200px; margin-top: 5px; } /*商品描述样式 防止描述文字行数不同导致的商品高度不同而产生排列错位，限制其最小高度为44px*/ #boxes .box p{ min-height: 44px; } /*Media Queries 根据max-width（视区最大宽度）设置断点，调节单个商品的宽度以改变单行商品最大个数*/ /*视区宽度介于1600px-1700px，单行商品最大个数：4*/ @media(max-width:1700px){ #boxes .box{ float:left; text-align: center; width: 22%; } } /*视区宽度介于1400px-1600px，单行商品最大个数：3*/ @media(max-width:1600px){ #boxes .box{ float:left; text-align: center; width: 30%; } } /*视区宽度介于800px-1400px，单行商品最大个数：2*/ @media(max-width:1400px){ #boxes .box{ float:left; text-align: center; width: 44%; } } /*视区宽度800px以下，单行商品最大个数：1*/ @media(max-width:800px){ #boxes .box{ float:none; text-align: center; width: 95%; } } ``` 6. 设置完成后，重新打包（包名为commodityListWidget.zip）。 您也可以直接单击[commodityListWidget.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/commodityListWidget.zip)，下载commodityListWidget商品列表组件示例开发包。 7. 打包上传commodityListWidget商品列表组件。 1. 在环境配置页面的主菜单中，选择"维护"。 2. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件"。 3. 单击"提交新组件"，进入提交新组件页面。 4. 单击"请选择源文件(.zip)"，选择[6]中的商品列表组件包commodityListWidget.zip，输入发行说明为"commodityListWidget"，单击"提交"。 8. 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图4界面报错 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953304910.png) 1. 在应用设计器中，单击左侧导航栏中的"设置"。 2. 在"高级设置"中，取消勾选"页面组件的渲染框架由Vue2升级为Vue3"开关。 图5取消选中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987234061.png "点击放大") 9. 创建CommodityDisplay高级页面。 首次创建高级页面时，会出现视图选项，请勾选"电脑端"和"手机端"，布局类型选择"流式布局"（流式布局为自适应布局）。 图6新建CommodityDisplay高级页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992247429.png "点击放大") 表1创建高级页面CommodityDisplay参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 新建高级页面的标签，创建后可修改。 取值范围：1\~100个字符。 | CommodityDisplay | | 名称 | 新建高级页面的名称，创建后不可修改。命名要求如下： - 1\~100个字符。 - 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。 | CommodityDisplay | | 布局类型 | 选择高级页面的布局模式。 - 绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。 - 流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 | 流式布局 | 10. 开发CommodityDisplay电脑端和移动端高级页面。 1. 在设计页面左上方，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001945695637.png)，从"全部 \> 自定义"中拖拽commodityDetailsWidget组件到右侧画布中。 图7在电脑端拖拽CommodityDisplay组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913336552.png "点击放大") 2. 在页面上方单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913496468.png)，切换到移动端，并拖拽commodityListWidget组件到右侧画布中。 图8在移动端拖拽CommodityDisplay组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001945695641.png "点击放大") 3. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913336556.png)，保存高级页面后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913496472.png)，发布高级页面。 4. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001945695645.png)，进入预览页面，调整窗口大小，查看效果是否符合预期。