基於 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI 界面參考了安卓版的網易雲音樂、flex 佈局適配常見移動端。css
由於服務器的緣由，因此可能多人訪問的時候有些東西會加載不出來，若是能夠的話一會再訪問應該就沒什麼問題了，出現這樣的問題，實在抱歉。html
項目演示地址：移動端音樂 WebApp，或者能夠掃描二維碼訪問：前端
- 推薦使用手機訪問，電腦在 Chrome 調試模式下食用效果更佳，開啓調試模式的手機模式後，若是不能滾動，刷新一下頁面便可
源碼地址：vue-music-webapp，歡迎 star 和 fork 哦~vue
若是你以爲我作的不錯的話，我就厚着臉皮求個 star ⭐️ 哈， star 是對我最大的鼓勵（老臉一紅）
預覽
圖片雖然壓縮過了，可是幾張加載一塊兒仍是有 3MB 左右，因此請耐心等待一下啦。感受不錯的能夠去上面 的地址體驗一下呦~ios
推薦、排行榜、歌手
歌單詳情、我的中心
播放器、播放列表
搜索頁面
開發目的
經過學習開發一個 Vue 全家桶項目，讓本身更熟練的使用 Vue 全家桶、模塊化開發、ES6 等等知識，提升本身的技術能力。git
技術棧
前端github
-
Vue：用於構建用戶界面的 MVVM 框架 -
vue-router：爲單頁面應用提供的路由系統，使用了Lazy Loading Routes技術來實現異步加載優化性能 -
vuex：Vue 集中狀態管理，在多個組件共享某些狀態時很是便捷 -
vue-lazyload：實現圖片懶加載，節省用戶流量，優化頁面加載速度 -
better-scroll：解決移動端各類滾動場景需求的插件，使移動端滑動體驗更加流暢 -
SCSS：css 預編譯處理器 -
ES6：ECMAScript 新一代語法，模塊化、解構賦值、Promise、Class 等方法很是好用
後端web
-
Node.js：利用 Express 搭建的本地測試服務器 -
vue-axios：用來請求後端 API 音樂數據 -
NeteaseCloudMusicApi：網易雲音樂 NodeJS 版 API，提供音樂數據
其餘工具vue-router
-
vue-cli：Vue 腳手架工具，快速初始化項目代碼 -
eslint：代碼風格檢查工具，幫助咱們規範代碼書寫（必定要養成良好的代碼規範） -
iconfont：阿里巴巴圖標庫，誰用誰知道 -
fastclick：消除 click 移動遊覽器 300ms 的延
實現功能
播放器內核、推薦頁面、熱榜頁面、歌手頁面、歌單詳情、歌手詳情、排行榜詳情、搜索頁面、播放列表、用戶中心等等功能。vuex
推薦頁面
推薦頁分紅三個部分，分別是 banner 輪播圖、推薦歌單、推薦歌曲，數據都是使用 axios 請求 API 獲取獲得的，圖片都使用 vue-lazyload 實現懶加載。
輪播圖：使用 better-scroll 實現，具體能夠看這裏 Slide 。點擊跳轉方面只實現歌曲和歌單的跳轉，由於暫時只實現了這兩個功能。
推薦歌單，推薦歌曲：使用 vuex 管理數據，方便組件之間的數據交互（播放器播放歌曲）。由於數據上還有播放數量，因此就順便也加上去了。
排行榜頁面
一樣是經過 API 獲取到排行榜的數據，可是由於 API 獲取到的是排行榜中全部歌曲的數據，因此不免在加載速度上有點慢，後期再看能不能優化一下，加載的慢畢竟太影響用戶體驗了，別的就沒什麼了。
歌手頁面
實現歌手列表的左右聯動（這個須要理解理解），由於以前已經寫過和這個有關的博客，因此就很少寫了，具體能夠看我以前的這個筆記 移動端字母索引導航 。
歌曲列表組件
用來顯示歌曲列表，在不少的地方都進行了複用，例如：歌單詳情頁、排行榜詳情頁、歌手詳情頁、搜索結果、用戶中心等等。
歌單詳情頁
經過歌單的 ID 來獲取歌單中的歌曲數據，而後還作了一些體驗上面的交互，好比上滑顯示狀態欄而後將狀態欄標題變爲歌單名，具體能夠嘗試一下就知道了。
而後就是複用 歌曲列表組建 來顯示歌曲。
排行榜詳情、歌手詳情
和歌單詳情基本上沒有什麼區別，除了 UI 界面方面有細微的改動（根據不一樣的內容做出不一樣的優化）。
播放器
最最最重要的組件，畢竟是個音樂播放器，不能放歌那啥都是扯淡了。
實現功能：順序播放、單曲循環、隨機播放、收藏等。
播放、暫停使用 HTML5 的 audio 實現。
數據、播放狀態、播放歷史、習慣歌曲等方面使用了 vuex 來進行管理，由於數據太多，組件直接傳遞的話是會死人的，因此仍是老老實實的用 vuex 吧，數據以前的傳遞真的很方便。
圖標使用 iconfont 阿里巴巴圖標庫，中間的唱片旋轉動畫使用了 animation 實現。
歌詞部分獲取到網易的歌詞數據，而後使用 第三方庫 lyric-parser 進行處理。實現顯示歌詞、拖動進度條歌詞同步滾動、歌詞跟隨歌曲進度高亮。
經過 localstorage 存儲喜歡歌曲、播放歷史數據。
audio 標籤在移動端不可以自動播放的問題
電腦端是沒有這個問題的，這個問題真的是讓我很頭大，最後是用了很鬼畜的方法解決了（使用 addEventListener 監聽 touchend 事件，而後在回調函數中讓 audio 播放一次，具體看 App.vue 文件，註釋有寫）。
播放列表
顯示和管理當前播放歌曲，能夠用來刪除列表中的歌曲、以及選擇播放歌曲。
搜索功能
實現功能：搜索歌手、歌單、歌曲、熱門搜索、數據節流、上拉刷新、保存搜索記錄。
經過關鍵字請求 API 獲取搜索數據，顯示歌手、歌單、歌曲。
實現了上刷新，由於搜索能夠設置請求數據的條數，因此能夠用來實現上刷新的功能。
經過節流函數實現數據節流，經過 localstorage 存儲搜索數據。
用戶中心
將在本地存儲的數據顯示出來，方便用戶使用，後期準備添加更多功能。
TODO
- 優化排行榜加載速度
- 優化重複代碼
- 增長歌曲評論
- 增長 MV、電臺 功能
- emm，更多功能容我再想一想哈
感謝
- 感謝 Binaryify 對接口文檔 NeteaseCloudMusicApi 的不斷維護與更新。
- 感謝 ustbhuangyi 老師的 Vue 實戰教程 ，讓我學習到不少 vue 的知識。
最後
最後的最後固然是厚着臉皮的再求個 star 啦，若是以爲個人項目還不錯的話 ，就給個 star 鼓勵一下吧~