摘要：概述項(xiàng)目是基于，成品是一個(gè)移動(dòng)端的音樂播放器，來源于的實(shí)戰(zhàn)課程。播放器是全局組件，放在下面，通過傳遞數(shù)據(jù)，觸發(fā)提交，從而使播放器開始工作。將請(qǐng)求的數(shù)據(jù)格式化后再通過傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。

項(xiàng)目是基于Vue.js，成品是一個(gè)移動(dòng)端的音樂播放器，來源于imooc的實(shí)戰(zhàn)課程。自己動(dòng)手實(shí)踐并加以修改拓展。
項(xiàng)目的大致流程是Vue-cli構(gòu)建開發(fā)環(huán)境，分析需求，設(shè)計(jì)構(gòu)思，規(guī)劃目錄結(jié)構(gòu)，開始編碼。

推薦頁


歌手頁
歌手詳情



歌曲排行榜
排行榜詳情


搜索頁

用戶中心

所有數(shù)據(jù)都來自于QQ音樂，抓取自QQ的接口，大部分接口都是JSONP，抓取比較容易，其中一些接口限制了host，不能直接抓取，采用的方法是用axios代理，設(shè)置header，以此繞過host的限制。
PS：具體代碼請(qǐng)看prod.server.js文件

Vue

Vuex

Vue-Router

Vue-cli

Stylus

Axios

ESlint

Better-scroll

講一講player 播放器組件，播放器組件可謂是整個(gè)項(xiàng)目的核心，當(dāng)然數(shù)據(jù)處理和用戶體驗(yàn)方面也是不簡(jiǎn)單的（逃。
播放器是全局組件，放在App.vue下面，通過Vuex傳遞數(shù)據(jù)，觸發(fā)action提交mutation，從而使播放器開始工作。當(dāng)然，其中的數(shù)據(jù)交互說復(fù)雜也不是很復(fù)雜，就是要花多點(diǎn)時(shí)間理解，player組件由多個(gè)基礎(chǔ)組件構(gòu)成，具體請(qǐng)看項(xiàng)目代碼，下面上圖

為了防止切換歌曲時(shí)點(diǎn)擊速度過快導(dǎo)致歌曲播放錯(cuò)誤，使用了audio的onplayAPI，結(jié)合Vuex獲取到數(shù)據(jù)，判斷當(dāng)前歌曲數(shù)據(jù)請(qǐng)求到才可以切換下一首歌曲，判斷函數(shù)如下

 ready() {
   this.songReady = true
 }

通過調(diào)用QQ音樂的JSONP接口，獲取的數(shù)據(jù)并不能直接拿來用，需要做進(jìn)一步的規(guī)格化，達(dá)到我們使用的要求，所以在這方面多帶帶封裝了一個(gè)class來處理這方面的數(shù)據(jù)，具體請(qǐng)看src/common/js/song.js

在請(qǐng)求JSONP的時(shí)候，用到了一個(gè)JSONP庫，這個(gè)庫代碼十分簡(jiǎn)短，只有幾十行，有興趣的同學(xué)可以學(xué)習(xí)下。

使用時(shí)，就是將請(qǐng)求的參數(shù)拼接在請(qǐng)求url上，然后調(diào)用這個(gè)庫的jsonp方法。所以，在此封裝了兩個(gè)函數(shù)，一個(gè)是將參數(shù)拼接在url上，另一個(gè)是將庫里面的jsonp方法Promise化，方便我們使用，具體請(qǐng)查看src/common/js/jsonp.js。

將請(qǐng)求的數(shù)據(jù)格式化后再通過Vuex傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。

該項(xiàng)目的很多地方都涉及到滾動(dòng)，包括下拉滾動(dòng)，下拉滾動(dòng)刷新等。這里面用到了一個(gè)庫(better-scroll)，來實(shí)現(xiàn)所有涉及到的滾動(dòng)，建議學(xué)習(xí)下它的API。

其他動(dòng)畫包括了Vue的transition動(dòng)畫，路由之間切換時(shí)的簡(jiǎn)單動(dòng)畫，播放器打開時(shí)的動(dòng)畫，這個(gè)地方比較難，也比較好玩。

打開頁面時(shí)的加載Loading效果，其實(shí)就是一個(gè)Loading組件，也比較簡(jiǎn)單。

為了減少流量，圖片加載使用了懶加載的方式，滾動(dòng)時(shí)再加載真實(shí)的圖片。
具體效果請(qǐng)自身體驗(yàn)：）

# 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

通過學(xué)習(xí)該項(xiàng)目，自己收獲了許多，實(shí)踐中也遇到了大大小小許多問題，通過斷點(diǎn)調(diào)試等最終解決了，對(duì)我來說無疑是最大的鼓勵(lì)，也希望能與大家一起學(xué)習(xí)。
項(xiàng)目地址：https://github.com/k-water/vue-music
喜歡的點(diǎn)個(gè)贊
完 ：）