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

基本介紹

• 書名：Ionic 移動開發入門與實戰（第2版）
• 作者：秦超 李一鳴
• ISBN：9787302503453
• 定價：：89元
• 出版時間：2018.08.01

內容介紹

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。

作者簡介

秦超，從事IT行業長達19年，基於網際網路技術的項目開發10年。隨著移動網際網路的發展，主要研究與實踐方向已從大型企業內部套用如PLM、ERP、SCM、HRIS、CMS等逐步轉向以移動和新媒體為主的移動設備套用。近年曾參與領導了傳統企業套用與移動APP的結合和網際網路金融等多個項目的開發工作。

李一鳴，網際網路從業者，擅長JavaScript，喜歡用它在前端和後端折騰，熱愛開源，多個Node.js模組的參與者。長期活躍在各個技術部落格，喜歡分享，Web技術愛好者。

目 錄

第一篇 移動開發準備

第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.2Ionic助力實現你的創業夢想18

1.5小結18

第2章Ionic的開發調試環境安裝19

2.1Ionic快速上手環境安裝19

2.1.1安裝Node.js和NPM19

2.1.2安裝Git21

2.1.3安裝Gulp和Bower23

2.1.4安裝IonicCLI與Cordova25

2.1.5安裝設定Chrome瀏覽器（推薦）27

2.1.6HelloIonic項目29

2.1.7使用瀏覽器驗證開發環境自動重載特性30

2.2Windows下安裝Android開發平台31

2.2.1安裝Android開發環境31

2.2.2為測試項目增加Android平台支持36

2.2.3連線Android實體機設備測試App36

2.2.4不使用Android模擬器的說明37

2.3MacOS下安裝iOS與Android開發平台37

2.3.1安裝Xcode38

2.3.2為測試項目增加iOS平台支持38

2.3.3連線iOS模擬器測試App38

2.3.4低成本連線iOS實體機設備測試App39

2.3.5安裝Android開發環境40

2.3.6為測試項目增加Android平台支持45

2.3.7連線Android實體機設備測試App45

2.4安裝開發工具VisualStudioCode（推薦）46

2.4.1安裝開發工具VisualStudioCode46

2.4.2安裝Ionic輔助編碼外掛程式47

2.5小結48

第二篇Ionic基礎知識準備與常用庫

第3章Angular入門初步51

3.1AngularCLI安裝與使用51

3.1.1AngularCLI的安裝52

3.1.2使用AngularCLI創建項目52

3.1.3使用AngularCLI啟動開發伺服器53

3.2Angular整體結構概述54

3.2.1Angular與TypeScript54

3.2.2Angular實現了M.V.VM模式55

3.2.3Angular實現了模組化55

3.2.4Angular實現了聲明式界面56

3.2.5Angular實現了雙向數據綁定56

3.3模組與依賴注入57

3.3.1根模組57

3.3.2使用模組與組件依賴注入58

3.4組件與模板59

3.4.1Angular中的組件59

3.4.2Angular中的模板和元數據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.1SASS入門71

4.1.1變數與計算72

4.1.2樣式嵌套73

4.1.3單行注釋//75

4.1.4繼承@extend76

4.1.5混入@mixin與@include77

4.1.6顏色計算79

4.1.7引入檔案@import80

4.1.8條件語句@if和@else81

4.2lodash（可選學）81

4.2.1使用場景82

4.2.2引入到項目82

4.2.3進一步學習指南82

4.3Gulp使用簡介（可選學）83

4.3.1Gulp主檔案gulpfile.js的執行原理83

4.3.2獲取流函式src84

4.3.3寫檔案函式dest85

4.3.4監視檔案變化函式watch86

4.3.5定義任務函式task87

4.3.6解析Ionic項目Gulp主檔案88

4.4Ionic項目模板目錄結構簡介89

4.4.1常用工作目錄src90

4.4.2常用工作目錄scss91

4.4.3常用工作目錄resources91

4.4.4重要檔案package.json91

4.4.5重要檔案config.xml91

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.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.1Ionic內置TypeScript組件132

6.1.1組件分類與前後綴說明132

6.1.2使用Ionic內置服務組件133

6.1.3Ionic內置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.1ion-tabs指令組件163

8.2.2ion-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.1Cordova外掛程式220

11.1.1搜尋可用的外掛程式220

11.1.2外掛程式管理（安裝、刪除、顯示已裝外掛程式）221

11.1.3cordova-plugin-battery-status外掛程式使用示例223

11.1.4cordova-plugin-telerik-imagepicker外掛程式說明225

11.2IonicNative外掛程式使用226

11.2.1安裝IonicNative外掛程式226

11.2.2IonicNative外掛程式使用步驟概要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.1MongoDB安裝與測試240

12.2Postman安裝與使用示例243

12.3使用Express初始化創建API示例245

12.4使用Mongoose完善數據持久化示例253

12.5使用Passport加入用戶驗證示例258

12.6小結268

第四篇App項目實戰和發布推廣

第13章項目實戰：逍遙遊Appv0.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使用開發者賬戶連線Xcode371

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