想學(xué)Ionic3，苦于學(xué)習(xí)成本高？新手難搞定？Come on！新手、進階通通看過來，本課將 Ionic開發(fā)過程中的重要知識點、遇到的各種問題結(jié)合項目實戰(zhàn)通過漸進式講解，讓大家具有獨立開發(fā)跨多臺 App 的技能，順利積累完整 App 開發(fā)實戰(zhàn)經(jīng)驗。

第1章 課程簡介

課程導(dǎo)讀，演示了課程最終實現(xiàn)的 App 效果，介紹了課程的基本結(jié)構(gòu)、理論課程大綱、實戰(zhàn)課程講解方法、提高課程大綱以及前置知識點，并演示了課程源碼結(jié)構(gòu)與課程詳細(xì)的開發(fā)筆記思維導(dǎo)圖，最后介紹了學(xué)習(xí)此課程的收獲。

1-1 ionic3-導(dǎo)學(xué)

第2章 Ionic 框架介紹

主要對Ionic 框架簡介及實戰(zhàn)前重要知識點、Ionic 版本詳細(xì)講解與注意事項、Ionic 框架文檔、API、源碼、Ionic 官方Slack、博客論壇介紹、Ionic 組件簡介、Ionic Native 框架、IONICONS 等知識點進行了詳細(xì)地講解，此部分基礎(chǔ)知識不管是對新手還是高手都具有參考意義。...

2-1 Ionic 框架簡介

2-2 Ionic 版本詳細(xì)講解與注意事項

2-3 Ionic 框架文檔、API、源碼

2-4 Ionic 官方Slack、博客論壇介紹

2-5 Ionic 組件簡介

2-6 Ionic Native 框架簡介

第3章 項目實戰(zhàn)―必備前置知識點

主要包含課程使用的思維導(dǎo)圖軟件介紹、Node.js 框架介紹。并實戰(zhàn)演示了 Mac 與 Windows 環(huán)境下的 Node.js 指定版本安裝、網(wǎng)絡(luò)問題解決辦法與此實戰(zhàn)課程指定版本 Ionic 安裝、課程編寫代碼使用的 VSCode 介紹、安裝、VSCode 開發(fā) Ionic 必備的插件介紹與安裝、Android 開發(fā)環(huán)境安裝、Android 模擬器 GenyMo...

3-1 課程使用的思維導(dǎo)圖軟件介紹

3-2 Node.js 框架介紹

3-3 Mac 與 Windows 環(huán)境下的 Node.js 指定版本安裝實戰(zhàn)演示

3-4 網(wǎng)絡(luò)問題解決辦法與此實戰(zhàn)課程指定版本 Ionic 安裝實戰(zhàn)演示

3-5 課程編寫代碼使用的 VSCode 介紹、安裝實戰(zhàn)演示

3-6 VSCode 開發(fā) Ionic 必備的插件介紹與安裝演示

3-7 Android 開發(fā)環(huán)境安裝實戰(zhàn)演示

3-8 Android 模擬器 GenyMotion 安裝實戰(zhàn)演示

3-9 Xcode 簡介與使用注意點

3-10 Ionic 使用的 TypeScript 語言簡介

第4章 項目實戰(zhàn)―開發(fā)環(huán)境初始化

此章節(jié)進行項目的初始化。主要介紹使用 Ionic CLI 進行項目的初始化構(gòu)建，同時又介紹了Ionic CLI 初始化失敗時的另一種構(gòu)建項目方案。并介紹了項目開發(fā)工具 VSCode 必備插件安裝與設(shè)置。然后對項目進行了打包，并講解了如何分別在 iOS、Android 以及瀏覽器與微信中運行測試。...

4-1 使用 Ionic CLI 進行項目的初始化構(gòu)建

4-2 Ionic CLI 初始化失敗時的另一種構(gòu)建項目方案

4-3 VSCode 打開項目插件初始化設(shè)置

4-4 編譯項目的方法并在 iOS 環(huán)境下體驗

