效果

　　线上：  微信关注苏宁易购红包，点发红包进去(已结束)

     线下：   浏览器打开以下地址：（部分看不到数据是因为需跑在微信上，通过微信鉴权）

　　　　领群红包

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=1

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=2

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=3

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=4

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=5

　　　　http://sale.suning.com/images/advertise/001/hb/getgrouphb.html?activityFlag=6

　　　　领子红包

　　　　http://sale.suning.com/images/advertise/001/hb/gethb.html?status=0

　　　　http://sale.suning.com/images/advertise/001/hb/gethb.html?status=1

　　　　我的红包

　　　　http://sale.suning.com/images/advertise/001/hb/myhb.html

　　　　红包详情

　　　　http://sale.suning.com/images/advertise/001/hb/hbdetail.html

　　特征

　　　　兼容各种智能手机、ipad、pad上的微信 

　　效益

           为苏宁易购从每天带来数十万的新用户注册量到现在几百

亮点

        

　　  原因：

　　　　　集成方案： fis进行合并压缩、MD5编码。gulp进行HTML压缩。fis，gulp配置文件看源码。

 

项目关键点

　　响应式

　　　　 无差别适应所有手机、ipad等

            原理：

                 浏览器加载时设置HTML/BODY 的fontsize。基准值。 其他一律用rem。

            流程：

                   

          图片：

                 做3套图 <=320  320~480  480~640。adapt.js给body设置自定义属性，通过自定义属性，加载不同路径的图。

                 实际未这么做。因为PNG太大了，1M多。最低只能压缩到200多K。最后我整张做成JPG,压缩到70K左右。

　　应用程序框架

　　　　　　特征： 人为约束业务渲染，全局静态类隐式分层

　　　　　　架构:

 　　　　　　　　

　　　　　　service类：  流程约束。

　　　　　　模块化框架： 无

　　　　　　DOM库： jquery

                 异常： dao层 jquery自带error。

                 日志： 无

　　　　　　适应场景      1-2人。wap小型项目。红包这种。

　　　　　　优点            前期直接编码。不需做任何准备。通过集成方案，性能也有一定保障。开发时随心所欲。   

　　　　　　缺陷            维护性很低。

　　集成方案

                  fis、gulp

                  步骤

                       1，进入到红包目录 

　　　　　　　　2，fis release -ompDd ../hb

　　　　　　　　3，删掉css、js目录代码

　　　　　　　　4，html界面 移动adapt.js的内嵌代码到body开始标签下。

　　　　　　　　5，gulp压缩html代码 

                 原因

                       为什么打包需要这么多步骤？  1，fis本身问题，它不能保证内嵌代码、合并代码、CDN三者在HTML上原来的位置，所以需要挪移。2，我偷懒，象3、5它应该能解决。

　　性能   无

 

项目明显缺陷

        1，埋点未加aysnc，会导致首屏页面出来了，还在加载。应该用JS包装，保证最后异步，且延迟100MS上加载。

           

          2，jquery改成zepto

          3，可维护性太低，不适合协作。这是我一直单独做红包的原因。

 

源码