基於Vue.js的音樂播放器（Webapp）

概述

項目是基於Vue.js，成品是一個移動端的音樂播放器，來源於imooc的實戰課程。本身動手實踐並加以修改拓展。
項目的大體流程是Vue-cli構建開發環境，分析需求，設計構思，規劃目錄結構，開始編碼。

視圖層

• 推薦頁

• 歌手頁

  • 歌手詳情

• 歌曲排行榜

  • 排行榜詳情

• 搜索頁

• 用戶中心

數據來源

全部數據都來自於QQ音樂，抓取自QQ的接口，大部分接口都是JSONP，抓取比較容易，其中一些接口限制了host，不能直接抓取，採用的方法是用axios代理，設置header，以此繞過host的限制。
PS：具體代碼請看prod.server.js文件

技術棧

• Vue

• Vuex

• Vue-Router

• Vue-cli

• Stylus

• Axios

• ESlint

• Better-scroll

src目錄結構

難點

player組件

講一講player 播放器組件，播放器組件可謂是整個項目的核心，固然數據處理和用戶體驗方面也是不簡單的（逃。
播放器是全局組件，放在App.vue下面，經過Vuex傳遞數據，觸發action提交mutation，從而使播放器開始工做。固然，其中的數據交互說複雜也不是很複雜，就是要花多點時間理解，player組件由多個基礎組件構成，具體請看項目代碼，下面上圖

爲了防止切換歌曲時點擊速度過快致使歌曲播放錯誤，使用了audio的onplayAPI，結合Vuex獲取到數據，判斷當前歌曲數據請求到才能夠切換下一首歌曲，判斷函數以下

ready() {
   this.songReady = true
 }

數據處理

經過調用QQ音樂的JSONP接口，獲取的數據並不能直接拿來用，須要作進一步的規格化，達到咱們使用的要求，因此在這方面單獨封裝了一個class來處理這方面的數據，具體請看src/common/js/song.js

在請求JSONP的時候，用到了一個JSONP庫，這個庫代碼十分簡短，只有幾十行，有興趣的同窗能夠學習下。

使用時，就是將請求的參數拼接在請求url上，而後調用這個庫的jsonp方法。因此，在此封裝了兩個函數，一個是將參數拼接在url上，另外一個是將庫裏面的jsonp方法Promise化，方便咱們使用，具體請查看src/common/js/jsonp.js。

將請求的數據格式化後再經過Vuex傳遞，組件間共享，實現歌曲的播放切換等。

交互體驗

該項目的不少地方都涉及到滾動，包括下拉滾動，下拉滾動刷新等。這裏面用到了一個庫(better-scroll)，來實現全部涉及到的滾動，建議學習下它的API。

其餘動畫包括了Vue的transition動畫，路由之間切換時的簡單動畫，播放器打開時的動畫，這個地方比較難，也比較好玩。

打開頁面時的加載Loading效果，其實就是一個Loading組件，也比較簡單。

爲了減小流量，圖片加載使用了懶加載的方式，滾動時再加載真實的圖片。
具體效果請自身體驗：）

效果

構建

開發環境

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run e2e tests
npm run e2e

# run all tests
npm test

生產環境

# build for production with minification
npm run build
# run
node prod.server.js

總結

經過學習該項目，本身收穫了許多，實踐中也遇到了大大小小許多問題，經過斷點調試等最終解決了，對我來講無疑是最大的鼓勵，也但願能與你們一塊兒學習。
項目地址：https://github.com/k-water/vue-music喜歡的點個贊完 ：）