文档首页/ Astro轻应用 AstroZero/ 用户指南（低代码）/ 经典版开发指导/ 高级页面/ 如何适配多终端/ 适配多终端样例
更新时间：2024-08-08 GMT+08:00
查看PDF
分享

适配多终端样例

场景描述

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

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

图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. 单击“请选择源文件(.zip)”，选择商品列表组件包commodityListWidget.zip，输入发行说明为“commodityListWidget”，单击“提交”。

  8. 创建CommodityDisplay高级页面。

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

  9. 开发CommodityDisplay电脑端和移动端高级页面。

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

结果验证

  1. 单击，进入预览页面，查看commodityListWidget组件效果。

    针对手机端视图，AstroZero在预览中提供手机端模拟视图，电脑端和手机端预览效果如图6所示。在电脑端视图中，商品列表单行商品数会跟随浏览器窗口的大小变化。在手机端视图中，商品列表单行商品数为1，始终为单列排布。
    图6 商品列表组件电脑端和手机端预览效果

    如果您在高级页面中拖入commodityListWidget组件后，再次上传更新了commodityListWidget组件，需要到应用的“页面设置”中进行版本更新操作新版本才可生效。如何更新组件，请参见管理高级组件版本。

  2. 使用谷歌浏览器开发者工具（F12），查看多个不同尺寸的终端中此页面的呈现效果。

    按下“F12”，单击开发者工具中的，可以切换设备（手机、iPad等），查看组件响应式效果。多个终端（响应式模式、iPhone 6/7/8和iPad横屏）视图效果如图7所示，呈现出多终端适配的响应式效果。
    • 在分辨率为1797x425的电脑端中，商品列表单行商品数为5。
    • 在iPhone 6/7/8中，商品列表单行商品数为1。
    • 在iPad（横屏模式）中，商品列表单行商品数为2。
      图7 多个终端视图效果

父主题： 如何适配多终端

相关文档