本書基于TGideas團(tuán)隊多年的研究、應(yīng)用及沉淀，旨在向各位讀者介紹在移動前端開發(fā)的各類技術(shù)知識，幫助讀者在移動前端領(lǐng)域更上一層樓。本書從基礎(chǔ)的移動頁面布局和常見前端框架，到進(jìn)階的移動頁面動畫技術(shù)、Web API及性能優(yōu)化，再到各類實戰(zhàn)案例剖析等，詳細(xì)講解了技術(shù)層面的各類知識和心得。另外，書中還介紹了常用的數(shù)據(jù)分析方法，以驗證項目效果。 本書適合網(wǎng)頁重構(gòu)和Web前端開發(fā)崗位的從業(yè)人員使用，也適合有一定的移動頁面開發(fā)基礎(chǔ)的讀者閱讀。更多延伸內(nèi)容，我們會給出官方文檔地址方便讀者進(jìn)一步了解。 由于操作系統(tǒng)、瀏覽器內(nèi)核的持續(xù)迭代及各類規(guī)則的調(diào)整，在本書出版時，可能部分API的兼容性已經(jīng)有了很大的改觀。請各位讀者在具體使用時，做好預(yù)研和測試工作。 因為篇幅原因，本書部分的CSS代碼及JavaScript代碼采用了左右的排版方式，請各位讀者閱讀時注意。
基礎(chǔ)的移動頁面布局和常見前端框架，進(jìn)階的移動頁面動畫技術(shù)、Web API及性能優(yōu)化，各類實戰(zhàn)案例剖析等技術(shù)層面的各類知識和心得全分享； 包含H5在內(nèi)的各種類型移動頁面的開發(fā)要點，創(chuàng)意的技術(shù)手段呈現(xiàn)； 常用的數(shù)據(jù)分析方法輔助驗證項目效果。
騰訊互動娛樂TGideas TGideas隸屬于騰訊互動娛樂事業(yè)群，專注于體驗設(shè)計、營銷創(chuàng)新及內(nèi)容創(chuàng)意。團(tuán)隊由專業(yè)的內(nèi)容企劃、項目管理、創(chuàng)意策劃、視覺設(shè)計、技術(shù)開發(fā)及多媒體人才構(gòu)成。“努力工作，拼命玩”是我們的信條，比起用“飛機(jī)稿”獲獎，我們更樂于通過多樣化的作品，幫助產(chǎn)品與用戶建立有效的溝通機(jī)制與情感鏈接，實現(xiàn)真正意義上的商業(yè)價值。
目錄
01移動頁面開發(fā) /007
1.1 頁面布局 /008
1.1.1 Viewport /008
1.1.2 布局形式 /014
1.1.3 Media Queries /018
1.1.4 屏幕適應(yīng) /022
1.1.5 內(nèi)容排布技巧 /034
1.2 頁面調(diào)試 /03 7
1.2.1 Chrome開發(fā)者工具 /037
1.2.2 Mac電腦調(diào)試 /039
1.2.3 自研工具 /040
1.3 常用庫和框架 /042
1.3.1 jQuery Mobile /042
1.3.2 Zepto /05 5
1.3.3 Cocos2d /069
1.3.4 CreateJS /079
02技術(shù)創(chuàng)意形式 /087
2.1 動畫形式 /088
2.1.1 CSS3 /088
2.1.2 幀動畫 /094
2.1.3 Canvas /100
2.1.4 SVG /105
2.1.5 Three.js /110
2.2 移動設(shè)備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 設(shè)備震動(Vibration API)/128
2.2.9 電池狀態(tài)(Battery API)/129
2.2.10 環(huán)境光(Ambient Light)/130
2.2.11 網(wǎng)絡(luò)信息 /132
2.2.12 平臺JSSDK /133
2.3 WebVR /13 4
2.3.1 實現(xiàn)步驟 /134
2.3.2 常用WebVR解決方案 /135
2.4 創(chuàng)意點 /142
2.4.1 基于微信錄音接口 /142
2.4.2 基于微信語音識別 /144
2.4.3 基于攝像頭和相冊 /145
2.4.4 基于人臉識別 /147
2.4.5 基于陀螺儀 /148
2.4.6 基于手勢 /15 0
2.4.7 基于Websocket /15 1
03頁面性能優(yōu)化 /153
3.1 優(yōu)化原理 /154
3.1.1 為什么優(yōu)化 /15 4
3.1.2 優(yōu)化思路 /15 4
3.2 資源優(yōu)化 /155
3.2.1 圖像 /15 5
3.2.2 音頻 /162
3.2.3 視頻 /166
3.2.4 代碼 /168
3.3 加載優(yōu)化 /17 0
3.3.1 加載原理 /170
3.3.2 瀏覽器分析 /175
3.3.3 加載優(yōu)化實戰(zhàn) /179
3.4 腳本優(yōu)化 /181
3.4.1 執(zhí)行效率 /181
3.4.2 Web Worker /188
04頁面效果驗證 /191
4.1 為何驗證 /192
4.2 數(shù)據(jù)埋點 /193
4.2.1 什么是數(shù)據(jù)埋點 /193
4.2.2 什么數(shù)據(jù)需要埋點 /193
4.2.3 數(shù)據(jù)分析平臺 /197
4.3 分析數(shù)據(jù) /200
4.3.1 數(shù)據(jù)收集 /200
4.3.2 數(shù)據(jù)整理 /200
4.3.3 數(shù)據(jù)分析 /202
4.4 數(shù)據(jù)參考 /210
4.4.1 資源投放數(shù)據(jù)參考 /210
4.4.2 H5 用戶行為數(shù)據(jù)參考 /211
4.4.3 轉(zhuǎn)化率數(shù)據(jù)參考 /220
05大型項目實戰(zhàn) /221
5.1 UP 2014邀請函 /222
5.1.1 設(shè)計風(fēng)格定稿 /222
5.1.2 前端體驗定位 /223
5.1.3 單屏滑動 /224
5.1.4 CSS3動畫的應(yīng)用 /226
5.1.5 SVG的應(yīng)用 /230
5.2 TGA城市拉力賽 /232
5.2.1 地理位置的使用 /232
5.2.2 音頻的作用 /233
5.3 全民突擊明星隊長 /23 5
5.3.1 需求創(chuàng)意形式和技術(shù)點分析 /235
5.3.2 執(zhí)行中的問題和解決方法 /236
5.3.3 微信視頻自動播放問題 /240
5.4 全民超神明星皮膚 /242
5.4.1 需求創(chuàng)意形式和技術(shù)點分析 /242
5.4.2 執(zhí)行中的技術(shù)點和實踐 /242
5.4.3 執(zhí)行中常見的兼容性問題和解決方法 /246
5.5 龍之谷手游WebVR項目 /248
5.5.1 程序與用戶共同控制攝像頭 /248
5.5.2 多重蒙版貼圖 /249
5.5.3 自適應(yīng)長度文字提示 /253
5.5.4 Unity 地形導(dǎo)出 /25 5
5.5.5 3ds M ax動畫導(dǎo)出問題 /255
附錄 /257
1. 微信JSSDK /257
2. 手機(jī)QQ JSSDK /258
緊跟技術(shù)發(fā)展
剛到，還沒看。
12345
