红包项目总结---传统版

效果

线上微信关注苏宁易购红包，点发红包进去(已结束)
线下浏览器打开以下生产地址（部分看不到数据是因为需跑在微信上，通过微信鉴权）
- 领群红包 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、pad微信等
- 原理
  - 浏览器加载时设置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
- 步骤
  - 进入到红包目录
  - fis release -ompDd ../hb
  - 删掉css、js目录代码
  - html界面移动adapt.js的内嵌代码到body开始标签下。将合并代码和CDN 的埋点代码调换位置。
  - gulp压缩html代码
- 原因
  - 为什么打包需要这么多步骤？
  - fis本身问题，它不能保证内嵌代码、合并代码、CDN三者在HTML上原来的位置，所以需要挪移。
  - 我偷懒，象3、5它应该能解决。
性能
- 无
  项目明显缺陷
采集数据
- 埋点未加aysnc，会导致首屏页面出来了，还在加载。应该用JS包装，保证最后异步，且延迟100MS上加载。
DOM库
- jquery改成zepto
可维护性太低
- 不适合协作。这是我一直单独做红包的原因。
  源码
公司内部
- svn地址 http://10.27.5.1/svn/FED/code/hongbao/year-end hb-fact。或找我本人索要整套源码
外部
- 下载

mominger / blog

红包项目总结---传统版 #6

效果

亮点

项目关键点

项目明显缺陷

源码