# 适配多终端样例
#### 场景描述
本章节以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。
商品列表组件可以用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。例如，视区（屏幕或浏览器可视区域）由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。
图1商品列表组件的响应式设计   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886396.gif "点击放大")
#### 操作步骤
1. 参考[在线开发高级组件](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html)中操作，下载组件模板widgetVueTemplate（组件名称设置为"commodityListWidget"）。
   
   您也可以直接单击[commodityListWidget.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/commodityListWidget.zip)，下载commodityListWidget商品列表组件示例开发包。
   
   
2. 新建img文件夹，存放商品图片，此处存放了10张商品图片，统一分辨率为380x440，如[图2]所示。
   
   图2新建img存放商品图片   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284917.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对象，将多个商品的图片、标题和描述显示于组件中。 
   ```
   <div id="widgetVueTemplate" style="margin: 20px;">
       <section id="boxes">
           <div class="container">
               <div class="box" v-for="obj in Commodity">
                   <img :src="obj.src">
                   <h3>{{obj.title}}</h3>
                   <p>{{obj.content}}</p>
               </div>
           </div>
       </section>
   </div>
   ```
   
   
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）。
7. 打包上传commodityListWidget商品列表组件。 
   1. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，进入经典版应用设计器。
   
   2. 在左侧菜单栏中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886392.png)，选择"高级页面 \> 组件"。
   
   3. 单击"提交新组件"，进入提交新组件页面。
   
   4. 单击"请选择源文件(.zip)"，选择商品列表组件包commodityListWidget.zip，输入发行说明为"commodityListWidget"，单击"提交"。
   
   
   
   
8. 创建CommodityDisplay高级页面。 
   首次创建高级页面时，会出现视图选项，请勾选"电脑端"和"手机端"，布局类型选择"流式布局"（流式布局为自适应布局）。
   图3新建CommodityDisplay高级页面   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886424.png "点击放大")
   
   
9. 开发CommodityDisplay电脑端和移动端高级页面。 
   1. 在设计页面左上方，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125093.png)，从"全部 \> 自定义"中拖拽commodityDetailsWidget组件到右侧画布中。
      图4在电脑端拖拽CommodityDisplay组件   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284941.png "点击放大") 
   
   2. 在页面上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284933.png)，切换到移动端，并拖拽commodityListWidget组件到右侧画布中。
      图5在移动端拖拽CommodityDisplay组件   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932886420.png "点击放大") 
   
   3. 单击页面上方的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284913.png)，保存高级页面后，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125137.png)，发布高级页面。
   
   4. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933045772.png)，进入预览页面，调整窗口大小，查看效果是否符合预期。
   
   
   
   
 
#### 结果验证
1. 单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284909.png)，进入预览页面，查看commodityListWidget组件效果。
   
   针对手机端视图，AstroZero在预览中提供手机端模拟视图，电脑端和手机端预览效果如[图6]所示。在电脑端视图中，商品列表单行商品数会跟随浏览器窗口的大小变化。在手机端视图中，商品列表单行商品数为1，始终为单列排布。
   图6商品列表组件电脑端和手机端预览效果   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960284905.gif "点击放大")
   ![](https://support.huaweicloud.com/usermanual-astrozero/public_sys-resources/caution_3.0-zh-cn.png)
   如果您在高级页面中拖入commodityListWidget组件后，再次上传更新了commodityListWidget组件，需要到应用的"页面设置"中进行版本更新操作新版本才可生效。如何更新组件，请参见[管理高级组件版本](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0070.html)。
   
   
2. 使用谷歌浏览器开发者工具（F12），查看多个不同尺寸的终端中此页面的呈现效果。 
   按下"F12"，单击开发者工具中的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125125.png)，可以切换设备（手机、iPad等），查看组件响应式效果。多个终端（响应式模式、iPhone 6/7/8和iPad横屏）视图效果如[图7]所示，呈现出多终端适配的响应式效果。
   - 在分辨率为1797x425的电脑端中，商品列表单行商品数为5。
   
   - 在iPhone 6/7/8中，商品列表单行商品数为1。
   
   - 在iPad（横屏模式）中，商品列表单行商品数为2。
     图7多个终端视图效果   
     ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960125121.gif "点击放大")