最新Vue2.5 實戰微信讀書 媲美原生App的企業級web書城
第1章 課程介紹
介紹閱讀器專案背景、功能結構、技術棧和功能演示,快速瞭解整個課程安排和內容。
1-1 導學
1-2 課程學習指南
第2章 專案需求及閱讀器引擎介紹
介紹專案需求和閱讀器的開發原理,並搭建Node.js和vue-cli 3.0開發環境。
2-1 專案需求分析
2-2 閱讀器原理介紹
2-3 ePub標準介紹
2-4 epubjs閱讀器引擎介紹
2-5 安裝Node.js環境
2-6 vue-cli 3.0搭建方法(原型開發)
2-7 vue-cli 3.0搭建方法(腳手架建立專案)
2-8 專案技術難點分析
第3章 專案準備
完成專案開發前的準備工作,講解如何引入字型圖示、Web字型、rem、樣式重置表,詳細介紹vuex的基本原理及mapGetters的實現原理,搭建基於Nginx的靜態資源伺服器。
3-1 準備工作說明
3-2 字型圖標準備
3-3 專案依賴包下載
3-4 準備Web字型
3-5 viewport配置和rem設定
3-6 global.scss和reset.scss設定
3-7 引入vuex+vue-devtools
3-8 搭建靜態資源伺服器
第4章 閱讀器--標題選單、字號字型及主題設定功能開發
講解如何實現閱讀器的解析和渲染、手勢翻頁操作、標題欄和選單欄元件的解耦,並實現字號字型設定和閱讀器全域性主題設定功能。
4-1 閱讀器需求分析
4-2 閱讀器解析和渲染
4-3 閱讀器翻頁功能實現
4-4 標題欄和選單欄實現
4-5 字號設定 UI 實現
4-6 字號設定功能實現
4-7 字型設定功能實現
4-8 字型設定彈窗UI實現
4-9 字型設定彈窗功能實現
4-10 字號和字型設定離線儲存
4-11 字型設定標題國際化
4-12 閱讀器主題設定功能實現
4-13 全域性主題設定功能實現
第5章 閱讀器--閱讀進度、目錄、全文搜尋功能開發
講解如何實現閱讀器的閱讀進度、閱讀時間統計、章節切換、多級目錄展示、全文搜尋和目錄載入動畫。
5-1 閱讀進度功能實現(進度面板+分頁邏輯)
5-2 閱讀進度功能實現(進度拖動功能)
5-3 閱讀進度功能實現(上下章節切換功能)
5-4 閱讀進度功能實現(章節切換和進度同步)
5-5 閱讀進度功能實現(儲存閱讀進度功能)
5-6 目錄功能實現(目錄浮出效果)
5-7 目錄功能實現(Tab選項切換和搜尋效果)
5-8 目錄功能實現(圖書內容佈局)
5-9 目錄功能實現(圖書內容樣式)
5-10 目錄功能實現(目錄資料結構開發)
5-11 目錄功能實現(多級目錄功能)
5-12 全文搜尋功能實現(搜尋演算法+陣列降維)
5-13 全文搜尋功能實現 (搜尋關鍵字高亮+搜尋結果高亮顯示)
5-14 目錄載入動畫實現(原理分析+佈局實現)
5-15 目錄載入動畫實現(動畫效果實現)
第6章 閱讀器--書籤功能、頁首頁尾及相容性優化
講解如何實現閱讀器的手勢操作,詳細介紹了複雜手勢互動的實現思路及原理,為閱讀器加入頁首和頁尾,並優化了移動端和PC端相容性問題,使閱讀器可以更好的支援PC端和移動端使用。
6-1 書籤手勢實現(頁面下拉)
6-2 書籤手勢實現(書籤元件)
6-3 書籤手勢實現(下拉狀態管理)
6-4 書籤手勢實現(書籤新增刪除互動)
6-5 EpubCFI原理介紹
6-6 書籤功能實現
6-7 頁首和頁尾功能實現
6-8 閱讀模式介紹
6-9 微信相容性調整
6-10 自適應佈局優化(PC端佈局優化)
6-11 自適應佈局優化(書籤支援滑鼠事件)
6-12 閱讀器分頁演算法實現
6-13 閱讀器相關知識點總結
第7章 書城首頁、搜尋頁、列表頁和詳情頁開發
講解書城首頁、搜尋頁、列表頁和詳情頁的開發過程,詳細介紹首頁的推薦動畫、標題欄和搜尋框的互動動畫實現原理,並引入Mock.js實現API資料模擬。
第8章 書架頁面開發
講解書架頁面的開發過程,包括:書架資料結構設計、九宮格佈局的實現、私密閱讀功能實現、離線儲存功能實現、分組功能實現、移出書架功能和動畫實現。
第9章 聽書頁面開發
講解聽書頁面的開發過程,詳細講解科大訊飛線上語音合成API的對接方法、播放器面板的佈局實現、播放器的實現原理和方法。
第10章 專案釋出
利用Node.js開發簡單的api,並通過阿里雲的ESC進行專案釋出,在CentOS作業系統上搭建Nginx服務,將程式碼上傳至Git,通過編寫自動化更新指令碼實現程式碼的自動更新與釋出。
第11章 效能優化
釋出後解決訪問效能問題,主要採用圖片壓縮、CDN加速、路由和圖片懶載入、電子書解析加速、介面資料快取。
第12章 課程總結
整理回顧與總結課程中的知識點。
下載地址:百度網盤