專案演示地址: 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：移動端除錯工具，在移動端輸出日誌

收穫

1. 總結了一套 Vue 通用元件，可以在其它專案中複用的 10+ 個基礎元件、15+ 個業務元件
2. 總結了一套常用的 SCSS mixin 庫
3. 總結了一套常用的 JS 工具函式庫
4. 體會到元件化、模組化開發帶來的便捷
5. 體會到將物件封裝成類(ES6 class) 的便捷性，以及利用工廠方式初始化類例項
6. 學會利用 js 編寫過渡效果及動畫效果製作良好的使用者互動體驗

TODO

1. 歌曲資料全部來自 QQ 音樂，介面改變了可能就要修改 jsonp 和 axios 程式碼
2. 由於專案的應用級狀態不多（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.