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

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

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

項目基本完成，但因為我已入職，最近也沒有時間去完善它，以下是項目的簡介，更詳細的介紹在github里歡迎訪問

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

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

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

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

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

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

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

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

個人頁： 選項卡顯示最近播放歷史，與我的收藏列表

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

播放列表： 顯示當前播放列表，查看播放模式，清空列表，點擊收藏，點擊刪除，點擊添加歌曲到當前播放列表

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

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

15個業(yè)務組件，9個基礎組件

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

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

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

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

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

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

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

幾種歷史記錄收藏列表存儲在localStorage

歌曲未加載成功連續(xù)點擊下一曲：設標志值，事件開始前做判斷，當歌曲加載成功才能繼續(xù)執(zhí)行

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

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

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

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

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

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

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

播放頁收回動畫卡慢：修改收回動畫為改變透明度

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

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

vuex狀態(tài)管理的項目結(jié)構(gòu)設計

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

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

推薦頁，排行頁，歌手頁

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

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

播放頁，歌詞頁

作者?[王文健]

2018 年 8月 10日