4-5 編譯項目的方法并在 Android 環(huán)境下體驗

4-6 編譯項目的方法并在瀏覽器環(huán)境下體驗

4-7 編譯項目的方法并在微信環(huán)境下體驗

第5章 項目實戰(zhàn)―App 基礎(chǔ)布局開發(fā)

此章節(jié)先對整體項目參考的 App 設(shè)計以及設(shè)計稿進行了介紹。并進行了 App 底部 Tabs 布局的開發(fā)。同時建立了五個基礎(chǔ)頁面，還講解了測試 API 的工具 Postman，便于大家測試接口。

5-1 項目布局參考的 App 細(xì)節(jié)講解

5-2 tab 組件布局以及圖標(biāo)選擇

5-3 五個一級基礎(chǔ)頁面的建立與調(diào)試

5-4 項目數(shù)據(jù)源 API 解讀與測試工具 Postman

第6章 項目實戰(zhàn)―用戶登錄組件開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：用戶未登錄模塊、通用組件之 Rest 模塊的建立與邏輯添加、用戶登錄頁面布局、用戶登錄邏輯與 API 結(jié)合、用戶登錄后的頁面建立與邏輯添加、通用組件之通用組件的代碼整理與注釋添加、登錄過程中用戶密碼的安全性處理。...

6-1 用戶未登錄的頁面開發(fā)（上）

6-2 用戶未登錄的頁面開發(fā)（下）

6-3 通用組件之 Rest 模塊的建立與邏輯添加

6-4 用戶登錄頁面布局開發(fā)（上）

6-5 用戶登錄頁面布局開發(fā)（下）

6-6 用戶登錄邏輯與 API 結(jié)合的開發(fā)（上）

6-7 用戶登錄邏輯與 API 結(jié)合的開發(fā)（下）

6-8 用戶登錄后的頁面建立與邏輯添加

6-9 通用組件之通用組件的代碼整理與注釋添加

第7章 項目實戰(zhàn)―用戶注冊組件開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)用戶注冊模塊并詳細(xì)講解了用戶注冊表單驗證的增強。用戶登錄與注冊模塊涉及技術(shù)點 Ionic 表單Ionic Provider、Ionic 請求 RESTful、Ionic Loading、Ionic Toast、Ionic Modal、Ionic 模塊的抽象。

7-1 用戶注冊頁面的開發(fā)與邏輯嵌入

7-2 用戶注冊頁面與 API 結(jié)合的開發(fā)

7-3 用戶注冊表單驗證的增強

第8章 項目實戰(zhàn)―個人信息組件開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：用戶頭像和個人信息布局、用戶頭像和個人信息數(shù)據(jù)加載、個人信息修改頁面的布局、個人信息修改頁面數(shù)據(jù)加載。

8-1 用戶頭像和個人信息布局開發(fā)

8-2 用戶頭像和個人信息數(shù)據(jù)加載開發(fā)

8-3 個人信息修改頁面的布局開發(fā)

8-4 個人信息修改頁面數(shù)據(jù)加載開發(fā)

第9章 項目實戰(zhàn)―圖片上傳組件開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：修改頭像功能頁面的整體結(jié)構(gòu)、修改頭像功能頁面的布局開發(fā)、獲取圖片的邏輯處理、圖片處理后的圖片上傳邏輯。最后在 iOS、Android 系統(tǒng)下測試圖片上傳的功能。涉及的技術(shù)點：Ionic Navigation、Ionic Native Camera、Ionic Native File、Ionic Native FilePath、Ionic Native T...

9-1 修改頭像功能頁面的整體結(jié)構(gòu)講解

9-2 修改頭像功能頁面的布局開發(fā)

9-3 獲取圖片的邏輯處理（上）

9-4 獲取圖片的邏輯處理（中）

9-5 獲取圖片的邏輯處理（下）

9-6 圖片處理后的圖片上傳邏輯開發(fā)

9-7 圖片處理后的圖片上傳邏輯開發(fā)-修復(fù)一個官方bug

