摘要：寫在前面沒錯(cuò)，這就是慕課網(wǎng)上的那個(gè)音樂播放器，后臺(tái)是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個(gè)少有的適合提升的好項(xiàng)目，做這個(gè)項(xiàng)目除了想寫一個(gè)比較大并且功能復(fù)雜的項(xiàng)目，主要原因是要拿它來應(yīng)對(duì)面試，也確實(shí)對(duì)我的業(yè)務(wù)能

沒錯(cuò)，這就是慕課網(wǎng)上的那個(gè)vue音樂播放器，后臺(tái)是某音樂播放器的線上接口扒取，雖然這類項(xiàng)目寫的人很多，但不得不說這還是個(gè)少有的適合vue提升的好項(xiàng)目，做這個(gè)項(xiàng)目除了想寫一個(gè)比較大并且功能復(fù)雜的項(xiàng)目，主要原因是要拿它來應(yīng)對(duì)面試，也確實(shí)對(duì)我vue的業(yè)務(wù)能力有很全面的提升，也使我找工作更加得心應(yīng)手

代碼內(nèi)容有區(qū)別于作者源碼，因?yàn)樽髡呔幋a習(xí)慣跟我有很大差別，或者說比我更高級(jí)，生搬硬套并沒有太大的意義，如果有時(shí)間最好從頭到尾都自己寫，包括所有的樣式，代碼量比較大，我在業(yè)余時(shí)間去寫大概一個(gè)月完成了這個(gè)項(xiàng)目，這還只是我跟隨作者的架構(gòu)去編碼的情況下

項(xiàng)目基本完成，但因?yàn)槲乙讶肼?，最近也沒有時(shí)間去完善它，以下是項(xiàng)目的簡(jiǎn)介，更詳細(xì)的介紹在github里歡迎訪問

[https://github.com/wwenj/web-music-player]
希望你能在這有所收獲，歡迎star

基于vue全家桶開發(fā)的一款移動(dòng)端音樂播放器webapp，數(shù)據(jù)由qq音樂后臺(tái)通過jsonp跨域和代理獲取

前端：vue全家桶，es6，sass，axios，jsonp，better-scroll

數(shù)據(jù)：qq音樂接口扒取

推薦頁： 輪播，推薦歌單，點(diǎn)擊跳轉(zhuǎn)詳情組件 下3同

歌手頁： 按姓氏首字母排列，點(diǎn)擊側(cè)面字母欄跳轉(zhuǎn)到對(duì)應(yīng)歌手區(qū)域

排行頁： 幾種榜單，詳情頁顯示排行數(shù)字

搜索頁： 搜索框監(jiān)聽內(nèi)容變化顯示搜索結(jié)果，搜索結(jié)果上拉加載，點(diǎn)擊搜索結(jié)果添加到當(dāng)前播放列表并播放該歌曲，搜索為歌手跳轉(zhuǎn)歌手詳情頁；保存搜索歷史，顯示熱門搜索標(biāo)簽

個(gè)人頁： 選項(xiàng)卡顯示最近播放歷史，與我的收藏列表

播放頁： 旋轉(zhuǎn)大頭像，播放時(shí)間，進(jìn)度條，上一曲下一曲，收藏，播放模式（單曲-順序-隨機(jī)），歌詞頁，播放按鈕，迷你底部播放欄（播放頁收起時(shí)顯示）

播放列表： 顯示當(dāng)前播放列表，查看播放模式，清空列表，點(diǎn)擊收藏，點(diǎn)擊刪除，點(diǎn)擊添加歌曲到當(dāng)前播放列表

添加歌曲到播放列表： 搜索歌曲添加，播放歷史添加，搜索歷史添加

播放組件： 拖動(dòng)進(jìn)度條跳轉(zhuǎn)播放進(jìn)度，歌詞跟隨進(jìn)度聯(lián)動(dòng)

15個(gè)業(yè)務(wù)組件，9個(gè)基礎(chǔ)組件

詳情組件，歌曲列表組件，搜索框組件，scroll組件，loading組件等組件多復(fù)用

vuex集中狀態(tài)管理 ：

搜索歷史，收藏列表，播放歷史

播放狀態(tài)，播放模式，收起播放頁，當(dāng)前播放索引

排行榜數(shù)據(jù)，推薦歌單數(shù)據(jù)，歌手?jǐn)?shù)據(jù)（進(jìn)入詳情頁使用）

模塊化：js模塊寫在assets內(nèi)，數(shù)據(jù)請(qǐng)求模塊寫在api內(nèi)，vuex寫在mutation.js，state.js，getters.js，action.js中

移動(dòng)端適配：淘寶適配方案amfe-flexible，用sass函數(shù)統(tǒng)一rem為正常px邏輯單位

幾種歷史記錄收藏列表存儲(chǔ)在localStorage

歌曲未加載成功連續(xù)點(diǎn)擊下一曲：設(shè)標(biāo)志值，事件開始前做判斷，當(dāng)歌曲加載成功才能繼續(xù)執(zhí)行

選擇播放歌曲當(dāng)前正在播放：watch監(jiān)聽歌曲時(shí)，新舊值一致則不進(jìn)行任何變化

順序播放時(shí)播放列表中只有一首歌：判斷只有一首歌時(shí)循環(huán)播放

刪除播放列表歌曲的最后一首：關(guān)閉播放列表和播放頁

未找到（搜索，收藏，歷史等）任何數(shù)據(jù)：顯示提示空信息組件

出現(xiàn)底部迷你播放頁時(shí)，重新計(jì)算dom，顯示正確scroll滾動(dòng)位置

兼容：uc音樂播放器不能播放歌曲

滾動(dòng)搜索結(jié)果出現(xiàn)小鍵盤：觸摸搜索結(jié)果列表使input搜索框失焦

播放頁收回動(dòng)畫卡慢：修改收回動(dòng)畫為改變透明度

jsonp與代理，獲取QQ音樂真實(shí)后臺(tái)數(shù)據(jù)，獲取數(shù)據(jù)的二次封裝使用

better-scroll 移動(dòng)端插件（每次dom渲染要重新計(jì)算scroll寬度），封裝成組件。

vuex狀態(tài)管理的項(xiàng)目結(jié)構(gòu)設(shè)計(jì)

業(yè)務(wù)： 清晰項(xiàng)目架構(gòu)，學(xué)習(xí)良好的編程風(fēng)格，Es6模塊化寫法，Eslint代碼規(guī)范，vuex狀態(tài)管理，常用組件的封裝復(fù)用，

技術(shù)： jsonp跨域請(qǐng)求，vue更深入理解掌握更熟練

推薦頁，排行頁，歌手頁

搜索頁，我的本地（收藏，播放歷史）

詳情頁，播放列表，添加歌曲到播放列表

播放頁，歌詞頁

作者?[王文健]

2018 年 8月 10日