《構建跨平台APP：HTML 5+PhoneGap移動套用實戰》是2015年10月清華大學出版社出版的圖書，作者是潘中強、曹卉。
基本介紹
- 書名：構建跨平台APP：HTML 5+PhoneGap移動套用實戰
- 作者：潘中強
曹卉 - 出版社：清華大學出版社
- 出版時間：2015年10月
- 定價：55 元
- ISBN：9787302414575
內容簡介,圖書目錄,
內容簡介
PhoneGap的目的是用來快速開發移動跨平台 APP，它基於 HTML 5，支持市面上流行的移動設備，本書的特色就是快速學習如何利用 HTML 5和 PhoneGap開發移動 APP。
本書分為三篇，第一篇介紹 HTML 5為移動束拒催頁面設計的一漏充些新元素，包含移動開發的大背景、移動布局、地理位置、Web存儲、多媒體等等；第二篇介紹 PhondeGap輔助 HTML 5開發套用的一些 API，包含事件處理、信息處理、加速度、地理位置、指南針、本地存儲和多媒體等等；最後一篇通過兩個實例，介紹芝企辣踏了 HTML 5+PhoneGap開發移動 APP的兩個項目開發流程和實現代碼。匙踏尋槓
本書適合有一定 HTML+CSS+JavaScript網頁開發基礎的人員，可作為培訓教材使用。
圖書目錄
第 1章 HTML 5移動開發的大背景.. 1
1.1 HTML 5是什麼. 1
1.1.1 HTML 5的發展史 . 1
1.1.2 如何學習 HTML 5 . 2
1.2 搭建 HTML 5的移動 Web開發環境 . 3
1.2.1 開發工具 Sublime Text . 3
1.2.2 瀏覽器 Chrome或 Firefox 4
1.2.3 瀏覽器下的移動測試環境.. 6
1.3 製作一個簡單的 HTML 5標準移動 Web頁面... 7
1.4 檢測移動設備是否支持 HTML 5標籤 8
1.4.1 原生的標籤兼容提示 . 8
1.4.2 瀏覽器檢測 ... 9
1.4.3 特徵檢測 . 10
1.5 為什麼 HTML 5需要 PhoneGap. 10
1.6 小結 11
第 2章 HTML 5的頁面元素... 12
2.1 從全局了解 HTML 5 12
2.1.1 顯示內閥囑尋容的互動 .. 12
2.1.2 HTML 5頁面與 XHTML頁面的對比... 13
2.1.3 元素的使用場景和使用方法 14
2.1.4 HTML 5中的字元集 16
2.2 HTML 5表單元素的變化 16
2.2.1 新增的 input元素 16
2.2.2 新增的 input屬性 18
2.2.3 HTML 5表單的驗證方法 22
2.3 HTML 5專為移動設計的拖放 . 24
2.3.1 控制拖放操作.. 24
2.3.2 監聽拖放事件射雅員.. 25
2.3.3 看看這些帶拖放功能的網站 26
2.4 實例：構建網頁的拖放套用 28
2.5 小結 30
第 3章 HTML 5的移動布局... 31
3.1 移動頁面的樣式設計利器 CSS 3 31
3.1.1 個性化的字型.. 31
3.1.2 可重複使用的背景圖 ... 33
3.1.3 輕鬆實現文字效果... 35
3.1.4 設計框線特效.. 37
3.1.5 實現文本的多列布局 ... 40
3.1.6 轉換特效 . 41
3.1.7 過渡特效 . 43
3.2 回響式 Web設計 45
3.2.1 什麼是回響式 Web設計 . 45
3.2.2 流式布局 . 47
3.2.3 媒體查詢 . 49
3.2.4 Twitter Bootstrap理念 52
3.2.5 將 Bootstrap套用到自己的項目中 .. 55
3.3 實例：套用媒介查詢製作回響式導航欄 .. 56
3.4 小結 59
第 4章 HTML 5的地理位置定位龍汗盼 60
4.1 複習一下緯度和經度... 60
4.2 了解 Geolocation API . 61
4.2.1 Geolocation提供的方法 . 61
4.2.2 Geolocation提供的地理數據 .. 62
4.2.3 檢測瀏覽器是否支持地理定位. 63
4.3 使用 Geolocation API . 64
4.3.1 獲取用戶當前的地理位置 64
4.3.2 訪問地理位置的安全問題 65
4.4 實例 1：手機地理定位 67
4.5 實例 2：使用谷歌地圖查找路線.. 70
4.6 小結 79
第 5章 HTML 5的 Web Workers... 80
5.1 認識 Web Workers . 80
5.1.1 Web Workers的套用場合... 80
5.1.2 與 HTML 5 Web Workers通信 ... 81
5.1.3 多個 JavaScript檔案的載入 ... 82
5.1.4 終止 Web Workers的監聽操作... 82
5.1.5 利用 Web Workers創建一個簡單的頁面計數器 . 82
5.2 實戰 Web Workers . 84
5.2.1 實例 1：大數量的圖片處理. 84
5.2.2 實例 2：實現微博訊息的實時推送 .. 87
5.2.3 實例 3：預覽網頁的內容 91
5.2.4 實例 4：定時給網站用戶發訊息.. 96
5.3 小結 .. 103
第 6章 HTML 5的 Web存儲... 104
6.1 認識 HTML 5的 Web Storage .. 104
6.1.1 為什麼使用 Web Storage . 104
6.1.2 Web的存儲方式：LocalStorage與 SessionStorage ... 105
6.1.3 Web Storage如何獲取和保存數據 ... 107
6.2 網站本地存儲兼容性方案.. 108
6.3 如何在實際開發中使用本地存儲 ... 114
6.4 實例 1：保存與讀取登錄用戶名與密碼. 115
6.5 實例 2：共享存儲數據 .. 118
6.6 小結 .. 121
第 7章 HTML 5的多媒體 122
7.1 視頻的進化 ... 122
7.1.1 常見的視頻格式 122
7.1.2 傳統的網頁視頻與 HTML 5視頻... 123
7.2 HTML 5中的音頻 . 124
7.3 使用 JavaScript控制播放 . 124
7.4 audio標籤和 video標籤的瀏覽器支持情況 .. 125
7.5 音視頻的實時通信 126
7.6 打造自己的音頻播放器 . 128
7.7 打造自己的視頻播放器 . 131
7.8 小結 .. 135
第 8章 PhoneGap入門... 136
8.1 走近 PhoneGap 136
8.1.1 PhoneGap的發展歷史 . 136
8.1.2 PhoneGap的特色 138
8.2 搭建 PhoneGap的開發環境 . 140
8.2.1 安裝 NodeJS 141
8.2.2 安裝 PhoneGap 142
8.2.3 安裝 PhoneGap Desktop APP進行測試 .. 144
8.3 創建第一個 PhoneGap APP . 146
8.4 PhoneGap Desktop APP常見的幾個錯誤 151
8.5 PhoneGap你要知道的知識 .. 152
8.5.1 編輯工具的選擇 152
8.5.2 PhoneGap中有哪些 API .. 153
8.5.3 使用雲線上編譯 PhoneGap .. 154
8.6 在 PhoneGap中調試 HTML 5程式 .. 155
8.7 小結 .. 156
第 9章 PhoneGap的事件處理 157
9.1 程式也有生命周期 157
9.1.1 程式對生命周期的定義 . 157
9.1.2 PhoneGap的生命周期 . 159
9.2 事件實戰... 160
9.2.1 使用程式載入事件. 161
9.2.2 使用被動訊息事件. 163
9.2.3 使用主動訊息事件. 165
9.3 PhoneGap中文亂碼的解決方案... 167
9.4 小結 .. 168
第 10章 PhoneGap對信息的處理... 169
10.1 使用 PhoneGap獲取移動設備信息 169
10.2 PhoneGap程式運行慢的解決方案 . 170
10.3 實例：用 PhoneGap製作查看設備的套用 . 172
10.3.1 APP的界面設計 . 172
10.3.2 APP的功能實現 . 174
10.4 通訊錄信息的獲取 .. 177
10.4.1 創建一個聯繫人 .. 177
10.4.2 查找通訊錄 . 178
10.4.3 聯繫人包括哪些屬性 ... 180
10.4.4 聯繫人的各種編輯操作 ... 183
10.4.5 複雜的聯繫人屬性 ContactField . 185
10.5 PhoneGap的訊息提示 ... 188
10.5.1 notification警告的使用 ... 188
10.5.2 確認對話框的使用... 190
10.5.3 顯示可以傳遞參數的對話框 192
10.5.4 控制蜂鳴器和震動... 194
10.6 小結 195
第 11章加速度、地理位置和指南針 ... 196
11.1 認識加速度感測器 .. 196
11.1.1 獲取當前的加速度... 196
11.1.2 監視設備的加速度... 198
11.1.3 詳解“加速度感測器”對象 201
11.2 加速度感測器的使用場景 201
11.3 地理位置的使用 .. 202
11.3.1 獲取手機地理信息... 203
11.3.2 獲取當前所在坐標... 203
11.3.3 監控手機的位置變化 ... 206
11.4 指南針 209
11.4.1 獲取手機的方向 .. 209
11.4.2 監視手機方向的兩種方法 212
11.5 實例：手機“搖一搖”出大獎 214
11.5.1 原形設計 . 214
11.5.2 素材準備 . 214
11.5.3 動畫實現 . 215
11.5.4 最終實現 . 219
11.6 如果默認沒有安裝 Geolocation怎么辦... 223
11.7 小結 224
第 12章 PhoneGap中的多媒體控制... 225
12.1 音頻的處理 . 225
12.1.1 利用 PhoneGap播放網路音樂音頻 225
12.1.2 為播放音樂設定暫停功能 227
12.1.3 為播放音樂設定停止功能 229
12.1.4 獲取音頻檔案的更多信息 230
12.1.5 播放指定位置的音樂 ... 233
12.1.6 使用 PhoneGap錄製聲音... 236
12.1.7 資源有限時釋放音頻資源 238
12.2 使用 Capture來採集聲音 ... 238
12.3 使用 Capture採集圖像信息 241
12.4 使用採集視頻信息 .. 245
12.5 實戰：手機上的錄音機 ... 247
12.5.1 需求分析 . 247
12.5.2 界面實現 . 248
12.5.3 界面互動的實現 .. 253
12.5.4 錄音和播放功能的實現 ... 256
12.5.5 完整的案例呈現 .. 258
12.6 小結 260
第 13章 PhoneGap的本地存儲.. 261
13.1 手機上可以使用的本地存儲 261
13.1.1 HTML 5中的本地存儲 261
13.1.2 PhoneGap中的本地存儲功能 264
13.2 PhoneGap對資料庫的操作 265
13.2.1 資料庫的使用.. 265
13.2.2 資料庫內容的讀取... 269
13.3 鍵值對的使用方法 .. 272
13.4 小結 275
第 14章一個簡單的“今日頭條”新聞 APP ... 276
14.1 “今日頭條”的功能... 276
14.2 “今日頭條”的界面設計和實現 . 276
14.2.1 新聞列表界面的設計 ... 277
14.2.2 新聞內容頁的實現... 280
14.2.3 界面的進一步整合... 284
14.3 利用 Ajax獲取伺服器上的信息 ... 286
14.3.1 使用 Ajax獲取 JSON數據.. 286
14.3.2 使用 JavaScript跨域解決方案 288
14.3.3 “今日頭條”服務端的實現 290
14.4 讓數據顯示出來 .. 294
14.4.1 新聞列表的顯示 .. 294
14.4.2 新聞內容的顯示 .. 296
14.4.3 項目的最終實現 .. 297
14.5 小結 301
第 15章 HTML 5+PhoneGap實現通訊錄 APP ... 302
15.1 項目介紹. 302
15.2 為 PhoneGap編寫外掛程式 .. 303
15.2.1 實現發簡訊的外掛程式... 304
15.2.2 為 PhoneGap編寫電話撥號外掛程式 308
15.3 通訊錄 APP的界面設計 . 310
15.4 通訊錄 APP的界面實現 . 312
15.4.1 聯繫人列表 . 312
15.4.2 新建聯繫人界面 .. 314
15.4.3 簡訊編輯界面.. 316
15.5 界面功能的實現 .. 317
15.5.1 聯繫人數據的生成... 317
15.5.2 頁面的整合 . 323
15.6 通訊錄 APP最終功能的實現 .. 328
15.7 小結 331
附錄安卓開發環境的搭建 332
2.5 小結 30
第 3章 HTML 5的移動布局... 31
3.1 移動頁面的樣式設計利器 CSS 3 31
3.1.1 個性化的字型.. 31
3.1.2 可重複使用的背景圖 ... 33
3.1.3 輕鬆實現文字效果... 35
3.1.4 設計框線特效.. 37
3.1.5 實現文本的多列布局 ... 40
3.1.6 轉換特效 . 41
3.1.7 過渡特效 . 43
3.2 回響式 Web設計 45
3.2.1 什麼是回響式 Web設計 . 45
3.2.2 流式布局 . 47
3.2.3 媒體查詢 . 49
3.2.4 Twitter Bootstrap理念 52
3.2.5 將 Bootstrap套用到自己的項目中 .. 55
3.3 實例：套用媒介查詢製作回響式導航欄 .. 56
3.4 小結 59
第 4章 HTML 5的地理位置定位 60
4.1 複習一下緯度和經度... 60
4.2 了解 Geolocation API . 61
4.2.1 Geolocation提供的方法 . 61
4.2.2 Geolocation提供的地理數據 .. 62
4.2.3 檢測瀏覽器是否支持地理定位. 63
4.3 使用 Geolocation API . 64
4.3.1 獲取用戶當前的地理位置 64
4.3.2 訪問地理位置的安全問題 65
4.4 實例 1：手機地理定位 67
4.5 實例 2：使用谷歌地圖查找路線.. 70
4.6 小結 79
第 5章 HTML 5的 Web Workers... 80
5.1 認識 Web Workers . 80
5.1.1 Web Workers的套用場合... 80
5.1.2 與 HTML 5 Web Workers通信 ... 81
5.1.3 多個 JavaScript檔案的載入 ... 82
5.1.4 終止 Web Workers的監聽操作... 82
5.1.5 利用 Web Workers創建一個簡單的頁面計數器 . 82
5.2 實戰 Web Workers . 84
5.2.1 實例 1：大數量的圖片處理. 84
5.2.2 實例 2：實現微博訊息的實時推送 .. 87
5.2.3 實例 3：預覽網頁的內容 91
5.2.4 實例 4：定時給網站用戶發訊息.. 96
5.3 小結 .. 103
第 6章 HTML 5的 Web存儲... 104
6.1 認識 HTML 5的 Web Storage .. 104
6.1.1 為什麼使用 Web Storage . 104
6.1.2 Web的存儲方式：LocalStorage與 SessionStorage ... 105
6.1.3 Web Storage如何獲取和保存數據 ... 107
6.2 網站本地存儲兼容性方案.. 108
6.3 如何在實際開發中使用本地存儲 ... 114
6.4 實例 1：保存與讀取登錄用戶名與密碼. 115
6.5 實例 2：共享存儲數據 .. 118
6.6 小結 .. 121
第 7章 HTML 5的多媒體 122
7.1 視頻的進化 ... 122
7.1.1 常見的視頻格式 122
7.1.2 傳統的網頁視頻與 HTML 5視頻... 123
7.2 HTML 5中的音頻 . 124
7.3 使用 JavaScript控制播放 . 124
7.4 audio標籤和 video標籤的瀏覽器支持情況 .. 125
7.5 音視頻的實時通信 126
7.6 打造自己的音頻播放器 . 128
7.7 打造自己的視頻播放器 . 131
7.8 小結 .. 135
第 8章 PhoneGap入門... 136
8.1 走近 PhoneGap 136
8.1.1 PhoneGap的發展歷史 . 136
8.1.2 PhoneGap的特色 138
8.2 搭建 PhoneGap的開發環境 . 140
8.2.1 安裝 NodeJS 141
8.2.2 安裝 PhoneGap 142
8.2.3 安裝 PhoneGap Desktop APP進行測試 .. 144
8.3 創建第一個 PhoneGap APP . 146
8.4 PhoneGap Desktop APP常見的幾個錯誤 151
8.5 PhoneGap你要知道的知識 .. 152
8.5.1 編輯工具的選擇 152
8.5.2 PhoneGap中有哪些 API .. 153
8.5.3 使用雲線上編譯 PhoneGap .. 154
8.6 在 PhoneGap中調試 HTML 5程式 .. 155
8.7 小結 .. 156
第 9章 PhoneGap的事件處理 157
9.1 程式也有生命周期 157
9.1.1 程式對生命周期的定義 . 157
9.1.2 PhoneGap的生命周期 . 159
9.2 事件實戰... 160
9.2.1 使用程式載入事件. 161
9.2.2 使用被動訊息事件. 163
9.2.3 使用主動訊息事件. 165
9.3 PhoneGap中文亂碼的解決方案... 167
9.4 小結 .. 168
第 10章 PhoneGap對信息的處理... 169
10.1 使用 PhoneGap獲取移動設備信息 169
10.2 PhoneGap程式運行慢的解決方案 . 170
10.3 實例：用 PhoneGap製作查看設備的套用 . 172
10.3.1 APP的界面設計 . 172
10.3.2 APP的功能實現 . 174
10.4 通訊錄信息的獲取 .. 177
10.4.1 創建一個聯繫人 .. 177
10.4.2 查找通訊錄 . 178
10.4.3 聯繫人包括哪些屬性 ... 180
10.4.4 聯繫人的各種編輯操作 ... 183
10.4.5 複雜的聯繫人屬性 ContactField . 185
10.5 PhoneGap的訊息提示 ... 188
10.5.1 notification警告的使用 ... 188
10.5.2 確認對話框的使用... 190
10.5.3 顯示可以傳遞參數的對話框 192
10.5.4 控制蜂鳴器和震動... 194
10.6 小結 195
第 11章加速度、地理位置和指南針 ... 196
11.1 認識加速度感測器 .. 196
11.1.1 獲取當前的加速度... 196
11.1.2 監視設備的加速度... 198
11.1.3 詳解“加速度感測器”對象 201
11.2 加速度感測器的使用場景 201
11.3 地理位置的使用 .. 202
11.3.1 獲取手機地理信息... 203
11.3.2 獲取當前所在坐標... 203
11.3.3 監控手機的位置變化 ... 206
11.4 指南針 209
11.4.1 獲取手機的方向 .. 209
11.4.2 監視手機方向的兩種方法 212
11.5 實例：手機“搖一搖”出大獎 214
11.5.1 原形設計 . 214
11.5.2 素材準備 . 214
11.5.3 動畫實現 . 215
11.5.4 最終實現 . 219
11.6 如果默認沒有安裝 Geolocation怎么辦... 223
11.7 小結 224
第 12章 PhoneGap中的多媒體控制... 225
12.1 音頻的處理 . 225
12.1.1 利用 PhoneGap播放網路音樂音頻 225
12.1.2 為播放音樂設定暫停功能 227
12.1.3 為播放音樂設定停止功能 229
12.1.4 獲取音頻檔案的更多信息 230
12.1.5 播放指定位置的音樂 ... 233
12.1.6 使用 PhoneGap錄製聲音... 236
12.1.7 資源有限時釋放音頻資源 238
12.2 使用 Capture來採集聲音 ... 238
12.3 使用 Capture採集圖像信息 241
12.4 使用採集視頻信息 .. 245
12.5 實戰：手機上的錄音機 ... 247
12.5.1 需求分析 . 247
12.5.2 界面實現 . 248
12.5.3 界面互動的實現 .. 253
12.5.4 錄音和播放功能的實現 ... 256
12.5.5 完整的案例呈現 .. 258
12.6 小結 260
第 13章 PhoneGap的本地存儲.. 261
13.1 手機上可以使用的本地存儲 261
13.1.1 HTML 5中的本地存儲 261
13.1.2 PhoneGap中的本地存儲功能 264
13.2 PhoneGap對資料庫的操作 265
13.2.1 資料庫的使用.. 265
13.2.2 資料庫內容的讀取... 269
13.3 鍵值對的使用方法 .. 272
13.4 小結 275
第 14章一個簡單的“今日頭條”新聞 APP ... 276
14.1 “今日頭條”的功能... 276
14.2 “今日頭條”的界面設計和實現 . 276
14.2.1 新聞列表界面的設計 ... 277
14.2.2 新聞內容頁的實現... 280
14.2.3 界面的進一步整合... 284
14.3 利用 Ajax獲取伺服器上的信息 ... 286
14.3.1 使用 Ajax獲取 JSON數據.. 286
14.3.2 使用 JavaScript跨域解決方案 288
14.3.3 “今日頭條”服務端的實現 290
14.4 讓數據顯示出來 .. 294
14.4.1 新聞列表的顯示 .. 294
14.4.2 新聞內容的顯示 .. 296
14.4.3 項目的最終實現 .. 297
14.5 小結 301
第 15章 HTML 5+PhoneGap實現通訊錄 APP ... 302
15.1 項目介紹. 302
15.2 為 PhoneGap編寫外掛程式 .. 303
15.2.1 實現發簡訊的外掛程式... 304
15.2.2 為 PhoneGap編寫電話撥號外掛程式 308
15.3 通訊錄 APP的界面設計 . 310
15.4 通訊錄 APP的界面實現 . 312
15.4.1 聯繫人列表 . 312
15.4.2 新建聯繫人界面 .. 314
15.4.3 簡訊編輯界面.. 316
15.5 界面功能的實現 .. 317
15.5.1 聯繫人數據的生成... 317
15.5.2 頁面的整合 . 323
15.6 通訊錄 APP最終功能的實現 .. 328
15.7 小結 331
附錄安卓開發環境的搭建 332
