1. 程式人生 > >Vue2.5 實戰微信讀書 媲美原生App的企業級web書城

Vue2.5 實戰微信讀書 媲美原生App的企業級web書城

課程 map 功能 時間 原理分析 使用 devtools 操作系統 原理

第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章 課程總結

整理回顧與總結課程中的知識點。

下載地址:百度網盤

Vue2.5 實戰微信讀書 媲美原生App的企業級web書城