PhoneGap開(kāi)發(fā)指南

目　錄
第1章　安裝PhoneGap　1
1.1　操作系統(tǒng)　1
1.2　所需工具　2
1.3　使用iOS入門(mén)　3
1.4　行動(dòng)時(shí)刻——在模擬器上運(yùn)行應(yīng)用程序　3
1.5　安裝PhoneGap-iPhone　5
1.6　行動(dòng)時(shí)刻——PhoneGap-iPhone的Hello World　6
1.6.1　剛做了什么？　8
1.6.2　突擊測(cè)驗(yàn)——iPhone上的PhoneGap基礎(chǔ)　10
1.7　使用Android入門(mén)　10
　　開(kāi)發(fā)環(huán)境的說(shuō)明　11
1.8　行動(dòng)時(shí)刻——運(yùn)行SDK　11
1.8.1　剛做了什么？　14
1.8.2　PhoneGap Android　14
1.9　行動(dòng)時(shí)刻——PhoneGap Android的Hello World　15
1.9.1　剛做了什么？　16
1.9.2　PhoneGap Android應(yīng)用程序中到底有什么？　16
1.9.3　一展身手——深入Android　18
1.10　使用BlackBerry Web Works入門(mén)　18
1.11　行動(dòng)時(shí)刻——第一個(gè)PhoneGap BlackBerry應(yīng)用　18
1.11.1　剛做了什么？　24
1.11.2　BlackBerry代碼簽名　25
1.11.3　一展身手——跨平臺(tái)帶來(lái)的樂(lè)趣　26
1.12　小結(jié)　26
第2章　在不同平臺(tái)上構(gòu)建和調(diào)試應(yīng)用程序　27
2.1　使用桌面瀏覽器進(jìn)行設(shè)計(jì)　27
2.1.1　WebKit　28
2.2　開(kāi)發(fā)第一個(gè)應(yīng)用程序：You Are The Best　28
2.3　行動(dòng)時(shí)刻——初期的設(shè)計(jì)和功能　28
2.3.1　剛做了什么？　32
2.3.2　我們的工作流程　33
2.3.3　我們的樣式　33
1．分離性　33
2．寬度和高度　34
3．-webkit-border-radius　34
2.3.4　我們的腳本　35
1．分離性　36
2．a(chǎn)ddEventListener　36
3．DOMContentLoaded　37
2.3.5　突擊測(cè)驗(yàn)——初期設(shè)計(jì)　37
2.4　使用Web Inspector　38
　　進(jìn)入Web Inspector　38
2.5　行動(dòng)時(shí)刻——簡(jiǎn)單的日志和錯(cuò)誤檢查　39
2.5.1　剛做了什么？　43
2.5.2　一展身手——玩轉(zhuǎn)Web Inspector和JavaScript　44
2.6　移植到原生平臺(tái)　44
2.7　行動(dòng)時(shí)刻——You Are The Best for iPhone　44
2.7.1　剛做了什么？　48
2.7.2　　48
2.7.3　phonegap.js　48
2.7.4　deviceready事件　49
2.7.5　一展身手——移植到其他平臺(tái)　49
2.8　總結(jié)　50
第3章　從移動(dòng)站點(diǎn)到移動(dòng)應(yīng)用　51
3.1　實(shí)現(xiàn)Web服務(wù)器的角色　51
3.2　行動(dòng)時(shí)刻——實(shí)現(xiàn)LocalStorage　52
3.2.1　剛做了什么？　56
3.2.2　其他存儲(chǔ)方案　58
1．Web SQL　58
2．Indexed DB　59
3.2.3　一展身手——探索LocalStorage　59
3.3　視圖模板化技術(shù)　60
3.4　行動(dòng)時(shí)刻——食物詳情視圖　60
3.4.1　剛做了什么？　64
3.4.2　突擊測(cè)驗(yàn)——使用Mustache模板　66
3.4.3　訪(fǎng)問(wèn)遠(yuǎn)程資源　66
　　跨域策略　66
3.5　行動(dòng)時(shí)刻——食物點(diǎn)評(píng)　67
3.5.1　剛做了什么？　73
3.5.2　訪(fǎng)問(wèn)遠(yuǎn)程資源　74
1．解析遠(yuǎn)程數(shù)據(jù)　75
2．事件委托　76
3．Sleight：PhoneGap的開(kāi)發(fā)服務(wù)器　78
3.5.3　一展身手——讓效率更高一些　79
3.6　總結(jié)　79
第4章　管理跨平臺(tái)代碼庫(kù)　81
4.1　平臺(tái)之間的內(nèi)在差別　81
　　使用單一代碼庫(kù)　82
4.2　行動(dòng)時(shí)刻——檢測(cè)和回退　83
4.2.1　剛做了什么？　92
4.2.2　用戶(hù)終端嗅探　92
4.2.3　特性檢測(cè)　94
4.2.4　突擊測(cè)驗(yàn)——特性檢測(cè)VS用戶(hù)終端(UA)嗅探　95
4.2.5　媒體查詢(xún)　96
4.2.6　一展身手　98
4.2.7　預(yù)處理代碼　99
4.3　總結(jié)　100
第5章　HTML5 API和移動(dòng)JavaScript　101
5.1　移動(dòng)JavaScript　101
　　XUI　102
5.2　行動(dòng)時(shí)刻——下載、構(gòu)建以及使用XUI　102
5.2.1　剛做了什么？　110
5.2.2　為什么不用jQuery？　111
5.2.3　突擊測(cè)驗(yàn)——XUI　112
5.3　HTML5　113
　　媒體元素　113
5.4　行動(dòng)時(shí)刻——使用PhoneGap　114
5.4.1　剛做了什么？　116
5.4.2　媒體事件和屬性　117
5.4.3　audio元素　118
5.4.4　突擊測(cè)驗(yàn)——媒體元素　118
5.4.5　canvas元素　119
5.5　行動(dòng)時(shí)刻——晚餐示數(shù)面板　120
5.5.1　剛做了什么？　125
5.5.2　canvas API　126
5.5.3　注意性能　127
5.5.4　一展身手　127
5.5.5　HTML5中還有什么？　127
5.6　總結(jié)　128
第6章　CSS3：轉(zhuǎn)場(chǎng)、變形和動(dòng)畫(huà)　129
6.1　使用CSS3 Transition進(jìn)行轉(zhuǎn)換　129
6.2　行動(dòng)時(shí)刻——模態(tài)顯示tweet視圖　130
6.2.1　剛做了什么？　137
6.2.2　時(shí)間函數(shù)　137
6.2.3　CSS3 Transform中其他的函數(shù)　138
6.2.4　一展身手——CSS3 Transform　138
6.3　滾動(dòng)　139
6.3.1　viewport：可見(jiàn)與不可見(jiàn)　139
6.3.2　iScroll　140
6.4　行動(dòng)時(shí)刻——滾動(dòng)食物列表　140
6.4.1　剛做了什么？　144
6.4.2　其他解決方法　145
6.4.3　突擊測(cè)驗(yàn)——滾動(dòng)　145
6.5　顯式動(dòng)畫(huà)　146
6.6　行動(dòng)時(shí)刻——讓我們的標(biāo)題動(dòng)起來(lái)　146
6.6.1　剛做了什么？　149
6.6.2　一展身手　150
6.6.3　動(dòng)畫(huà)：用CSS3還是HTML5　150
6.7　總結(jié)　151
第7章　使用PhoneGap調(diào)用設(shè)備傳感器　153
7.1　什么是設(shè)備傳感器？　153
7.2　行動(dòng)時(shí)刻——明信片生成器　154
7.2.1　剛做了什么？　162
7.2.2　PhoneGap與HTML5的對(duì)比　163
7.2.3　其他地理位置數(shù)據(jù)　164
7.2.4　突擊測(cè)驗(yàn)——地理位置　164
7.3　加速度計(jì)數(shù)據(jù)　165
7.4　行動(dòng)時(shí)刻——監(jiān)測(cè)搖擺　165
7.4.1　剛做了什么？　169
7.4.2　設(shè)備朝向和設(shè)備運(yùn)動(dòng)事件　169
7.4.3　一展身手　170
7.5　方向媒體查詢(xún)　170
7.6　行動(dòng)時(shí)刻——橫向顯示明信片應(yīng)用程序　170
7.6.1　剛做了什么？　175
7.6.2　其他媒體查詢(xún)　175
突擊測(cè)驗(yàn)——朝向和媒體查詢(xún)　175
7.6.3　磁力計(jì)傳感器：漏掉的API　176
7.7　總結(jié)　176
第8章　訪(fǎng)問(wèn)攝像頭數(shù)據(jù)和文件　177
8.1　行動(dòng)時(shí)刻——攝像頭API入門(mén)　177
8.1.1　剛做了什么？　183
8.1.2　瀏覽器既不是模擬器也不是設(shè)備　183
8.1.3　圖片源　183
8.1.4　其他選項(xiàng)　183
8.1.5　突擊測(cè)驗(yàn)——navigator.camera.getPicture　184
8.2　當(dāng)我們獲得圖片后，能做些什么？　184
8.3　行動(dòng)時(shí)刻——使用圖片路徑顯示圖片　185
8.3.1　剛做了什么？　188
8.3.2　那么，圖片在哪里？　188
8.3.3　一展身手　188
8.3.4　原始圖片數(shù)據(jù)　189
8.4　行動(dòng)時(shí)刻——保存照片　189
8.4.1　剛做了什么？　194
8.4.2　確保已設(shè)置quality選項(xiàng)　194
8.4.3　突擊測(cè)驗(yàn)——destinationType　194
8.4.4　修改或訪(fǎng)問(wèn)實(shí)時(shí)數(shù)據(jù)　195
8.5　總結(jié)　195
第9章　讀寫(xiě)通訊錄　197
9.1　行動(dòng)時(shí)刻——navigator.service.contacts.find　197
9.1.1　剛做了什么？　205
9.1.2　ContactField類(lèi)型的字段　206
9.1.3　一展身手　206
9.1.4　寫(xiě)入聯(lián)系人數(shù)據(jù)　206
9.2　行動(dòng)時(shí)刻——交個(gè)朋友　207
9.2.1　剛做了什么？　213
9.2.2　如果遇到新的問(wèn)題，我該怎么辦？　213
9.2.3　ContactField、ContactName以及類(lèi)似的對(duì)象　213
9.2.4　負(fù)起責(zé)任　214
9.2.5　突擊測(cè)驗(yàn)——通訊錄　214
9.3　總結(jié)　215
第10章　PhoneGap插件　217
10.1　獲取PhoneGap插件　218
10.2　行動(dòng)時(shí)刻——集成ChildBrowser插件　218
10.2.1　剛做了什么？　224
10.2.2　平臺(tái)間的差異　224
10.2.3　漫游PhoneGap插件　224
10.2.4　突擊測(cè)驗(yàn)——使用PhoneGap插件　225
10.2.5　編寫(xiě)PhoneGap插件　225
10.3　行動(dòng)時(shí)刻——電量視圖　226
10.3.1　剛做了什么？　235
10.3.2　iOS版PhoneGap插件值得注意的地方　235
10.3.3　一展身手　236
10.4　移植插件　236
10.5　行動(dòng)時(shí)刻——Android和BlackBerry　236
10.5.1　剛做了什么？　243
10.5.2　你需要跨平臺(tái)插件嗎？　244
10.5.3　不受限制　244
10.5.4　突擊測(cè)驗(yàn)——編寫(xiě)PhoneGap插件　244
10.6　總結(jié)　245
第11章　離線(xiàn)運(yùn)行：同步和緩存　247
11.1　Ruby和Sinatra　247
11.2　行動(dòng)時(shí)刻——一個(gè)擁有API的新聞?wù)尽?48
11.2.1　剛做了什么？　255
11.2.2　Sinatra的替代者　255
11.2.3　突擊測(cè)驗(yàn)——一個(gè)簡(jiǎn)單的Web服務(wù)　255
11.2.4　緩存新聞報(bào)道　256
11.3　行動(dòng)時(shí)刻——在本地?cái)?shù)據(jù)庫(kù)緩存新聞　256
11.3.1　剛做了什么？　264
11.3.2　管理應(yīng)用程序初始化　264
11.3.3　一展身手　265
11.4　總結(jié)　266
附錄A 部署到iOS　267
A.1　行動(dòng)時(shí)刻——部署到設(shè)備上　267
A.1.1　剛做了什么？　272
A.1.2　一展身手——iOS基礎(chǔ)知識(shí)　273
附錄B　突擊測(cè)驗(yàn)答案　275