基於 Vue 全家桶製作的移動端音樂 WebApp
專案演示地址: https://bxm0927.github.io/vue-music-webapp/dist/ (在 GitHub Pages 中,通過 jsonp 請求的資料會被正常渲染,而由於無 node 服務,通過 axios 請求的資料不會被正常渲染)
基於 Vue 全家桶 (2.x) 製作的移動端音樂 WebApp ,一個媲美原生的移動端音樂 App,專案完整、功能完備、UI美觀、互動一流。
技術棧
【前端】
Vue
:用於構建使用者介面的 MVVM 框架。它的核心是響應的資料繫結和組系統件vue-router
:為單頁面應用提供的路由系統,專案上線前使用了Lazy Loading Routes
vuex
:Vue 集中狀態管理,在多個元件共享某些狀態時非常便捷vue-lazyload
:第三方圖片懶載入庫,優化頁面載入速度better-scroll
:iscroll 的優化版,使移動端滑動體驗更加流暢Sass(Scss)
:css 預編譯處理器ES6
:ECMAScript 新一代語法,模組化、解構賦值、Promise、Class 等方法非常好用
【後端】
Node.js
:利用 Express 起一個本地測試伺服器jsonp
:服務端通訊。抓取 QQ音樂(移動端)資料axios
:服務端通訊。結合 Node.js 代理後端請求,抓取 QQ音樂(PC端)資料
【自動化構建及其他工具】
vue-cli
:Vue 腳手架工具,快速初始化專案程式碼eslint
:程式碼風格檢查工具,規範程式碼書寫vConsole
:移動端除錯工具,在移動端輸出日誌
收穫
- 總結了一套 Vue 通用元件,可以在其它專案中複用的 10+ 個基礎元件、15+ 個業務元件
- 總結了一套常用的 SCSS mixin 庫
- 總結了一套常用的 JS 工具函式庫
- 體會到元件化、模組化開發帶來的便捷
- 體會到將物件封裝成類(ES6 class) 的便捷性,以及利用工廠方式初始化類例項
- 學會利用
js
編寫過渡效果及動畫效果製作良好的使用者互動體驗
TODO
- 歌曲資料全部來自 QQ 音樂,介面改變了可能就要修改
jsonp
和axios
程式碼 - 由於專案的應用級狀態不多(10個左右),所以就沒有將
action
、mutation
、和getters
分割到單獨的檔案。但這樣架構並不便於維護
實現細節
主要頁面:播放器核心頁、推薦頁、歌單詳情頁、歌手頁、歌手詳情頁、排行頁、搜尋頁、新增歌曲頁、個人中心頁等。
核心頁面:播放器核心頁
元件樹
<app> ................... 根元件
<my-player> ........... 全域性的播放器核心元件
<my-header> ........... 頭部元件
<my-tab> .............. 導航欄元件
<router-view> ......... 路由
<recommend> ......... 推薦頁
<singer> ............ 歌手頁
<rank> .............. 排行頁
<search> ............ 搜尋頁
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
推薦頁
上部分是一個輪播圖元件,使用第三方庫 better-scroll
輔助實現,使用 jsonp
抓取 QQ音樂(移動端)資料
下部分是一個歌單推薦列表,使用 axios + Node.js
代理後端請求,繞過主機限制 (偽造 headers),抓取 QQ音樂(PC端)資料
歌單推薦列表圖片,使用圖片懶載入技術 vue-lazyload
,優化頁面載入速度
為了更好的使用者體驗,當資料未請求到時,顯示 loading
元件
推薦頁 -> 歌單詳情頁
由於歌手的狀態多且雜,這裡使用 vuex
集中管理歌手狀態
這個元件更加註重 UX,做了很多類原生 APP 動畫,如下拉圖片放大、跟隨推動、ios 漸進增強的高斯模糊效果 backdrop-filter
等
歌手頁
左右聯動是這個元件的難點
左側是一個歌手列表,使用 jsonp
抓取 QQ音樂(PC端)歌手資料並重組 JSON 資料結構
列表圖片使用懶載入技術 vue-lazyload
,優化頁面載入速度
右側是一個字母列表,與左側歌手列表聯動,滾動固定標題實現
歌手頁 -> 歌手詳情頁
複用歌單詳情頁,只改變傳入的引數,資料同樣爬取自 QQ音樂
播放器核心頁
核心元件。用 vuex
管理各種播放時狀態,播放、暫停等功能呼叫 audio API
播放器可以最大化和最小化
中部唱片動畫使用第三方 JS 動畫庫 create-keyframe-animation
實現
底部操作區圖示使用 iconfonts
。
抽象了一個橫向進度條元件和一個圓形進度條元件,橫向進度條可以拖動小球和點選進度條來改變播放進度,圓形進度條元件使用 SVG <circle>
元素
播放模式有:順序播放、單曲迴圈、隨機播放,原理是調整歌單列表陣列
歌詞的爬取利用 axios
代理後端請求,偽造 headers
來實現,先將歌詞 jsonp 格式轉換為 json 格式,再使用第三方庫 js-base64
進行 Base64 解碼操作,最後再使用第三方庫 lyric-parser
對歌詞進行格式化
實現了側滑顯示歌詞、歌詞跟隨進度條高亮等互動效果
增加了當前播放列表元件,可在其中加入/刪除歌曲
排行頁
普通元件,沒什麼好說的
排行頁 -> 歌單詳情頁
複用歌單詳情頁,沒什麼好說的
搜尋頁
抓資料,寫元件,另外,根據抓取的資料特徵,做了上拉重新整理的功能
考慮到資料量大且頻繁的問題,對請求做了節流處理
考慮到移動端鍵盤佔屏的問題,對滾動前的 input
做了 blur()
操作
對搜尋歷史進行了 localstorage
快取,清空搜尋歷史時使用了改裝過的 confirm
元件
支援將搜尋的歌曲新增到播放列表
個人中心
將 localstorage
中 “我的收藏” 和 “最近播放” 反映到介面上
其他
此應用的全部資料來自 QQ音樂,推薦頁的歌單列表及歌詞是利用 axios
結合 node.js
代理後端請求抓取的。
全域性通用的應用級狀態使用 vuex
集中管理
全域性引入 fastclick
庫,消除 click 移動瀏覽器300ms延遲
頁面是響應式的,適配常見的移動端螢幕,採用 flex
佈局
Build Setup
# clone the repo into your disk.
$ git clone https://github.com/bxm0927/music-app.git
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
License
The code is available under the MIT license.