如何用vue打造一個移動端音樂播放器

寫在前面

• 沒錯，這就是慕課網上的那個vue音樂播放器，後臺是某音樂播放器的線上接口扒取，雖然這類項目寫的人不少，但不得不說這仍是個少有的適合vue提高的好項目，作這個項目除了想寫一個比較大而且功能複雜的項目，主要緣由是要拿它來應對面試，也確實對我vue的業務能力有很全面的提高，也使我找工做更加駕輕就熟
• 代碼內容有區別於做者源碼，由於做者編碼習慣跟我有很大差異，或者說比我更高級，生搬硬套並無太大的意義，若是有時間最好從頭至尾都本身寫，包括全部的樣式，代碼量比較大，我在業餘時間去寫大概一個月完成了這個項目，這還只是我跟隨做者的架構去編碼的狀況下
• 項目基本完成，但由於我已入職，最近也沒有時間去完善它，如下是項目的簡介，更詳細的介紹在github裏歡迎訪問

源碼地址

[github.com/wwenj/web-m…
但願你能在這有所收穫，歡迎star

項目簡介

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

技術棧

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

• 數據：qq音樂接口扒取

功能模塊：

頁面

1. 推薦頁： 輪播，推薦歌單，點擊跳轉詳情組件 下3同
2. 歌手頁： 按姓氏首字母排列，點擊側面字母欄跳轉到對應歌手區域
3. 排行頁： 幾種榜單，詳情頁顯示排行數字
4. 搜索頁： 搜索框監聽內容變化顯示搜索結果，搜索結果上拉加載，點擊搜索結果添加到當前播放列表並播放該歌曲，搜索爲歌手跳轉歌手詳情頁；保存搜索歷史，顯示熱門搜索標籤
5. 我的頁： 選項卡顯示最近播放歷史，與個人收藏列表
6. 播放頁： 旋轉大頭像，播放時間，進度條，上一曲下一曲，收藏，播放模式（單曲-順序-隨機），歌詞頁，播放按鈕，迷你底部播放欄（播放頁收起時顯示）

功能

1. 播放列表： 顯示當前播放列表，查看播放模式，清空列表，點擊收藏，點擊刪除，點擊添加歌曲到當前播放列表
2. 添加歌曲到播放列表： 搜索歌曲添加，播放歷史添加，搜索歷史添加
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日