9-8 在不同的系統(tǒng)下測試圖片上傳的功能

第10章 項目實戰(zhàn)―首頁模塊開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：搜索部分頁面布局、三欄功能按鈕布局及事件加載、提問頁面的頁面布局、提問頁面的邏輯。首頁模塊涉及的技術(shù)點： Flex 布局、Ionic Grid、Ionic Card、Ionic List、Ionic SearchBar。

10-1 搜索部分頁面布局

10-2 三欄功能按鈕布局及事件加載

10-3 提問頁面的頁面布局開發(fā)（一）

10-4 提問頁面的頁面布局開發(fā)（二）

10-5 提問頁面的邏輯開發(fā)（一）

10-6 提問頁面的邏輯開發(fā)（二）

第11章 項目實戰(zhàn)―問題列表、詳情、回答組件開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：問題頁表的頁面布局、問題列表頁面的數(shù)據(jù)綁定邏輯、問題詳情頁面的布局、問題詳情頁面的數(shù)據(jù)、問題回答頁面的布局、問題回答頁面的功能。整個首頁包含的模塊如下：提問模塊、問題列表、問題詳情、問題關(guān)注功能、問題回答模塊。...

11-1 問題頁表的頁面布局開發(fā)（一）

11-2 問題頁表的頁面布局開發(fā)（二）

11-3 問題頁表的頁面布局開發(fā)（三）

11-4 問題列表頁面的數(shù)據(jù)綁定邏輯開發(fā)（一）

11-5 問題列表頁面的數(shù)據(jù)綁定邏輯開發(fā)（二）

11-6 問題詳情頁面的布局開發(fā)（一）

11-7 問題詳情頁面的布局開發(fā)（二）

11-8 問題詳情頁面的數(shù)據(jù)加載（一）

11-9 問題詳情頁面的數(shù)據(jù)加載（二）

11-10 問題詳情頁面的數(shù)據(jù)加載（三）

11-11 問題回答頁面的布局開發(fā)

11-12 問題回答頁面的功能開發(fā)

第12章 項目實戰(zhàn)―發(fā)現(xiàn)模塊開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)發(fā)現(xiàn)模塊，主要包含功能點：List 數(shù)據(jù)加載、大模塊的重構(gòu)與復(fù)用。技術(shù)點如下：Angular 模塊抽象與復(fù)用、Ionic 頁面加載優(yōu)化。

12-1 發(fā)現(xiàn)頁面的頁面布局設(shè)計

12-2 發(fā)現(xiàn)頁面的邏輯開發(fā)

第13章 項目實戰(zhàn)―聊天機器人模塊開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：聊天模塊的功能設(shè)計介紹、聊天模塊的頁面列表設(shè)計與開發(fā)、聊天對話頁面的頁面布局、聊天對話頁面底部輸入框設(shè)計與開發(fā)、聊天對話頁面表情輸入模塊 、聊天頁面自動回復(fù)邏輯。實戰(zhàn)過程中主要介紹了一下的技術(shù)點：Angular Service、Angular Event、Angular Pipes、Ionic RelativeTime P...

13-1 聊天模塊的功能設(shè)計介紹

13-2 聊天模塊的頁面列表設(shè)計與開發(fā)

13-3 聊天對話頁面的頁面布局

13-4 聊天對話頁面底部輸入框設(shè)計與開發(fā)

13-5 聊天對話頁面表情輸入模塊的開發(fā)（一）

13-6 聊天對話頁面表情輸入模塊的開發(fā)（二）

13-7 聊天對話頁面表情輸入模塊的開發(fā)（三）

13-8 聊天頁面自動回復(fù)邏輯的開發(fā)（一）

13-9 聊天頁面自動回復(fù)邏輯的開發(fā)（二）

13-10 聊天頁面自動回復(fù)邏輯的開發(fā)（三）- Events 的設(shè)計模式

13-11 聊天頁面自動回復(fù)邏輯的開發(fā)（四）- Events 的設(shè)計模式

