01 移动页面开发 7
1.1 页面布局 8
1.1.1 Viewport 8
1.1.2 布局形式 14
1.1.3 Media Queries 18
1.1.4 屏幕适应 22
1.1.5 内容排布技巧 34
1.2 页面调试 37
1.2.1 Chrome开发者工具 37
1.2.2 Mac电脑调试 39
1.2.3 自研工具 40
1.3 常用库和框架 42
1.3.1 jQuery Mobile 42
1.3.2 Zepto 55
1.3.3 Cocos2d 69
1.3.4 CreateJS 79
02 技术创意形式 87
2.1 动画形式 88
2.1.1 CSS3 88
2.1.2 帧动画 94
2.1.3 Canvas 100
2.1.4 SVG 105
2.1.5 Three.js 110
2.2 移动设备Web API详解 114
2.2.1 视频(Video) 114
2.2.2 音频(Audio) 115
2.2.3 媒体流(getUserMedia) 119
2.2.4 Web Speech 120
2.2.5 Web Audio API 121
2.2.6 地理定位(Geolocation API) 123
2.2.7 陀螺仪 126
2.2.8 设备震动(Vibration API) 128
2.2.9 电池状态(Battery API) 129
2.2.10 环境光(Ambient Light) 130
2.2.11 网络信息 132
2.2.12 平台JSSDK 133
2.3 WebVR 134
2.3.1 实现步骤 134
2.3.2 常用WebVR解决方案 135
2.4 创意点 142
2.4.1 基于微信录音接口 142
2.4.2 基于微信语音识别 144
2.4.3 基于摄像头和相册 145
2.4.4 基于人脸识别 147
2.4.5 基于陀螺仪 148
2.4.6 基于手势 150
2.4.7 基于Websocket 151
03 页面性能优化 153
3.1 优化原理 154
3.1.1 为什么优化 154
3.1.2 优化思路 154
3.2 资源优化 155
3.2.1 图像 155
3.2.2 音频 162
3.2.3 视频 166
3.2.4 代码 168
3.3 加载优化 170
3.3.1 加载原理 170
3.3.2 浏览器分析 175
3.3.3 加载优化实战 179
3.4 脚本优化 181
3.4.1 执行效率 181
3.4.2 Web Worker 188
04 页面效果验证 191
4.1 为何验证 192
4.2 数据埋点 193
4.2.1 什么是数据埋点 193
4.2.2 什么数据需要埋点 193
4.2.3 数据分析平台 197
4.3 分析数据 200
4.3.1 数据收集 200
4.3.2 数据整理 200
4.3.3 数据分析 202
4.4 数据参考 210
4.4.1 资源投放数据参考 210
4.4.2 H5用户行为数据参考 211
4.4.3 转化率数据参考 220
05 大型项目实战 221
5.1 UP+2014邀请函 222
5.1.1 设计风格定稿 222
5.1.2 前端体验定位 223
5.1.3 单屏滑动 224
5.1.4 CSS3动画的应用 226
5.1.5 SVG的应用 230
5.2 TGA城市拉力赛 232
5.2.1 地理位置的使用 232
5.2.2 音频的作用 233
5.3 全民突击明星队长 235
5.3.1 需求创意形式和技术点分析 235
5.3.2 执行中的问题和解决方法 236
5.3.3 微信视频自动播放问题 240
5.4 全民超神明星皮肤 242
5.4.1 需求创意形式和技术点分析 242
5.4.2 执行中的技术点和实践 242
5.4.3 执行中常见的兼容性问题和解决方法 246
5.5 龙之谷手游WebVR项目 248
5.5.1 程序与用户共同控制摄像头 248
5.5.2 多重蒙版贴图 249
5.5.3 自适应长度文字提示 253
5.5.4 Unity地形导出 255
5.5.5 3ds Max动画导出问题 255
附录 257
1.微信JSSDK 257
2.手机QQ JSSDK 258