Ionic 移動開發入門與實戰

Ionic 移動開發入門與實戰

《Ionic 移動開發入門與實戰》是2018年6月1日清華大學出版社出版的圖書,作者是秦超、李一鳴。

基本介紹

  • 中文名:Ionic 移動開發入門與實戰
  • 作者:秦超、李一鳴
  • 出版社:清華大學出版社
  • ISBN:9787302503453
內容簡介,圖書目錄,

內容簡介

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實現了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

相關詞條

熱門詞條

聯絡我們