【博學(xué)網(wǎng)課】Ionic3 多平臺開發(fā)企業(yè)級問答社區(qū)實(shí)戰(zhàn)講座

快速上手Ionic3 多平臺開發(fā)企業(yè)級問答社區(qū)

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

第1章 課程簡介

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

 

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

第2章 Ionic 框架介紹

主要對Ionic 框架簡介及實(shí)戰(zhàn)前重要知識點(diǎn)、Ionic 版本詳細(xì)講解與注意事項、Ionic 框架文檔、API、源碼、Ionic 官方Slack、博客論壇介紹、Ionic 組件簡介、Ionic Native 框架、IONICONS 等知識點(diǎn)進(jìn)行了詳細(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章 項目實(shí)戰(zhàn)—必備前置知識點(diǎn)

主要包含課程使用的思維導(dǎo)圖軟件介紹、Node.js 框架介紹。并實(shí)戰(zhàn)演示了 Mac 與 Windows 環(huán)境下的 Node.js 指定版本安裝、網(wǎng)絡(luò)問題解決辦法與此實(shí)戰(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 指定版本安裝實(shí)戰(zhàn)演示

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

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

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

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

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

3-9 Xcode 簡介與使用注意點(diǎn)

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

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

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

 

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

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

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

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

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

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

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

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

此章節(jié)先對整體項目參考的 App 設(shè)計以及設(shè)計稿進(jìn)行了介紹。并進(jìn)行了 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章 項目實(shí)戰(zhàn)—用戶登錄組件開發(fā)

此項目實(shí)戰(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章 項目實(shí)戰(zhàn)—用戶注冊組件開發(fā)

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

 

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

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

7-3 用戶注冊表單驗(yàn)證的增強(qiáng)

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

此項目實(shí)戰(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章 項目實(shí)戰(zhàn)—圖片上傳組件開發(fā)

此項目實(shí)戰(zhàn)章節(jié)主要開發(fā)以下模塊：修改頭像功能頁面的整體結(jié)構(gòu)、修改頭像功能頁面的布局開發(fā)、獲取圖片的邏輯處理、圖片處理后的圖片上傳邏輯。最后在 iOS、Android 系統(tǒng)下測試圖片上傳的功能。涉及的技術(shù)點(diǎn)：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章 項目實(shí)戰(zhàn)—首頁模塊開發(fā)

此項目實(shí)戰(zhàn)章節(jié)主要開發(fā)以下模塊：搜索部分頁面布局、三欄功能按鈕布局及事件加載、提問頁面的頁面布局、提問頁面的邏輯。首頁模塊涉及的技術(shù)點(diǎn)： 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章 項目實(shí)戰(zhàn)—問題列表、詳情、回答組件開發(fā)

此項目實(shí)戰(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章 項目實(shí)戰(zhàn)—發(fā)現(xiàn)模塊開發(fā)

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

 

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

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

第13章 項目實(shí)戰(zhàn)—聊天機(jī)器人模塊開發(fā)

此項目實(shí)戰(zhàn)章節(jié)主要開發(fā)以下模塊：聊天模塊的功能設(shè)計介紹、聊天模塊的頁面列表設(shè)計與開發(fā)、聊天對話頁面的頁面布局、聊天對話頁面底部輸入框設(shè)計與開發(fā)、聊天對話頁面表情輸入模塊 、聊天頁面自動回復(fù)邏輯。實(shí)戰(zhàn)過程中主要介紹了一下的技術(shù)點(diǎn)：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章 項目實(shí)戰(zhàn)—通知模塊開發(fā)

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

 

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

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

第15章 項目實(shí)戰(zhàn)—我的慕課模塊開發(fā)

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

課程主要講解并實(shí)際演示了 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章 項目實(shí)戰(zhàn)—App iOS 版本打包上架實(shí)戰(zhàn)

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

 

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

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

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

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

 

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

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

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

 

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