@hotlp 2017-02-21T05:21:18.000000Z 字数 7366 阅读 867

加华海淘微信端开发总结

未分类

加华海淘微信端从11月中旬开始，到现在一个月有余，从开始的切图做页面到后面的取数据做模版，虽然比较费脑细胞的工作都是由导师完成的，但自己也算是完整的走了一遍电商项目的流程，得到了很多收获，简单的和大家交流下~

HTML

项目中使用了mui框架，很多小组件用起来十分方便~
mui的组件十分丰富，基本满足了搭建页面使用，详细用法见mui官方文档。

但是有一些坑也是亲自踩过才知道。。。最常见的就是和mui的自定义样式相关的问题。
比如：

列表~

    <ul class="mui-table-view goods_cont">
        <li class="mui-table-view-cell">
            <a href="javascript:;" class="mui-navigate-right sku_selector_btn">
                <p class="l _title">已选</p>
                <p class="_text l"><span id="skuChoosed" class="main_c"></span></p>
            </a>
        </li>
    </ul>

在实现页面的过程中还要注意一些与pc端不同的地方，
比如：a标签的问题~

这种
此处输入图片的描述

和这种

一眼看去，a链接是加在 ‘此商品满10减11 去凑单’ 和 ‘去凑单’ 上的，
其实。。。

    <a href="#" class="add_on">
        <span class="add_on_icon">满减</span>
        <span class="main_c">此商品满10减11 去凑单></span>
    </a>

移动端的点击区域的控制十分重要，一般来说要大于44x44px，小了很容易误触，
此外，移动端的图片宽高一般都可以定死的，但是不建议直接定死在img标签上，错误图片替换会定义图片的宽高。

css

样式的公用十分重要，与pc端相比，移动端样式相近的地方会跟多一点，像商品列表，各种小标签什么的。所以~~提公用样式的时候要更加注意，长得差不多的地方，把共有的样式提出来，有差异的再单独定义，不要把极个别的地方用到的样式提出来，否则每次用都得再重新设置，会增加很多代码量。。。

雪碧图

加华海淘中没有引入其他的图标库，mui自带的用的也很少，各种小图标基本都是切图，切图，切图（不要问我为什么，我也不知道。。。）。
在移动端切雪碧图和pc端最关键的一点，图标间的距离。

pc端用px做单位，所以雪碧图切的挤一点也可以准确定位到相应的位置。
而在移动端，基本都是用rem做单位，用rem单位会产生‘小数像素’的问题：
http://www.tuicool.com/articles/euUbQjI
雪碧图如果切的很紧凑的话就会再该显示一个图标的地方显示一个半图标

而且包裹背景图元素的尺寸也要把握好，大小很合适的话雪碧图会被切掉一部分，要稍微大点。

另外，使用同一张雪碧图的元素应该有一个相同的类，和一个有规律的类，比如前端框架里的那种，这样更好维护。

js

js比较复杂的工作都由导师完成了，我基本是用轮子的那一个，不过还是有一些可以和大家交流的东西~

第一点：js方面很大一部分的工作是取数据展示数据的，虽然技术含量不会很高，但有时候还是很磨人的，比如结算页面，没有太多的业务逻辑：

