PhoneGap開發(fā)指南

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