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

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

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

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

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

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

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

數據：qq音樂接口扒取

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

歌手頁： 按姓氏首字母排列，點擊側面字母欄跳轉到對應歌手區域

排行頁： 幾種榜單，詳情頁顯示排行數字

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

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

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

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

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

播放組件： 拖動進度條跳轉播放進度，歌詞跟隨進度聯動

15個業務組件，9個基礎組件

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

vuex集中狀態管理 ：

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

播放狀態，播放模式，收起播放頁，當前播放索引

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

模塊化：js模塊寫在assets內，數據請求模塊寫在api內，vuex寫在mutation.js，state.js，getters.js，action.js中

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

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

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

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

順序播放時播放列表中只有一首歌：判斷只有一首歌時循環播放

刪除播放列表歌曲的最后一首：關閉播放列表和播放頁

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

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

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

滾動搜索結果出現小鍵盤：觸摸搜索結果列表使input搜索框失焦

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

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

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

vuex狀態管理的項目結構設計

業務： 清晰項目架構，學習良好的編程風格，Es6模塊化寫法，Eslint代碼規范，vuex狀態管理，常用組件的封裝復用，

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

推薦頁，排行頁，歌手頁

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

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

播放頁，歌詞頁

作者?[王文健]

2018 年 8月 10日