var a;
    a = {
        "data": {
            "mbrAddresses": {
                "id": 276,
                "status": 1,
                "provinceId": 100110,
                "cityId": 100430,
                "districtId": 100460,
                "provinceName": "山东",
                "cityName": "烟台市",
                "districtName": "莱山区",
                "address": "tonghelu26hao",
                "postCode": "000000",
                "contactName": "liwx",
                "contactTel": "18653559609",
                "contactTel2": ""
            },
            "key": "OLY9kxhwxpx6Ykh7GUeqzZ8",
            "order": {
                "memberId": 1,
                "preOrderings": [{
                    "warehouse": {
                        "warehouseId": 26,
                        "warehouseName": "上海仓库",
                        "warehouseTypeId": 16000091,
                        "warehouseIconUrl": "upload/20161223/cb74abbd-3a0f-4e63-8373-d255d3f85cd7.jpg"
                    },
                    "skus": [{
                        "cartItemId": 1410,
                        "skuId": 403,
                        "skuName": "KF80儿童雾霾口罩13片/盒　防雾霾防PM2.5防尘",
                        "buyQty": 1,
                        "skuPrice": 139,
                        "skuPromoPrice": 139,
                        "skuIconUrl": "upload/20161209/34427415-96d2-42eb-b1fd-711e15a53af7.jpg",
                        "skuPropTextList": "13片",
                        "goodsId": 362,
                        "catId": 385,
                        "brandId": 78,
                        "spec": "1",
                        "promos": [],
                        "skuWeight": 0,
                        "goodsWeight": 0,
                        "skuVolumn": 0,
                        "dlvTmplId": 59,
                        "wareHouseType": 16000091,
                        "taxTmplId": 2,
                        "goodsTaxPrice": 17.1,
                        "deliveryTaxPrice": 0,
                        "goodsType": 0,
                        "unitChineseName": "1",
                        "goodsCashCoupinDiffAmount": 0,
                        "goodsOrderPromoDiffAmount": 0,
                        "maxWeightOrderPromo": null,
                        "freeTax": false,
                        "freeShipping": false,
                        "totalPrice": 139
                    }],
                    "deliveryTypes": [{"id": 0, "name": "包邮"}],
                    "memberRebates": null,
                    "totalPrice": 139,
                    "deliveryFeeAmount": 0,
                    "cashCouponDiffAmount": 0,
                    "orderPromoDiffAmount": 0,
                    "remark": null,
                    "invoiceTitle": null,
                    "freeShippingSkuIds": [403],
                    "deliveryTaxPrice": 0,
                    "goodsTaxPrice": 17.1
                }, {
                    "warehouse": {
                        "warehouseId": 25,
                        "warehouseName": "新加坡仓库",
                        "warehouseTypeId": 16000092,
                        "warehouseIconUrl": null
                    },
                    "skus": [{
                        "cartItemId": 1409,
                        "skuId": 448,
                        "skuName": "爱茉莉 Amore白吕洗发水400ml+180ml 防脱发抗老化",
                        "buyQty": 1,
                        "skuPrice": 98,
                        "skuPromoPrice": 98,
                        "skuIconUrl": "upload/20161209/0e7c3add-9d3a-4559-86ed-374d61af4455.jpg",
                        "skuPropTextList": "580ml",
                        "goodsId": 404,
                        "catId": 347,
                        "brandId": 92,
                        "spec": "1",
                        "promos": [],
                        "skuWeight": 0,
                        "goodsWeight": 0,
                        "skuVolumn": 0,
                        "dlvTmplId": 60,
                        "wareHouseType": 16000092,
                        "taxTmplId": 2,
                        "goodsTaxPrice": 12.05,
                        "deliveryTaxPrice": 1.33,
                        "goodsType": 0,
                        "unitChineseName": "1",
                        "goodsCashCoupinDiffAmount": 0,
                        "goodsOrderPromoDiffAmount": 0,
                        "maxWeightOrderPromo": null,
                        "freeTax": false,
                        "freeShipping": false,
                        "totalPrice": 98
                    }, {
                        "cartItemId": 1377,
                        "skuId": 431,
                        "skuName": "泰国Mistine花漾印章腮红性感胭脂粉嫩裸妆防水持久不",
                        "buyQty": 1,
                        "skuPrice": 83,
                        "skuPromoPrice": 83,
                        "skuIconUrl": "upload/20161209/4c1bb50f-8a38-487c-b74f-33e5e58d194b.jpg",
                        "skuPropTextList": "02",
                        "goodsId": 388,
                        "catId": 389,
                        "brandId": 85,
                        "spec": "1",
                        "promos": [],
                        "skuWeight": 0.6,
                        "goodsWeight": 0.01,
                        "skuVolumn": 0,
                        "dlvTmplId": 60,
                        "wareHouseType": 16000092,
                        "taxTmplId": 2,
                        "goodsTaxPrice": 10.21,
                        "deliveryTaxPrice": 1.13,
                        "goodsType": 0,
                        "unitChineseName": "1",
                        "goodsCashCoupinDiffAmount": 0,
                        "goodsOrderPromoDiffAmount": 0,
                        "maxWeightOrderPromo": null,
                        "freeTax": false,
                        "freeShipping": false,
                        "totalPrice": 83
                    }],
                    "deliveryTypes": [{"id": 1, "name": "快递"}],
                    "memberRebates": null,
                    "totalPrice": 201,
                    "deliveryFeeAmount": 20,
                    "cashCouponDiffAmount": 0,
                    "orderPromoDiffAmount": 0,
                    "remark": null,
                    "invoiceTitle": null,
                    "freeShippingSkuIds": [],
                    "deliveryTaxPrice": 2.46,
                    "goodsTaxPrice": 22.26
                }],
                "memberRebates": null,
                "totalPrice": 381.82,
                "cashCoupons": [{
                    "id": 0,
                    "brandId": 0,
                    "catId": 0,
                    "goodsId": 0,
                    "brandName": null,
                    "catName": null,
                    "goodsName": null,
                    "orderMinAmount": 0,
                    "amount": 0,
                    "brandUrl": null,
                    "couponName": null,
                    "byAll": false,
                    "byCat": false,
                    "byGoods": false,
                    "byBrand": false,
                    "byShop": false,
                    "freeTax": false,
                    "all": false,
                    "freeShipping": false
                }, {
                    "id": 276,
                    "brandId": 78,
                    "catId": 0,
                    "goodsId": 0,
                    "brandName": "碧然德 BRITA",
                    "catName": null,
                    "goodsName": null,
                    "orderMinAmount": 50,
                    "amount": 10,
                    "brandUrl": null,
                    "couponName": null,
                    "byAll": false,
                    "byCat": false,
                    "byGoods": false,
                    "byBrand": true,
                    "byShop": false,
                    "freeTax": true,
                    "all": false,
                    "freeShipping": true
                }],
                "activeCashCoupon": {
                    "id": 0,
                    "brandId": 0,
                    "catId": 0,
                    "goodsId": 0,
                    "brandName": null,
                    "catName": null,
                    "goodsName": null,
                    "orderMinAmount": 0,
                    "amount": 0,
                    "brandUrl": null,
                    "couponName": null,
                    "byAll": false,
                    "byCat": false,
                    "byGoods": false,
                    "byBrand": false,
                    "byShop": false,
                    "freeTax": false,
                    "all": false,
                    "freeShipping": false
                },
                "cashCouponDiffAmount": 0,
                "orderPromos": [],
                "freeShippingOrTaxPromos": [],
                "activePromo": null,
                "orderPromoDiffAmount": 0,
                "totalPromoPrice": 0,
                "deliveryFeeAmount": 20
            }
        }, "success": true
    };

