HTML5移動網站與App開發實戰

HTML5移動網站與App開發實戰

作者: 王金柱 綿綿的糖
出版社: 清華大學
出版在: 2022-08-01
ISBN-13: 9787302612841
ISBN-10: 7302612846





內容描述


本書由淺入深出、全面系統地介紹HTML5相關技術及其在移動開發領域的應用。從基本原理到移動頁面優化再到實戰應用,涉及HTML5移動開發領域的絕大部分內容,是一本集理論與實戰於一體的綜合性參考書。本書配套示例源碼與PPT課件。
本書共分15章。第1~9章講解HTML5移動特性,內容包括HTML5移動開發基礎、移動表單、多媒體形式、地理位置定位、離線緩存、Canvas繪圖、CSS3視覺輔助和調用手機設備等,最後剖析移動開發性能優化的一些技巧。第10~11章講解HTML5移動框架jQuery Mobile,內容包括jQuery Mobile這個比較流行的移動框架的用法,以及基於這個框架開發移動便箋App。第12~13章講解HTML5+Vue組合,內容包括Vue框架的特性與安裝使用方法,結合HTML5與Vue開發音樂播放App。第14~15章講解HTML5+React組合,內容包括React框架的介紹及其安裝使用,並結合HTML5與React開發一個可拖曳的待辦事項App。
本書適合所有想深入學習HTML5移動開發技術的初學者閱讀,尤其適合正在應用HTML5做移動項目開發的人員閱讀。對於高等院校相關專業的學生和培訓機構的學員,本書也是一本不可多得的實訓教材。


目錄大綱


目    錄
第1章  HTML5移動入門 1
1.1  認識HTML 1
1.1.1  HTML的構成 1
1.1.2  CSS的構成 2
1.1.3  JavaScript的構成 3
1.2  認識HTML5 4
1.2.1  HTML5的發展與理念 5
1.2.2  HTML5和XHTML的對比 6
1.3  製作一個簡單的HTML5移動App 7
1.3.1  開發工具的選擇 7
1.3.2  App代碼的編寫 8
1.3.3  調試運行 Hello App 9
1.4  HTML5的移動特色 9
1.5  本章小結 10
第2章  移動特性1——移動表單 11
2.1  豐富的表單屬性 11
2.2  移動Web表單的input類型 13
2.2.1  search類型 13
2.2.2  email類型 13
2.2.3  number類型 14
2.2.4  range類型 15
2.2.5  tel類型 15
2.2.6  url類型 15
2.3  HTML5表單新屬性 16
2.3.1  autocomplete屬性 16
2.3.2  autofocus屬性 17
2.4  範例——創建一個HTML5版的App註冊頁面 17
2.4.1  代碼設計 18
2.4.2  代碼分析 23
2.5  本章小結 24
第3章  移動特性2——多媒體形式 25
3.1  音頻和視頻 25
3.1.1  音頻和視頻的格式 25
3.1.2  使用audio/video元素 26
3.1.3  音頻和視頻的通信 27
3.2  範例——製作音樂播放器App 29
3.3  範例——製作視頻播放器App 31
3.3.1  普通視頻播放器 32
3.3.2  添加視頻進度條 35
3.3.3  添加視頻快進慢進按鈕 37
3.3.4  處理帶字幕的視頻 38
3.4  本章小結 40
第4章  移動特性3——地理位置定位 41
4.1  認識地理位置 41
4.1.1  緯度和經度坐標 41
4.1.2  定位數據 42
4.1.3  構建地理位置應用 43
4.2  手機地理位置定位 44
4.3  谷歌地圖的使用 46
4.3.1  追蹤用戶的位置 46
4.3.2  查找路線 50
4.3.3  用戶自定義的地理定位 57
4.4  高德地圖的使用 61
4.5  本章小結 63
第5章  移動特性4——離線緩存 64
5.1  離線緩存應用 64
5.1.1  離線緩存API簡介 64
5.1.2  使用Manifest文件 67
5.1.3  使用ApplicationCache API方法 68
5.1.4  緩存更新示例 68
5.2  離線事件處理 72
5.3  範例——離線貼吧App 75
5.4  本章小結 79

