寫在前面
- 沒錯，這就是慕課網上的那個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日
本文轉載於:猿2048→https://www.mk2048.com/blog/blog.php?id=hba0h01ahhj