Ionic 移動開發入門與實戰, 2/e (Web前端技術叢書)
內容描述
Ionic是目前集流行與成熟兩個特點於一身的跨平臺移動開發框架。本書以實例驅動講解的方式,讓僅有簡單網頁製作基礎知識的讀者,也能輕松掌握Ionic3.X下的移動應用開發。
本書分為4篇,第1篇是移動開發準備,介紹了Ionic、Phonegap、Cordova、HTML5和移動開發的一些基礎知識;第2篇是Ionic基礎知識準備與常用庫,介紹了配置開發Ionic環境所依賴的Angular、SASS、Gulplodash等業內主流庫和工具;第3篇是Ionic組件完全解析,對Ionic的內置樣式和TypeScript組件類進行完整解析;第4篇是App項目實戰和發布推廣,介紹瞭如何按照業內通行實踐的策劃、設計、開發過程完成Ionic開發的完整App。在開發完成之後,詳解如何為Android和iOS兩大移動平臺發布和推廣更新自己的App。
本書內容詳盡、實例豐富,是Ionic初學者、HTML 5愛好者、移動因特網創業者、移動開發人員必備的參考書,同時也適合高等院校和培訓學校的師生學習閱讀。
海報:
目錄大綱
第一篇移動開發準備
第1章歡迎進入移動開發的世界3
1.1移動互聯網行業的浪潮3
1.2跨平台移動開發框架4
1.2.1什麼是跨平台移動開發框架4
1.2.2為什麼選擇跨平台移動開發框架5
1.2.3可選的跨平台移動開發框架簡介6
1.2.4什麼是PhoneGap / Cordova / Ionic 9
1.3初識Ionic v3.x 10
1.3.1為什麼選擇Ionic 10
1.3.2基於Web技術HTML 5 /CSS 3/JavaScript 11
1.3.3基於Angular框架12
1.3.4接近原生App應用的絢麗界面組件13
1.3.5自適應(Responsive)佈局14
1.3.6支持個(任)性定制14
1.3.7 Ionic的缺點14
1.3.8 Ionic的商業案例15
1.3.9 Ionic的開源案例17
1.4學習完本書找工作與創業17
1.4.1從本書的項目實戰開始準備技術作品17
1.4.2 Ionic助力實現你的創業夢想18
1.5小結18
第2章Ionic的開發調試環境安裝19
2.1 Ionic快速上手環境安裝19
2.1.1安裝Node.js和NPM 19
2.1.2安裝Git 21
2.1.3安裝Gulp和Bower 23
2.1.4安裝Ionic CLI與Cordova 25
2.1.5安裝設置Chrome瀏覽器(推薦) 27
2.1.6 Hello Ionic項目29
2.1.7使用瀏覽器驗證開發環境自動重載特性30
2.2 Windows下安裝Android開發平台31
2.2.1安裝Android開發環境31
2.2.2為測試項目增加Android平台支持36
2.2.3連接Android實體機設備測試App 36
2.2.4不使用Android模擬器的說明37
2.3 Mac OS下安裝iOS與Android開發平台37
2.3.1安裝Xcode 38
2.3.2為測試項目增加iOS平台支持38
2.3.3連接iOS模擬器測試App 38
2.3.4低成本連接iOS實體機設備測試App 39
2.3.5安裝Android開發環境40
2.3.6為測試項目增加Android平台支持45
2.3.7連接Android實體機設備測試App 45
2.4安裝開發工具Visual Studio Code(推薦) 46
2.4.1安裝開發工具Visual Studio Code 46
2.4.2安裝Ionic輔助編碼插件47
2.5小結48
第二篇Ionic基礎知識準備與常用庫
第3章Angular入門初步51
3.1 AngularCLI安裝與使用51
3.1.1 AngularCLI的安裝52
3.1.2使用AngularCLI創建項目52
3.1.3使用AngularCLI啟動開發服務器53
3.2 Angular整體結構概述54
3.2.1 Angular與TypeScript 54
3.2.2 Angular實現了MVVM模式55
3.2.3 Angular實現了模塊化55
3.2.4 Angular實現了聲明式界面56
3.2.5 Angular實現了雙向數據綁定56
3.3模塊與依賴注入57
3.3.1根模塊57
3.3.2使用模塊與組件依賴注入58
3.4組件與模板59
3.4. 1 Angular中的組件59
3.4.2 Angular中的模板和元數據59
3.5指令與服務60
3.5.1指令是什麼60
3.5.2指令的使用61
3.6服務類組件63
3.7一個簡單的Angular項目:實時自選股行情頁64
3.8小結70
第4章其他基礎知識與Ionic項目結構71
4.1 SASS入門71
4.1.1變量與計算72
4.1.2樣式嵌套73
4.1.3單行註釋// 75
4.1.4繼承@extend 76
4.1.5混入@mixin與@include 77
4.1.6顏色計算79
4.1.7引入文件@import 80
4.1.8條件語句@if和@else 81
4.2 lodash(可選學) 81
4.2.1使用場景82
4.2.2引入到項目82
4.2.3進一步學習指南82
4.3 Gulp使用簡介(可選學) 83
4.3.1 Gulp主文件gulpfile.js的執行原理83
4.3.2獲取流函數src 84
4.3.3寫文件函數dest 85
4.3.4監視文件變化函數watch 86
4.3.5定義任務函數task 87
4.3.6解析Ionic項目Gulp主文件88
4.4 Ionic項目模板目錄結構簡介89
4.4.1常用工作目錄src 90
4.4.2常用工作目錄scss 91
4.4.3常用工作目錄resources 91
4.4.4重要文件package.json 91
4.4.5重要文件config.xml 91
4.4.6其他目錄與文件簡介92
4.5小結92
第三篇Ionic組件完全解析
第5章Ionic常用內置組件95
5.1選項卡欄95
5.2導航欄99
5.2.1單層標題導航欄99
5.2.2多層標題導航欄100
5.2.3導航欄的頁面跳轉101
5.3按鈕105
5.3.1按鈕顏色設置105
5.3.2按鈕尺寸與形狀106
5.3.3無填充色按鈕107
5.3.4圖標按鈕108
5.3.5標題欄按鈕110
5.4列表容器112
5.4.1列表頭、普通列表和箭頭列表115
5.4.2圖標列表116
5.4.3圖片列表116
5.4.4側滑列表116
5.5展示卡117
5.5.1普通卡片118
5.5.2列表卡片119
5.5.3社交類卡片119
5.6輸入框121
5.6.1普通輸入框122
5.6. 2帶圖標輸入框122
5.6.3有邊距的輸入框123
5.6.4其他輸入框效果123
5.6.5導航欄放置輸入框124
5.7開關類組件125
5.8範圍選擇組件127
5.9選擇框組件128
5.10自定義主題顏色130
5.11可用圖標集130
5.12小結131
第6章Ionic內置TypeScript組件概述132
6.1 Ionic內置TypeScript組件132
6.1.1組件分類與前後綴說明132
6.1.2使用Ionic內置服務組件133
6.1.3 Ionic內置TypeScript組件與Angular集成134
6.2使用TypeScript組件的常見問題解決辦法134
6.2.1交互調試部署到Android設備上的Ionic應用134
6.2.2設備上顯示白屏幕錯誤問題調試135
6.2.3交互調試部署到iOS設備上的Ionic應用136
6.3小結137
第7章Ionic內置佈局類組件138
7.1內容顯示相關組件140
7.1.1內容展示容器141
7.1.2內容滾動容器143
7.2內容刷新相關組件144
7.2.1加載新內容滾動觸發器144
7.2.2下拉刷新組件146
7.3小結149
第8章Ionic內置導航類組件150
8.1導航框架相關組件151
8.1.1生命週期鉤子151
8.1.2頁面跳轉153
8.1.3頁面間傳值157
8.2選項卡相關組件163
8.2.1 ion-tabs指令組件163
8.2.2 ion-tab指令組件163
8.3側欄菜單相關組件165
8.4導航應用綜合實戰:個人電子簡歷App框架169
8.5小結177
第9章Ionic內置數據展示與操作組件178
9.1對話框類相關組件178
9.1.1浮動框178
9.1.2彈出框182
9.1.3上拉菜單186
9.2加載中提示相關組件188
9.2.1加載中指示器189
9.2.2加載中指示服務190
9.3輪播組件192
9.4鍵盤組件195
9.5抽籤應用練習196
9.6小結209
第10章Ionic內置基礎服務組件與設備平台客制化210
10.1平台服務組件介紹210
10.2平台服務組件使用212
10.2.1獲取設備相關信息212
10.2.2處理Android硬件返回鍵213
10.3設備平台客制化216
10.3.1重寫SCSS樣式類216
10.3.2使用Angular客制化平颱風格示例217
10.4小結219
第11章借助插件接近無限可能220
11.1 Cordova插件220
11.1.1搜索可用的插件220
11.1.2插件管理(安裝、刪除、顯示已裝插件) 221
11.1.3 cordova-plugin-battery-status插件使用示例223
11.1.4 cordova-plugin-telerik- imagepicker插件說明225
11.2 Ionic Native插件使用226
11.2.1安裝Ionic Native插件226
11.2.2 Ionic Native插件使用步驟概要227
11.2.3插件Device使用示例229
11.2.4插件Toast使用示例230
11.2.5插件ActionSheet使用示例231
11.2.6插件AppVersion使用示例232
11.2.7插件Vibration使用示例233
11.2.8插件SocialSharing使用示例233
11.2.9插件Network使用示例234
11.2.10插件NativeStorage使用示例235
11.2.11插件Keyboard使用示例236
11.2.12插件TouchID使用示例237
11.3小結238
第12章後端服務器模擬環境搭建準備239
12.1 MongoDB安裝與測試240
12.2 Postman安裝與使用示例243
12.3使用Express初始化創建API示例245
12.4使用Mongoose完善數據持久化示例253
12.5使用Passport加入用戶驗證示例258
12.6小結268
第四篇App項目實戰和發布推廣
第13章項目實戰:逍遙遊App v0.1(UGC+B2C應用) 271
13.1項目和代碼說明271
13.1.1項目說明271
13.1.2隨書代碼運行說明272
13.2功能設計273
13.2.1界面與功能概述274
13.2.2服務端API接口概述277
13.3功能實現277
13.3.1準備工作:部署服務器端環境277
13.3.2初始化項目設置與目錄結構279
13.3.3實現總體界面導航與路由281
13.3.4實現側欄菜單功能集293
13.3.5實現旅友行踪功能集302
13.3.6實現我的足跡功能集316
13.3.7實現預約旅遊產品功能集337
13.3.8實現設置功能集356
13.3.9定制啟動屏與App圖標365
13.4小結與作業練習365
第14章應用的生成與發布更新367
14.1生成發布Android平台的應用包367
14.1.1生成發布版的apk文件367
14.1.2生成用於簽名的私鑰368
14.1.3對apk文件簽名368
14.1.4優化apk文件並改名369
14.1.5發布Android應用370
14.2生成發布iOS平台的應用370
14.2.1使用開發者賬戶連接Xcode 371
14.2.2簽名371
14.2.3設置應用的標識名372
14.2.4開始應用上架登記373
14.2.5嘗試編譯生成正式發布版的應用376
14.2.6使用Xcode打包App應用376
14.2.7創建應用的發布檔377
14.2.8完成應用上架登記378
14.3更新應用381
14.4小結382