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資料模擬。
7-1 書城開發需求分析
7-2 書城首頁開發(框架頁面+路由配置)
7-3 書城首頁(標題+搜尋框佈局)
7-4 書城首頁(標題+搜尋框互動設計分析)
7-5 書城首頁(標題互動動畫實現)
7-6 書城首頁(搜尋框互動動畫實現)
7-7 書城首頁(熱門搜尋佈局)
7-8 書城首頁(熱門搜尋互動)
7-9 書城首頁(推薦頁面佈局)
7-10 書城首頁(卡片翻轉動畫實現)
7-11 書城首頁(卡片翻轉動畫重置)
7-12 書城首頁(卡片登場keyframes動畫講解)
7-13 書城首頁(煙花動畫實現)
7-14 書城首頁(mockjs使用方法講解)
7-15 書城首頁(推薦圖書佈局+動畫)
7-16 書城首頁(首頁圖書佈局實現)
7-17 書城詳情頁開發
7-18 書城列表頁開發
7-19 第七章總結
第8章 書架頁面開發
講解書架頁面的開發過程,包括:書架資料結構設計、九宮格佈局的實現、私密閱讀功能實現、離線儲存功能實現、分組功能實現、移出書架功能和動畫實現。
8-1 書架標題元件佈局實現
8-2 書架標題元件互動實現
8-3 書架搜尋框佈局實現
8-4 書架搜尋框互動實現(上)
8-5 書架搜尋框互動實現(下)
8-6 書架資料結構設計+資料獲取
8-7 書架標題+搜尋框樣式優化(固定標題+滾動陰影)
8-8 書架圖書列表實現(元件設計+動態元件應用)
8-9 書架圖書列表佈局
8-10 書架圖書元件開發(單書封面+分類書籍封面實現)
8-11 書架圖書元件開發(新增+編輯實現)
8-12 書架編輯模式開發
8-13 書架彈出框元件開發
8-14 書架彈出框功能開發(1)
8-15 書架彈出框功能開發(2)
8-16 電子書離線快取功能開發(1)
8-17 電子書離線快取功能開發(2)
8-18 電子書快取刪除功能開發
8-19 書架快取+離線閱讀功能開發
8-20 書架分組功能開發
8-21 書架列表過渡動畫開發
8-22 書架分類列表開發
8-23 書架分組功能優化
8-24 書架修改分組功能開發(1)
8-25 書架修改分組功能開發(2)
第9章 聽書頁面開發
講解聽書頁面的開發過程,詳細講解科大訊飛線上語音合成API的對接方法、播放器面板的佈局實現、播放器的實現原理和方法。
9-1 聽書功能介紹
9-2 聽書元件整合
9-3 聽書元件原始碼分析
9-4 聽書播放器原始碼分析
9-5 播放器面板原始碼分析
9-6 聽書功能開發要點總結
第10章 專案釋出
利用Node.js開發簡單的api,並通過阿里雲的ESC進行專案釋出,在CentOS作業系統上搭建Nginx服務,將程式碼上傳至Git,通過編寫自動化更新指令碼實現程式碼的自動更新與釋出。
10-1 Vue專案構建
10-2 功能優化+構建問題處理
10-3 資料庫環境準備
10-4 Node.js+express編寫API
10-5 書城首頁API開發(1)
10-6 書城首頁API開發(2)
10-7 書城首頁前後端API聯調(解決CORS跨域)
10-8 電子書詳情API開發
10-9 電子書列表API開發
10-10 科大訊飛線上語音合成API對接(上)
10-11 科大訊飛線上語音合成API對接(下)
10-12 後端API原始碼上傳git演示
10-13 阿里雲ECS伺服器開通
10-14 CentOS Node.js環境搭建
10-15 CentOS Ngnix環境搭建
10-16 CentOS git部署+免密更新
10-17 CentOS 前端專案構建和釋出
10-18 CentOS MySQL環境安裝
10-19 CentOS 一鍵部署指令碼開發
10-20 阿里雲域名註冊、解析與備案流程
第11章 課程總結
整理回顧與總結課程中的知識點。
11-1 課程總結
下載地址:百度網盤下載