这是返回的订单数据，虽然看起来很长很复杂，但是和后端沟通好，明确该取的字段后，剩下的就是并不复杂的数组对象for循环了。

看到数据结构后，就要开始做模版了，对网站这边的小伙伴们来说，这一部分的工作应该是技术来完成的，现在，全都自己做~之前做网站，最担心的就是要重新实现，改模版，现在，就不用担心了，因为你自己就是半个技术~

做模版有几个简单的套路，普通的取数据直接往html里塞，复杂点的上拉刷新的列表页，先组织组织数据，再把每一条数据再往html里塞，再复杂点的带业务逻辑的，比如购物车，商品详情等，能找个参考就借鉴一下，学习思路最重要。

先贴一个简单的模版：

<div class="_top fix dataContent" id="sortList"></div>
<#--分类item模板-->
<script id="sortItem" type="text/html">
    <%for(i = 0; i < xData.length; i++){%>
        <div class="top_item pr l mui-col-xs-4">
            <a href="<%=vars.clientRoot%>/ec/goods/sub_sort.html?id=<%=xData[i].id%>">
                <h3 class="_tit mui-ellipsis"><%=xData[i].text%></h3>
                <p class="_info mui-ellipsis"><%=xData[i].remark%></p>
                <div class="item_img">
                    <img src="<%=#imgFormat(xData[i].iconUrl, '210x168.png')%>"/>
                </div>
            </a>
        </div>
    <%}%>
</script>

getJson("/ec/goods/doSearchCatList.do",{},function showSortList(data){
        //console.log(data);
        data = {
            vars: vars,
            xData: data.data ? data.data : []
        };
        renderTmp("#sortList","sortItem",data);
    });

做模版用的是artTemplate，语法很简单，
<% %> 里面放js语句
<%= %> 转义输出
<%=# %> 原样输出

模版里，能用的js语句就是if和for，处理数据不要再模版里做，要在js中提前处理

公用方法：
开始项目之前，建议先看一下common中的公用方法。
1、取数据
getJson(url,param,success,error)

getWidgetData(widgetName,success,error)
取组件数据

2、渲染模版
renderTmp(selector,tmpId,data,callback)
取数据的回调中使用，默认追加元素方式是append，
也可以在callback中自己定义。

3、图片处理，集成了错误图片替换
imgFormat(url,format,isZip,notFortpl)
format 尺寸
isZip是否压缩，一般宽度是全屏宽的不用走拦截器
notForTpl，直接输出图片路径
调用的时候要加#防止转义
<%=#imgFormat(url,'.100x100.png')%>

4、时间格式化
dateFormat(date, format)
把日期整理成需要的格式，'yyyy-MM-dd hh:mm:ss'

5、金额格式化
moneyFormat(num, format)

6、表单格式化
formFormat(selector)

7、页面跳转处理
toNewPage(href,cantBack)
cantback，是否允许返回当前页面

a链接，图片src等基本绝对路径，
拼接路径时要注意一点

<a href="<%=vars.clientRoot%>/bbs/bbs_view.html?id=<%=xData.threadId%>"></a>
<div style="background-image: url(${vars.theme.root}/resources/images/center_top.jpg);"></div>

测试

测试的时候压力还是挺大的，测试的过程中一定要注意沟通，因为指派给你的不一定是个前台bug还是后台bug。。。改bug要按照严重程度改，先确保功能，再进行优化。

以上17/01/10
补充：
1、雪碧图设置好background-size后，可以正常的background-position了，
尺寸大小为雪碧图实际大小，单位为rem

2、rem做单位，height和line-height相同时，安卓端不会垂直居中，ios会垂直居中。可以让line-height稍微小点

3、vars，后台存的路径
4、模版里不要套模版，script和a标签一样，不能嵌套。可以在一个模版渲染完的回调里渲染另一个模版。

加华海淘微信端开发总结

HTML

css

雪碧图

js

测试

内容目录