Ionic移動開發入門與實戰（第2版）

第一篇 移動開發準備

第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實現了M.V.VM模式 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

前言

Ionic是一個開源免費、技術先進，並獲得業內廣泛認可的跨平臺的移動開發框架。它是基於主流技術HTML 5和Angular的快速開發工具，在極大地解放開發創業者的時間和學習成本的同時又融合了成熟的前端工程技術實踐的成果。遺憾的是，由於Ionic涉及了前端技術界各種先進技術並不斷演進，目前網路上為初學者提供的Ionic的中文資料不僅散亂不成體系，而且很多內容與Ionic的官方資料有較大的出入，也沒有較好的開源項目可以借鑒。國內的初學者想要短時間完全掌握並成功上手開發出一個可用的App需要走很多彎路。因此作者結合自己的學習與開發經驗，在本書以學習Ionic 3.X開發的前置基礎知識，如Angular框架、SASS、Gulp等技術面為起點，闡述了Ionic框架的所有元件使用方法之後，輔以涵蓋前後端實現的Ionic項目完整解析來引導學習者最終掌握Ionic框架及其周邊技術。

本書的目的是力求通過官方權威資料，理論與實戰專案相結合，使讀者在練習與模仿中熟練掌握利用Ionic快速開發跨平臺移動App的方法，並能夠真實地將技術轉化為經濟效益和創業成果。本書的定位就是為想在移動應用領域找工作或創業的人士提供加速器。