issues
search
mominger
/
blog
Tech blog
45
stars
3
forks
source link
红包项目总结---传统版
#6
Open
mominger
opened
9 years ago
mominger
commented
9 years ago
效果
线上
微信关注苏宁易购红包,点发红包进去(已结束)
线下
浏览器打开以下生产地址(部分看不到数据是因为需跑在微信上,通过微信鉴权)
领群红包
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。或找我本人索要整套源码
外部
下载
效果
亮点
项目关键点
项目明显缺陷
源码