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

快速上手Ionic3 多平臺(tái)開(kāi)發(fā)企業(yè)級(jí)問(wèn)答社區(qū)

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

第1章 課程簡(jiǎn)介

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

 

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

第2章 Ionic 框架介紹

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

 

2-1 Ionic 框架簡(jiǎn)介

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

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

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

2-5 Ionic 組件簡(jiǎn)介

2-6 Ionic Native 框架簡(jiǎn)介

第3章 項(xiàng)目實(shí)戰(zhàn)—必備前置知識(shí)點(diǎn)

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

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

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

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

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

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

3-10 Ionic 使用的 TypeScript 語(yǔ)言簡(jiǎn)介

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

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

 

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

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

4-3 VSCode 打開(kāi)項(xiàng)目插件初始化設(shè)置

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

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

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

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

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

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

 

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

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

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

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

第6章 項(xiàng)目實(shí)戰(zhàn)—用戶(hù)登錄組件開(kāi)發(fā)

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

 

6-1 用戶(hù)未登錄的頁(yè)面開(kāi)發(fā)（上）

6-2 用戶(hù)未登錄的頁(yè)面開(kāi)發(fā)（下）

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

6-4 用戶(hù)登錄頁(yè)面布局開(kāi)發(fā)（上）

6-5 用戶(hù)登錄頁(yè)面布局開(kāi)發(fā)（下）

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

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

6-8 用戶(hù)登錄后的頁(yè)面建立與邏輯添加

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

第7章 項(xiàng)目實(shí)戰(zhàn)—用戶(hù)注冊(cè)組件開(kāi)發(fā)

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

 

7-1 用戶(hù)注冊(cè)頁(yè)面的開(kāi)發(fā)與邏輯嵌入

7-2 用戶(hù)注冊(cè)頁(yè)面與 API 結(jié)合的開(kāi)發(fā)

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

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

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

 

8-1 用戶(hù)頭像和個(gè)人信息布局開(kāi)發(fā)

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

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

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

第9章 項(xiàng)目實(shí)戰(zhàn)—圖片上傳組件開(kāi)發(fā)

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

 

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

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

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

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

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

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

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

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

第10章 項(xiàng)目實(shí)戰(zhàn)—首頁(yè)模塊開(kāi)發(fā)

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

 

10-1 搜索部分頁(yè)面布局

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

10-3 提問(wèn)頁(yè)面的頁(yè)面布局開(kāi)發(fā)（一）

10-4 提問(wèn)頁(yè)面的頁(yè)面布局開(kāi)發(fā)（二）

10-5 提問(wèn)頁(yè)面的邏輯開(kāi)發(fā)（一）

10-6 提問(wèn)頁(yè)面的邏輯開(kāi)發(fā)（二）

第11章 項(xiàng)目實(shí)戰(zhàn)—問(wèn)題列表、詳情、回答組件開(kāi)發(fā)

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

 

11-1 問(wèn)題頁(yè)表的頁(yè)面布局開(kāi)發(fā)（一）

11-2 問(wèn)題頁(yè)表的頁(yè)面布局開(kāi)發(fā)（二）

11-3 問(wèn)題頁(yè)表的頁(yè)面布局開(kāi)發(fā)（三）

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

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

11-6 問(wèn)題詳情頁(yè)面的布局開(kāi)發(fā)（一）

11-7 問(wèn)題詳情頁(yè)面的布局開(kāi)發(fā)（二）

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

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

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

11-11 問(wèn)題回答頁(yè)面的布局開(kāi)發(fā)

11-12 問(wèn)題回答頁(yè)面的功能開(kāi)發(fā)

第12章 項(xiàng)目實(shí)戰(zhàn)—發(fā)現(xiàn)模塊開(kāi)發(fā)

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

 

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

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

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

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

 

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

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

13-3 聊天對(duì)話(huà)頁(yè)面的頁(yè)面布局

13-4 聊天對(duì)話(huà)頁(yè)面底部輸入框設(shè)計(jì)與開(kāi)發(fā)

13-5 聊天對(duì)話(huà)頁(yè)面表情輸入模塊的開(kāi)發(fā)（一）

13-6 聊天對(duì)話(huà)頁(yè)面表情輸入模塊的開(kāi)發(fā)（二）

13-7 聊天對(duì)話(huà)頁(yè)面表情輸入模塊的開(kāi)發(fā)（三）

13-8 聊天頁(yè)面自動(dòng)回復(fù)邏輯的開(kāi)發(fā)（一）

13-9 聊天頁(yè)面自動(dòng)回復(fù)邏輯的開(kāi)發(fā)（二）

13-10 聊天頁(yè)面自動(dòng)回復(fù)邏輯的開(kāi)發(fā)（三）- Events 的設(shè)計(jì)模式

13-11 聊天頁(yè)面自動(dòng)回復(fù)邏輯的開(kāi)發(fā)（四）- Events 的設(shè)計(jì)模式

13-12 聊天頁(yè)面自動(dòng)回復(fù)邏輯的開(kāi)發(fā)（五）

第14章 項(xiàng)目實(shí)戰(zhàn)—通知模塊開(kāi)發(fā)

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

 

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

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

18-2 Ionic App 打包前啟動(dòng)圖生成

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

第19章 項(xiàng)目實(shí)戰(zhàn)—App iOS 版本打包上架實(shí)戰(zhàn)

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

 

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

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

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

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

 

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

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

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

 

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