移动端网页重构外包规范（蓝钻项目组）

文件规范

专题目录名称

a+日期+专题英文或拼音简写 (例如：a20090817avatar)
专题英文或拼音简写必须是有意义的，看到就能明白是什么活动

文件目录

图片文件：/images/
CSS文件：/css/，文件命名如：comm.css
JS文件（非必须，框架、公用js的放到该目录）：/js/，文件命名如：comm.js

文件编码

一般默认为gb2312

文件格式

除特殊情况外（如某些模版文件要求格式为shtml），文件格式统一为html

文件命名

html首页（引导页）命名为index.html,html内页，有明显分类的，按英文或拼命首字母命名

代码规范

页面标题(title)格式

专题主标题名 - 腾讯游戏VIP（如：<title>DNF直升85级 - 腾讯游戏VIP</title>）

meta部分

注意meta标签的设置，keywords description不能空着，可以找产品提供

图片规范

分离路径

http://ossweb-img.qq.com/images/gamevip/lz/act/文件名 （a+日期+专题名称）; (因为经常和其他几个项目组的路径,请注意)
如：活动页 http://lz.qq.com/act/a20140609wzjz/index.html 的图片分离地址为：http://ossweb-img.qq.com/images/gamevip/lz/act/a20140609wzjz/图片文件

图片标签

图片标签必须写上宽度、高度和alt属性，如：<img src="" width="500" height="200" alt="活动奖品建筑排程卡"/>

图片质量

单张图片体积不能超过50K，图片格式包括.jpg/.png；jpg图片必须压缩，一般60%品质即可，如果图片质量不好，可提高到80%
可以使用TinyPNG进行压缩；

切图规范

• 1、合并当前页面中出现的小图片，尽可能减少页面请求数;
• 2、辅助图片（修饰、间隔、提醒的图片）作为背景图处理，通过css的background定义；
• 3、各类按钮、文字、标题要尽量从背景中分离；
• 4、能重复利用的部分尽量提取；
• 5、页面需具有扩展性，特殊情况除外；
• 6、合理切图，需要程序后台动态生成的图片，必须单独切割出来；

公用外联js

下面几个外联js，是公共的，每个页面都需要引入：
<script src="http://ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script>
<script src="http://ossweb-img.qq.com/images/js/mobile_build/milo.js"></script>
<script src="http://ossweb-img.qq.com/c/=/images/js/mobile_build/util/probe.js,multiselector.js,fileload.js,object.js,form.js,template.js,/images/js/mobile_build/biz/widget/dialog.js,/images/js/mobile_build/biz/roleselector.js,login.js,loginManager.js,/images/js/mobile_build/ams/engine.js,lottery2.js,flowengine.js,/images/js/mobile_build/ams/lottery2/getGiftMain.js,myGiftList.js"></script>

提交方式

打包提交

提供相应的js、css、html、设计稿的jpg文件。
页面通过审核给到我方时，必须包括分立前和分离后的html和css文件，请用两个文件夹分别存放，并且命名为“分离前”和“分离后”。

审核规范

浏览器兼容性测试

chrome缩小窗口进行测试。有条件可搭建环境在手机终端上进行测试。兼容安卓、IOS两个平台

可读性测试

• 1、在屏蔽js、css后，页面要任然具有良好的可读性。
• 2、表现与结构分离，代码中不要涉及表现元素，如：style、font、bgColor、border等。
• 3、选用恬当的元素，标题使用h1~h6，h1为网页一级标题，一个页面中只出现一次；
• 4、分大块使用div，段落使用p。数据列表使用table/ul/ol/dd等，关键字使用strong

样式作用域

• 1、除了reset样式，不要全局设置标签的属性，如：img设置为block
• 2、模块统一前缀，如：
  .m-lottery .list{..}
  .m-lottery .item{..}
  .m-lottery .item .title{..}
  .m-lottery .m-lottery-flash{..}
  

其他要点(重要)

• 1、全局定义中设置了img为block属性，导致头部的蓝钻图片换行；
• 2、统一使用页面模板，代码见底下页面模板说明；
• 3、设计稿640px，重构页面宽度是按照320px来处理的，雪碧图处理方式见下图：
  
• 4、页面注释在分离版要去掉；
• 5、要带上分享微信接口；(详细见模版)

登陆模块

通用统计+点击统计代码

抽奖模块

提供4种常用形式的抽奖，可以参考，详细请见下面对应链接

• 转盘
• 九宫格
• 翻牌
• 刮刮乐(canvas)

活动页模板