13-12 聊天頁面自動回復(fù)邏輯的開發(fā)（五）

第14章 項目實戰(zhàn)―通知模塊開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)了通知模塊，快速地進行了列表的布局與邏輯綁定的添加，加深對前面基礎(chǔ)但常用的數(shù)據(jù)請求與列表綁定知識進行了復(fù)習(xí)。

14-1 通知模塊的頁面布局開發(fā)

14-2 通知頁面的列表數(shù)據(jù)加載

第15章 項目實戰(zhàn)―我的模塊開發(fā)

此項目實戰(zhàn)章節(jié)主要開發(fā)以下模塊：我的頁面布局、我的提問模塊頁面、我的提問模塊頁面數(shù)據(jù)加載、我的關(guān)注模塊、我的回答模塊。主要講解了模塊化開發(fā)的設(shè)計原則與實戰(zhàn)演示，同時講解了軟件開發(fā)應(yīng)該遵循的一些設(shè)計原則。...

15-1 個人中心我的頁面布局開發(fā)

15-2 公用模塊的設(shè)計與布局開發(fā)

15-3 公用模塊的邏輯開發(fā)

15-4 快速綁定對應(yīng)參數(shù)生成列表的方法

第16章 項目實戰(zhàn)―動態(tài)樣式、夜間模式

此章節(jié)主要介紹 Ionic 中動態(tài)樣式的加載原理，并同時開發(fā)了夜間模式的模塊。同時演示了一些樣式編寫的技巧。

16-1 夜間模式的樣式定義原理及樣式定義

16-2 夜間模式的布局實現(xiàn)

16-3 夜間模式的功能實現(xiàn)

第17章 Ionic Native 回顧與二維碼掃描、關(guān)于模塊

課程再次回顧了 Ionic Native 的使用，并介紹了兩個組件：QR Scanner 與 App Version。同時進行了實戰(zhàn)開發(fā)，并對使用組件中會遇到的一些需要特別避開的問題進行了原理性講解。

17-1 二維碼掃描功能布局開發(fā)

17-2 二維碼掃描功能實現(xiàn)

17-3 關(guān)于模塊的 App 信息讀取

第18章 項目實戰(zhàn)―App 打包前優(yōu)化方案

課程主要講解并實際演示了 Ionic App 打包前圖標(biāo)生成、Ionic App 打包前啟動圖生成、Ionic App 打包前的優(yōu)化方案講解。這些是打包前需要做的工作，也會分享在開發(fā)中如何大幅度提高開發(fā)效率的方法。

18-1 Ionic App 打包前圖標(biāo)生成

18-2 Ionic App 打包前啟動圖生成

18-3 Ionic App 打包前的代碼整理

第19章 項目實戰(zhàn)―App iOS 版本打包上架實戰(zhàn)

課程再次演示了最終的項目如何編譯打包成 iOS 項目，并演示了如何將項目提交到 App Store 審核。供同學(xué)們提交 iOS 應(yīng)用審核時參考。

19-1 Ionic iOS App 上架操作實戰(zhàn)演示（一）

19-2 Ionic iOS App 上架操作實戰(zhàn)演示（二）

第20章 項目實戰(zhàn)―App Android 版本打包實戰(zhàn)

課程再次演示了如何將最終的項目打包生成 Android 的 apk 安裝包，并簡單介紹了目前可以上架的 Android 市場。供同學(xué)們上架 Android 應(yīng)用時參考。

20-1 Ionic Android App 打包實戰(zhàn)操作演示

第21章 項目實戰(zhàn)―App 網(wǎng)頁、微信版本打包實戰(zhàn)

課程再次演示了如何將最終的項目打包成瀏覽器下的部署文件，并演示了如何將文件包部署成網(wǎng)站，并最終發(fā)布到瀏覽器或者微信中去。供同學(xué)們部署成網(wǎng)頁應(yīng)用時參考。

21-1 Ionic 項目發(fā)布到網(wǎng)站并在手機以及微信中的實戰(zhàn)演示