概述
項(xiàng)目是基于Vue.js，成品是一個(gè)移動(dòng)端的音樂播放器，來(lái)源于imooc的實(shí)戰(zhàn)課程。自己動(dòng)手實(shí)踐并加以修改拓展。
項(xiàng)目的大致流程是Vue-cli構(gòu)建開發(fā)環(huán)境，分析需求，設(shè)計(jì)構(gòu)思，規(guī)劃目錄結(jié)構(gòu)，開始編碼。
視圖層
- 推薦頁(yè)
- 歌手頁(yè)
- 歌手詳情
- 歌曲排行榜
- 排行榜詳情
- 搜索頁(yè)
- 用戶中心
數(shù)據(jù)來(lái)源
所有數(shù)據(jù)都來(lái)自于QQ音樂，抓取自QQ的接口，大部分接口都是JSONP，抓取比較容易，其中一些接口限制了host，不能直接抓取，采用的方法是用axios代理，設(shè)置header，以此繞過(guò)host的限制。
PS：具體代碼請(qǐng)看prod.server.js文件
技術(shù)棧
Vue
Vuex
Vue-Router
Vue-cli
Stylus
Axios
ESlint
Better-scroll
src目錄結(jié)構(gòu)
難點(diǎn)
player組件
講一講player 播放器組件，播放器組件可謂是整個(gè)項(xiàng)目的核心，當(dāng)然數(shù)據(jù)處理和用戶體驗(yàn)方面也是不簡(jiǎn)單的（逃。
播放器是全局組件，放在App.vue下面，通過(guò)Vuex傳遞數(shù)據(jù)，觸發(fā)action提交mutation，從而使播放器開始工作。當(dāng)然，其中的數(shù)據(jù)交互說(shuō)復(fù)雜也不是很復(fù)雜，就是要花多點(diǎn)時(shí)間理解，player組件由多個(gè)基礎(chǔ)組件構(gòu)成，具體請(qǐng)看項(xiàng)目代碼，下面上圖
為了防止切換歌曲時(shí)點(diǎn)擊速度過(guò)快導(dǎo)致歌曲播放錯(cuò)誤，使用了
audio的onplayAPI，結(jié)合Vuex獲取到數(shù)據(jù)，判斷當(dāng)前歌曲數(shù)據(jù)請(qǐng)求到才可以切換下一首歌曲，判斷函數(shù)如下
ready() {
this.songReady = true
}
數(shù)據(jù)處理
通過(guò)調(diào)用QQ音樂的JSONP接口，獲取的數(shù)據(jù)并不能直接拿來(lái)用，需要做進(jìn)一步的規(guī)格化，達(dá)到我們使用的要求，所以在這方面單獨(dú)封裝了一個(gè)class來(lái)處理這方面的數(shù)據(jù)，具體請(qǐng)看src/common/js/song.js
在請(qǐng)求JSONP的時(shí)候，用到了一個(gè)JSONP庫(kù)，這個(gè)庫(kù)代碼十分簡(jiǎn)短，只有幾十行，有興趣的同學(xué)可以學(xué)習(xí)下。
使用時(shí)，就是將請(qǐng)求的參數(shù)拼接在請(qǐng)求url上，然后調(diào)用這個(gè)庫(kù)的jsonp方法。所以，在此封裝了兩個(gè)函數(shù)，一個(gè)是將參數(shù)拼接在url上，另一個(gè)是將庫(kù)里面的jsonp方法Promise化，方便我們使用，具體請(qǐng)查看src/common/js/jsonp.js。
將請(qǐng)求的數(shù)據(jù)格式化后再通過(guò)Vuex傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。
交互體驗(yàn)
該項(xiàng)目的很多地方都涉及到滾動(dòng)，包括下拉滾動(dòng)，下拉滾動(dòng)刷新等。這里面用到了一個(gè)庫(kù)(better-scroll)，來(lái)實(shí)現(xiàn)所有涉及到的滾動(dòng)，建議學(xué)習(xí)下它的API。
其他動(dòng)畫包括了Vue的transition動(dòng)畫，路由之間切換時(shí)的簡(jiǎn)單動(dòng)畫，播放器打開時(shí)的動(dòng)畫，這個(gè)地方比較難，也比較好玩。
打開頁(yè)面時(shí)的加載Loading效果，其實(shí)就是一個(gè)Loading組件，也比較簡(jiǎn)單。
為了減少流量，圖片加載使用了懶加載的方式，滾動(dòng)時(shí)再加載真實(shí)的圖片。
具體效果請(qǐng)自身體驗(yàn)：）
效果
構(gòu)建
開發(fā)環(huá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
生產(chǎn)環(huán)境
# build for production with minification
npm run build
# run
node prod.server.js
總結(jié)
通過(guò)學(xué)習(xí)該項(xiàng)目，自己收獲了許多，實(shí)踐中也遇到了大大小小許多問題，通過(guò)斷點(diǎn)調(diào)試等最終解決了，對(duì)我來(lái)說(shuō)無(wú)疑是最大的鼓勵(lì)，也希望能與大家一起學(xué)習(xí)。
項(xiàng)目地址：https://github.com/k-water/vue-music
喜歡的求個(gè)star(_)ノ
完 ：）