第6章  移動特性5——Canvas繪圖 80
6.1  HTML5的繪圖API 80
6.1.1  什麽是Canvas 80
6.1.2  加載Canvas 81
6.1.3  什麽是SVG 82
6.1.4  什麽是WebGL 84
6.1.5  Paper.js圖形庫 85
6.2  應用Canvas 86
6.2.1  繪制圖形 86
6.2.2  繪制文字 90
6.2.3  顏色漸變 97
6.3  範例——帶特效的相冊App 99
6.4  本章小結 106
第7章  移動特性6——CSS3視覺輔助 107
7.1  CSS3的變化 107
7.2  背景 108
7.3  文字效果 109
7.4  邊框 110
7.5  用戶界面 112
7.6  轉換 114
7.7  過渡 115
7.8  範例——用CSS3畫哆啦A夢 116
7.8.1  頭和臉 116
7.8.2  脖子和鈴鐺 119
7.8.3  身體和四肢 121
7.8.4  讓眼睛動起來 125
7.9  本章小結 126
第8章  移動特性7——調用手機設備 127
8.1  HTML5調用手機攝像頭 127
8.2  HTML5調用手機相冊 130
8.3  HTML5調用手機通訊錄 135
8.4  本章小結 138
第9章  HTML5移動性能優化 139
9.1  HTML5的性能考量 139
9.1.1  瀏覽器性能 139
9.1.2  網絡性能 142
9.1.3  開發效率 143
9.2  加載優化 145
9.2.1  減少HTTP請求 146
9.2.2  充分利用緩存 149
9.2.3  壓縮 150
9.2.4  優化JavaScript加載性能 154
9.2.5  其他加載優化 161
9.3  CSS優化 163
9.3.1  瞭解頁面的渲染過程 164
9.3.2  避免在HTML標簽中寫style屬性 166
9.3.3  正確使用display屬性 166
9.3.4  避免使用CSS表達式 167
9.3.5  不濫用float屬性 167
9.3.6  不濫用Web字體 169
9.3.7  不聲明過多的Font-size 171
9.3.8  優化選擇器的使用 171
9.4  圖片優化 174
9.4.1  使用CSS3代替圖片 174
9.4.2  使用Data URI代替圖片 176
9.4.3  使用SVG代替圖片 180
9.4.4  IconFont與SVG優劣對比 181
9.4.5  使用壓縮圖片 182
9.4.6  使用srcset 183
9.4.7  使用WebP 184
9.5  渲染優化 186
9.5.1  渲染流程 186
9.5.2  使用Viewport加速頁面渲染 187
9.5.3  動畫優化 188
9.5.4  高頻事件優化 191
9.5.5  GPU加速 193
9.6  腳本優化 194
9.6.1  腳本執行優化 194
9.6.2  條件JavaScript 196
9.6.3  緩存DOM操作 198
9.6.4  盡量使用事件委托以避免批量綁定事件 201
9.6.5  盡量使用ID選擇器 203
9.6.6  click事件優化 204
9.7  本章小結 206
第10章  jQuery Mobile移動框架 207
10.1  初步接觸jQuery Mobile 207
10.1.1  jQuery Mobile框架的特點 207
10.1.2  jQuery Mobile框架的安裝與配置 208
10.1.3  創建第一個jQuery Mobile Web App 210
10.2  jQuery Mobile頁面與導航 212
10.2.1  jQuery Mobile單頁面 212
10.2.2  jQuery Mobile多頁面 213
10.2.3  jQuery Mobile對話框頁面 216
10.2.4  jQuery Mobile導航 220
10.2.5  jQuery Mobile加載元素 224
10.2.6  jQuery Mobile動畫效果 227
10.3  jQuery Mobile CSS樣式 230
10.3.1  按鈕樣式 230
10.3.2  圖標樣式 236
10.3.3  網格佈局樣式 240
10.4  jQuery Mobile小部件 243
10.4.1  工具條 243
10.4.2  導航條 246
10.4.3  選項卡 250
10.4.4  面板 253
10.4.5  彈出框 255
10.5  jQuery Mobile表單 258
10.5.1  輸入框 258
10.5.2  復選框 259
10.5.3  單選按鈕 261
10.5.4  下拉列表框 262
10.5.5  滑塊控件 263
10.6  本章小結 265
第11章  jQuery Mobile框架實戰——移動便箋App 266
11.1  項目介紹 266
11.2  項目功能模塊 267
11.2.1  主頁 267
11.2.2  便箋內容瀏覽頁面 269
11.2.3  登錄頁面 270
11.2.4  便箋內容瀏覽頁面(用戶權限) 272
11.2.5  新建便箋內容 274
11.2.6  編輯便箋內容 275
11.2.7  刪除便箋內容 276
11.2.8  清空便箋內容 276
11.3  本章小結 277
第12章  Vue項目開發入門 278
12.1  Vue的初次接觸 278
12.1.1  Vue框架的特點 278
12.1.2  Vue框架的下載安裝 279
12.2  如何快速創建Vue項目(Vue 2和Vue 3) 281
12.2.1  使用腳手架命令快速創建Vue項目 281
12.2.2  通過構建工具Vite創建Vue項目 283
12.3  Vue項目剖析 283
12.3.1  模板 283
12.3.2  樣式設置 287
12.3.3  各組件生命周期 288
12.4  本章小結 289
第13章  HTML5+Vue實戰——音樂App 290
13.1  創建項目 290
13.2  後端接口搭建 292
13.3  前端依賴庫的安裝 293
13.4  首頁(歌曲推薦頁面) 295
13.5  實現歌手分類頁面 303
13.6  歌手所有歌曲頁面實現 306
13.7  歌單分類頁面實現 308
13.8  本章小結 310
第14章  React項目開發入門 311
14.1  React的下載安裝 311
14.1.1  React框架的特點 311
14.1.2  React框架的下載安裝 312
14.2  如何快速創建React項目 315
14.3  React項目剖析 316
14.3.1  模板 316
14.3.2  樣式設置 319
14.3.3  各組件生命周期 321
14.4  本章小結 326
第15章  HTML5+React實戰——可拖曳的待辦事項App 327
15.1  創建項目 327
15.2  創建待辦事項子組件 329
15.3  待辦事項子組件 331
15.4  圖標子組件 337
15.5  待辦事項詳情子組件 339
15.6  編輯待辦事項子組件 343
15.7  拖曳刪除待辦事項 347
15.8  本章小結 357




相關書籍

The Web Designer's Idea Book, Volume 3: Inspiration from Today's Best Web Design Trends, Themes and Styles (Paperback)

作者 Patrick McNeil

2022-08-01

精通模塊化JavaScript

作者 Nicolas Bevacqua 回曉等譯

2022-08-01

Kafka 基礎架構與設計

作者 智酷道捷內容與產品中心

2022-08-01