快速上手Ionic3 多平臺開發企業級問答社區

快速上手Ionic3 多平臺開發企業級問答社區

想學Ionic3,苦於學習成本高?新手難搞定?Come on!新手、進階通通看過來,本課將 Ionic開發過程中的重要知識點、遇到的各種問題結合項目實戰通過漸進式講解,讓大傢俱有獨立開發跨多臺 App 的技能,順利積累完整 App 開發實戰經驗。

課程

  • 第1章 課程簡介

    課程導讀,演示了課程最終實現的 App 效果,介紹了課程的基本結構、理論課程大綱、實戰課程講解方法、提高課程大綱以及前置知識點,並演示了課程源碼結構與課程詳細的開發筆記思維導圖,最後介紹了學習此課程的收穫。

    • 1-1 ionic3-導學
  • 第2章 Ionic 框架介紹

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

    • 2-1 Ionic 框架簡介
    • 2-2 Ionic 版本詳細講解與注意事項
    • 2-3 Ionic 框架文檔、API、源碼
    • 2-4 Ionic 官方Slack、博客論壇介紹
    • 2-5 Ionic 組件簡介
    • 2-6 Ionic Native 框架簡介
  • 第3章 項目實戰—必備前置知識點

    主要包含課程使用的思維導圖軟件介紹、Node.js 框架介紹。並實戰演示了 Mac 與 Windows 環境下的 Node.js 指定版本安裝、網絡問題解決辦法與此實戰課程指定版本 Ionic 安裝、課程編寫代碼使用的 VSCode 介紹、安裝、VSCode 開發 Ionic 必備的插件介紹與安裝、Android 開發環境安裝、Android 模擬器 GenyMo...

    • 3-1 課程使用的思維導圖軟件介紹
    • 3-2 Node.js 框架介紹
    • 3-3 Mac 與 Windows 環境下的 Node.js 指定版本安裝實戰演示
    • 3-4 網絡問題解決辦法與此實戰課程指定版本 Ionic 安裝實戰演示
    • 3-5 課程編寫代碼使用的 VSCode 介紹、安裝實戰演示
    • 3-6 VSCode 開發 Ionic 必備的插件介紹與安裝演示
    • 3-7 Android 開發環境安裝實戰演示
    • 3-8 Android 模擬器 GenyMotion 安裝實戰演示
    • 3-9 Xcode 簡介與使用注意點
    • 3-10 Ionic 使用的 TypeScript 語言簡介
  • 第4章 項目實戰—開發環境初始化

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

    • 4-1 使用 Ionic CLI 進行項目的初始化構建
    • 4-2 Ionic CLI 初始化失敗時的另一種構建項目方案
    • 4-3 VSCode 打開項目插件初始化設置
    • 4-4 編譯項目的方法並在 iOS 環境下體驗
    • 4-5 編譯項目的方法並在 Android 環境下體驗
    • 4-6 編譯項目的方法並在瀏覽器環境下體驗
    • 4-7 編譯項目的方法並在微信環境下體驗
  • 第5章 項目實戰—App 基礎佈局開發

    此章節先對整體項目參考的 App 設計以及設計稿進行了介紹。並進行了 App 底部 Tabs 佈局的開發。同時建立了五個基礎頁面,還講解了測試 API 的工具 Postman,便於大家測試接口。

    • 5-1 項目佈局參考的 App 細節講解
    • 5-2 tab 組件佈局以及圖標選擇
    • 5-3 五個一級基礎頁面的建立與調試
    • 5-4 項目數據源 API 解讀與測試工具 Postman
  • 第6章 項目實戰—用戶登錄組件開發

    此項目實戰章節主要開發以下模塊:用戶未登錄模塊、通用組件之 Rest 模塊的建立與邏輯添加、用戶登錄頁面佈局、用戶登錄邏輯與 API 結合、用戶登錄後的頁面建立與邏輯添加、通用組件之通用組件的代碼整理與註釋添加、登錄過程中用戶密碼的安全性處理。...

    • 6-1 用戶未登錄的頁面開發(上)
    • 6-2 用戶未登錄的頁面開發(下)
    • 6-3 通用組件之 Rest 模塊的建立與邏輯添加
    • 6-4 用戶登錄頁面佈局開發(上)
    • 6-5 用戶登錄頁面佈局開發(下)
    • 6-6 用戶登錄邏輯與 API 結合的開發(上)
    • 6-7 用戶登錄邏輯與 API 結合的開發(下)
    • 6-8 用戶登錄後的頁面建立與邏輯添加
    • 6-9 通用組件之通用組件的代碼整理與註釋添加
  • 第7章 項目實戰—用戶註冊組件開發

    此項目實戰章節主要開發用戶註冊模塊並詳細講解了用戶註冊表單驗證的增強。用戶登錄與註冊模塊涉及技術點 Ionic 表單Ionic Provider、Ionic 請求 RESTful、Ionic Loading、Ionic Toast、Ionic Modal、Ionic 模塊的抽象。

    • 7-1 用戶註冊頁面的開發與邏輯嵌入
    • 7-2 用戶註冊頁面與 API 結合的開發
    • 7-3 用戶註冊表單驗證的增強
  • 第8章 項目實戰—個人信息組件開發

    此項目實戰章節主要開發以下模塊:用戶頭像和個人信息佈局、用戶頭像和個人信息數據加載、個人信息修改頁面的佈局、個人信息修改頁面數據加載。

    • 8-1 用戶頭像和個人信息佈局開發
    • 8-2 用戶頭像和個人信息數據加載開發
    • 8-3 個人信息修改頁面的佈局開發
    • 8-4 個人信息修改頁面數據加載開發
  • 第9章 項目實戰—圖片上傳組件開發

    此項目實戰章節主要開發以下模塊:修改頭像功能頁面的整體結構、修改頭像功能頁面的佈局開發、獲取圖片的邏輯處理、圖片處理後的圖片上傳邏輯。最後在 iOS、Android 系統下測試圖片上傳的功能。涉及的技術點:Ionic Navigation、Ionic Native Camera、Ionic Native File、Ionic Native FilePath、Ionic Native T...

    • 9-1 修改頭像功能頁面的整體結構講解
    • 9-2 修改頭像功能頁面的佈局開發
    • 9-3 獲取圖片的邏輯處理(上)
    • 9-4 獲取圖片的邏輯處理(中)
    • 9-5 獲取圖片的邏輯處理(下)
    • 9-6 圖片處理後的圖片上傳邏輯開發
    • 9-7 圖片處理後的圖片上傳邏輯開發-修復一個官方bug
    • 9-8 在不同的系統下測試圖片上傳的功能
  • 第10章 項目實戰—首頁模塊開發

    此項目實戰章節主要開發以下模塊:搜索部分頁面佈局、三欄功能按鈕佈局及事件加載、提問頁面的頁面佈局、提問頁面的邏輯。首頁模塊涉及的技術點: Flex 佈局、Ionic Grid、Ionic Card、Ionic List、Ionic SearchBar。

    • 10-1 搜索部分頁面佈局
    • 10-2 三欄功能按鈕佈局及事件加載
    • 10-3 提問頁面的頁面佈局開發(一)
    • 10-4 提問頁面的頁面佈局開發(二)
    • 10-5 提問頁面的邏輯開發(一)
    • 10-6 提問頁面的邏輯開發(二)
  • 第11章 項目實戰—問題列表、詳情、回答組件開發

    此項目實戰章節主要開發以下模塊:問題頁表的頁面佈局、問題列表頁面的數據綁定邏輯、問題詳情頁面的佈局、問題詳情頁面的數據、問題回答頁面的佈局、問題回答頁面的功能。整個首頁包含的模塊如下:提問模塊、問題列表、問題詳情、問題關注功能、問題回答模塊。...

    • 11-1 問題頁表的頁面佈局開發(一)
    • 11-2 問題頁表的頁面佈局開發(二)
    • 11-3 問題頁表的頁面佈局開發(三)
    • 11-4 問題列表頁面的數據綁定邏輯開發(一)
    • 11-5 問題列表頁面的數據綁定邏輯開發(二)
    • 11-6 問題詳情頁面的佈局開發(一)
    • 11-7 問題詳情頁面的佈局開發(二)
    • 11-8 問題詳情頁面的數據加載(一)
    • 11-9 問題詳情頁面的數據加載(二)
    • 11-10 問題詳情頁面的數據加載(三)
    • 11-11 問題回答頁面的佈局開發
    • 11-12 問題回答頁面的功能開發
  • 第12章 項目實戰—發現模塊開發

    此項目實戰章節主要開發發現模塊,主要包含功能點:List 數據加載、大模塊的重構與複用。技術點如下:Angular 模塊抽象與複用、Ionic 頁面加載優化。

    • 12-1 發現頁面的頁面佈局設計
    • 12-2 發現頁面的邏輯開發
  • 第13章 項目實戰—聊天機器人模塊開發

    此項目實戰章節主要開發以下模塊:聊天模塊的功能設計介紹、聊天模塊的頁面列表設計與開發、聊天對話頁面的頁面佈局、聊天對話頁面底部輸入框設計與開發、聊天對話頁面表情輸入模塊 、聊天頁面自動回覆邏輯。實戰過程中主要介紹了一下的技術點:Angular Service、Angular Event、Angular Pipes、Ionic RelativeTime P...

    • 13-1 聊天模塊的功能設計介紹
    • 13-2 聊天模塊的頁面列表設計與開發
    • 13-3 聊天對話頁面的頁面佈局
    • 13-4 聊天對話頁面底部輸入框設計與開發
    • 13-5 聊天對話頁面表情輸入模塊的開發(一)
    • 13-6 聊天對話頁面表情輸入模塊的開發(二)
    • 13-7 聊天對話頁面表情輸入模塊的開發(三)
    • 13-8 聊天頁面自動回覆邏輯的開發(一)
    • 13-9 聊天頁面自動回覆邏輯的開發(二)
    • 13-10 聊天頁面自動回覆邏輯的開發(三)- Events 的設計模式
    • 13-11 聊天頁面自動回覆邏輯的開發(四)- Events 的設計模式
    • 13-12 聊天頁面自動回覆邏輯的開發(五)
  • 第14章 項目實戰—通知模塊開發

    此項目實戰章節主要開發了通知模塊,快速地進行了列表的佈局與邏輯綁定的添加,加深對前面基礎但常用的數據請求與列表綁定知識進行了複習。

    • 14-1 通知模塊的頁面佈局開發
    • 14-2 通知頁面的列表數據加載
  • 第15章 項目實戰—我的慕課模塊開發

    此項目實戰章節主要開發以下模塊:我的慕課頁面佈局、我的提問模塊頁面、我的提問模塊頁面數據加載、我的關注模塊、我的回答模塊。主要講解了模塊化開發的設計原則與實戰演示,同時講解了軟件開發應該遵循的一些設計原則。...

    • 15-1 個人中心我的慕課頁面佈局開發
    • 15-2 公用模塊的設計與佈局開發
    • 15-3 公用模塊的邏輯開發
    • 15-4 快速綁定對應參數生成列表的方法
  • 第16章 項目實戰—動態樣式、夜間模式

    此章節主要介紹 Ionic 中動態樣式的加載原理,並同時開發了夜間模式的模塊。同時演示了一些樣式編寫的技巧。

    • 16-1 夜間模式的樣式定義原理及樣式定義
    • 16-2 夜間模式的佈局實現
    • 16-3 夜間模式的功能實現
  • 第17章 Ionic Native 回顧與二維碼掃描、關於模塊

    課程再次回顧了 Ionic Native 的使用,並介紹了兩個組件:QR Scanner 與 App Version。同時進行了實戰開發,並對使用組件中會遇到的一些需要特別避開的問題進行了原理性講解。

    • 17-1 二維碼掃描功能佈局開發
    • 17-2 二維碼掃描功能實現
    • 17-3 關於模塊的 App 信息讀取
  • 第18章 項目實戰—App 打包前優化方案

    課程主要講解並實際演示了 Ionic App 打包前圖標生成、Ionic App 打包前啓動圖生成、Ionic App 打包前的優化方案講解。這些是打包前需要做的工作,也會分享在開發中如何大幅度提高開發效率的方法。

    • 18-1 Ionic App 打包前圖標生成
    • 18-2 Ionic App 打包前啓動圖生成
    • 18-3 Ionic App 打包前的代碼整理
  • 第19章 項目實戰—App iOS 版本打包上架實戰

    課程再次演示了最終的項目如何編譯打包成 iOS 項目,並演示瞭如何將項目提交到 App Store 審覈。供同學們提交 iOS 應用審覈時參考。

    • 19-1 Ionic iOS App 上架操作實戰演示(一)
    • 19-2 Ionic iOS App 上架操作實戰演示(二)
  • 第20章 項目實戰—App Android 版本打包實戰

    課程再次演示瞭如何將最終的項目打包生成 Android 的 apk 安裝包,並簡單介紹了目前可以上架的 Android 市場。供同學們上架 Android 應用時參考。

    • 20-1 Ionic Android App 打包實戰操作演示
  • 第21章 項目實戰—App 網頁、微信版本打包實戰

    課程再次演示瞭如何將最終的項目打包成瀏覽器下的部署文件,並演示瞭如何將文件包部署成網站,並最終發佈到瀏覽器或者微信中去。供同學們部署成網頁應用時參考。

    • 21-1 Ionic 項目發佈到網站並在手機以及微信中的實戰演示

百度網盤下載 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章