适配多终端样例

场景描述

本章节以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。

商品列表组件可以用于不同分辨率的手机端和电脑端，组件中商品排布能够根据屏幕或者浏览器窗口大小自动调节。例如，视区（屏幕或浏览器可视区域）由宽变窄过程中，呈现出多终端适配的响应式效果，商品单行个数逐渐由五列变为一列。

图1 商品列表组件的响应式设计

操作步骤

1. 参考在线开发高级组件中操作，下载组件模板widgetVueTemplate（组件名称设置为“commodityListWidget”）。

   您也可以直接单击commodityListWidget.zip，下载commodityListWidget商品列表组件示例开发包。

2. 新建img文件夹，存放商品图片，此处存放了10张商品图片，统一分辨率为380x440，如图2所示。
   图2 新建img存在商品图片
   

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. 参考登录环境配置中操作，登录新版开发环境配置。
   2. 在主菜单中，选择“维护”。
   3. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件”。
   4. 单击“提交新组件”，进入提交新组件页面。
   5. 单击“请选择源文件(.zip)”，选择商品列表组件包commodityListWidget.zip，输入发行说明为“commodityListWidget”，单击“提交”。

8. 创建CommodityDisplay高级页面。
   首次创建高级页面时，会出现视图选项，请勾选“电脑端”和“手机端”，布局类型选择“流式布局”（流式布局为自适应布局）。

   图3 新建CommodityDisplay高级页面
   

9. 开发CommodityDisplay电脑端和移动端高级页面。
   1. 在设计页面左上方，单击，从“全部 > 自定义”中拖拽commodityDetailsWidget组件到右侧画布中。
      图4 在电脑端拖拽CommodityDisplay组件
      
   2. 在页面上方单击，切换到移动端，并拖拽commodityListWidget组件到右侧画布中。
      图5 在移动端拖拽CommodityDisplay组件
      
   3. 单击页面上方的，保存高级页面后，单击，发布高级页面。
   4. 单击，进入预览页面，调整窗口大小，查看效果是否符合预期。