使用AstroZero创建高级页面适配多终端显示

期望实现效果

当用户开发的高级页面应用于多种设备时，如何才能保证在不同大小的设备上，能够呈现同样的网页？为此，AstroZero提供了高级页面的电脑端和移动端两种终端视图、流式布局的响应式布局，并为绝对布局提供“拉伸”功能辅助自适应。另外，为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式布局设计规范。组件的响应式设计，是高级页面适配多终端的重要前提。下面以开发一个满足响应式布局的商品列表组件为例，向您介绍如何适配多终端。

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

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

功能实现方法

下载组件模板。
1. 进入AstroZero服务控制台。
2. 在主页中，单击“进入首页”，进入AstroZero应用开发页面。
3. 单击，选择“环境管理 > 环境配置”，进入环境配置。
4. 在主菜单中，选择“维护”。
5. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件模板”。
6. 在组件列表中，单击widgetVueTemplate，进入模板详情页。
7. 单击“下载”，设置组件的名称为“commodityListWidget”，单击“保存”，将模板下载到本地。
  图2 保存模板
  
  如果选择“下载原始模板”，下载到本地的组件包中，组件名称不会被修改。
解压下载到本地的模板包，新建“img”文件夹，存放商品图片，此处存放了10张商品图片，分辨率统一为380x440，如图3所示。

图3 新建img存在商品图片

在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 全网通版（仲夏紫）"
            }
        ]
    }
});

在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>

在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%;
    }
}

设置完成后，重新打包（包名为commodityListWidget.zip）。

您也可以直接单击commodityListWidget.zip，下载commodityListWidget商品列表组件示例开发包。
打包上传commodityListWidget商品列表组件。
1. 在环境配置页面的主菜单中，选择“维护”。
2. 在左侧导航栏中，选择“全局元素 > 页面资产管理 > 组件”。
3. 单击“提交新组件”，进入提交新组件页面。
4. 单击“请选择源文件(.zip)”，选择6中的商品列表组件包commodityListWidget.zip，输入发行说明为“commodityListWidget”，单击“提交”。
关闭Vue3框架渲染组件开关。

本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。
图4 界面报错
1. 在应用设计器中，单击左侧导航栏中的“设置”。
2. 在“高级设置”中，取消勾选“页面组件的渲染框架由Vue2升级为Vue3”开关。
  图5 取消选中

创建CommodityDisplay高级页面。

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

图6 新建CommodityDisplay高级页面

表1 创建高级页面CommodityDisplay参数说明
参数	说明	示例
标签	新建高级页面的标签，创建后可修改。取值范围：1~100个字符。	CommodityDisplay
名称	新建高级页面的名称，创建后不可修改。命名要求如下： 1~100个字符。必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。	CommodityDisplay
布局类型	选择高级页面的布局模式。绝对布局：在绝对布局中，每个组件可在页面中任意位置进行拖拽放置，组件的宽高可自定义设置。流式布局：在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。	流式布局

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