摘要：基于等開發(fā)一款移動(dòng)端音樂，界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動(dòng)端。圖標(biāo)使用阿里巴巴圖標(biāo)庫，中間的唱片旋轉(zhuǎn)動(dòng)畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。

基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動(dòng)端音樂 WebApp，UI 界面參考了安卓版的網(wǎng)易云音樂、flex 布局適配常見移動(dòng)端。

因?yàn)榉?wù)器的原因，所以可能多人訪問的時(shí)候有些東西會(huì)加載不出來，如果可以的話一會(huì)再訪問應(yīng)該就沒什么問題了，出現(xiàn)這樣的問題，實(shí)在抱歉。

項(xiàng)目演示地址：移動(dòng)端音樂 WebApp，或者可以掃描二維碼訪問：

推薦使用手機(jī)訪問，電腦在 Chrome 調(diào)試模式下食用效果更佳，開啟調(diào)試模式的手機(jī)模式后，如果不能滾動(dòng)，刷新一下頁面即可

源碼地址：vue-music-webapp，歡迎 star 和 fork 哦~

如果你覺得我做的不錯(cuò)的話，我就厚著臉皮求個(gè) star ?? 哈，star 是對(duì)我最大的鼓勵(lì)（老臉一紅）

圖片雖然壓縮過了，但是幾張加載一起還是有 3MB 左右，所以請耐心等待一下啦。感覺不錯(cuò)的可以去上面 的地址體驗(yàn)一下呦~

通過學(xué)習(xí)開發(fā)一個(gè) Vue 全家桶項(xiàng)目，讓自己更熟練的使用 Vue 全家桶、模塊化開發(fā)、ES6 等等知識(shí)，提高自己的技術(shù)能力。

前端

Vue：用于構(gòu)建用戶界面的 MVVM 框架

vue-router：為單頁面應(yīng)用提供的路由系統(tǒng)，使用了 Lazy Loading Routes 技術(shù)來實(shí)現(xiàn)異步加載優(yōu)化性能

vuex：Vue 集中狀態(tài)管理，在多個(gè)組件共享某些狀態(tài)時(shí)非常便捷

vue-lazyload：實(shí)現(xiàn)圖片懶加載，節(jié)省用戶流量，優(yōu)化頁面加載速度

better-scroll：解決移動(dòng)端各種滾動(dòng)場景需求的插件，使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢

SCSS：css 預(yù)編譯處理器

ES6：ECMAScript 新一代語法，模塊化、解構(gòu)賦值、Promise、Class 等方法非常好用

后端

Node.js：利用 Express 搭建的本地測試服務(wù)器

vue-axios：用來請求后端 API 音樂數(shù)據(jù)

NeteaseCloudMusicApi：網(wǎng)易云音樂 NodeJS 版 API，提供音樂數(shù)據(jù)

其他工具

vue-cli：Vue 腳手架工具，快速初始化項(xiàng)目代碼

eslint：代碼風(fēng)格檢查工具，幫助我們規(guī)范代碼書寫（一定要養(yǎng)成良好的代碼規(guī)范）

iconfont ：阿里巴巴圖標(biāo)庫，誰用誰知道

fastclick ：消除 click 移動(dòng)游覽器 300ms 的延

播放器內(nèi)核、推薦頁面、熱榜頁面、歌手頁面、歌單詳情、歌手詳情、排行榜詳情、搜索頁面、播放列表、用戶中心等等功能。

推薦頁分成三個(gè)部分，分別是 banner 輪播圖、推薦歌單、推薦歌曲，數(shù)據(jù)都是使用 axios 請求 API 獲取得到的，圖片都使用 vue-lazyload 實(shí)現(xiàn)懶加載。

輪播圖：使用 better-scroll 實(shí)現(xiàn)，具體可以看這里 Slide 。點(diǎn)擊跳轉(zhuǎn)方面只實(shí)現(xiàn)歌曲和歌單的跳轉(zhuǎn)，因?yàn)闀簳r(shí)只實(shí)現(xiàn)了這兩個(gè)功能。

推薦歌單，推薦歌曲：使用 vuex 管理數(shù)據(jù)，方便組件之間的數(shù)據(jù)交互（播放器播放歌曲）。因?yàn)閿?shù)據(jù)上還有播放數(shù)量，所以就順便也加上去了。

同樣是通過 API 獲取到排行榜的數(shù)據(jù)，但是因?yàn)?API 獲取到的是排行榜中所有歌曲的數(shù)據(jù)，所以難免在加載速度上有點(diǎn)慢，后期再看能不能優(yōu)化一下，加載的慢畢竟太影響用戶體驗(yàn)了，別的就沒什么了。

實(shí)現(xiàn)歌手列表的左右聯(lián)動(dòng)（這個(gè)需要理解理解），因?yàn)橹耙呀?jīng)寫過和這個(gè)有關(guān)的博客，所以就不多寫了，具體可以看我之前的這個(gè)筆記 移動(dòng)端字母索引導(dǎo)航 。

用來顯示歌曲列表，在很多的地方都進(jìn)行了復(fù)用，例如：歌單詳情頁、排行榜詳情頁、歌手詳情頁、搜索結(jié)果、用戶中心等等。

通過歌單的 ID 來獲取歌單中的歌曲數(shù)據(jù)，然后還做了一些體驗(yàn)上面的交互，比如上滑顯示狀態(tài)欄然后將狀態(tài)欄標(biāo)題變?yōu)楦鑶蚊唧w可以嘗試一下就知道了。

然后就是復(fù)用 歌曲列表組建 來顯示歌曲。

和歌單詳情基本上沒有什么區(qū)別，除了 UI 界面方面有細(xì)微的改動(dòng)（根據(jù)不同的內(nèi)容作出不同的優(yōu)化）。

最最最重要的組件，畢竟是個(gè)音樂播放器，不能放歌那啥都是扯淡了。

實(shí)現(xiàn)功能：順序播放、單曲循環(huán)、隨機(jī)播放、收藏等。

播放、暫停使用 HTML5 的 audio 實(shí)現(xiàn)。

數(shù)據(jù)、播放狀態(tài)、播放歷史、習(xí)慣歌曲等方面使用了 vuex 來進(jìn)行管理，因?yàn)閿?shù)據(jù)太多，組件直接傳遞的話是會(huì)死人的，所以還是老老實(shí)實(shí)的用 vuex 吧，數(shù)據(jù)之前的傳遞真的很方便。

圖標(biāo)使用 iconfont 阿里巴巴圖標(biāo)庫，中間的唱片旋轉(zhuǎn)動(dòng)畫使用了 animation 實(shí)現(xiàn)。

歌詞部分獲取到網(wǎng)易的歌詞數(shù)據(jù)，然后使用 第三方庫 lyric-parser 進(jìn)行處理。實(shí)現(xiàn)顯示歌詞、拖動(dòng)進(jìn)度條歌詞同步滾動(dòng)、歌詞跟隨歌曲進(jìn)度高亮。

通過 localstorage 存儲(chǔ)喜歡歌曲、播放歷史數(shù)據(jù)。

電腦端是沒有這個(gè)問題的，這個(gè)問題真的是讓我很頭大，最后是用了很鬼畜的方法解決了（使用 addEventListener 監(jiān)聽 touchend 事件，然后在回調(diào)函數(shù)中讓 audio 播放一次，具體看 App.vue 文件，注釋有寫）。

顯示和管理當(dāng)前播放歌曲，可以用來刪除列表中的歌曲、以及選擇播放歌曲。

實(shí)現(xiàn)功能：搜索歌手、歌單、歌曲、熱門搜索、數(shù)據(jù)節(jié)流、上拉刷新、保存搜索記錄。

通過關(guān)鍵字請求 API 獲取搜索數(shù)據(jù)，顯示歌手、歌單、歌曲。

實(shí)現(xiàn)了上刷新，因?yàn)樗阉骺梢栽O(shè)置請求數(shù)據(jù)的條數(shù)，所以可以用來實(shí)現(xiàn)上刷新的功能。

通過節(jié)流函數(shù)實(shí)現(xiàn)數(shù)據(jù)節(jié)流，通過 localstorage 存儲(chǔ)搜索數(shù)據(jù)。

將在本地存儲(chǔ)的數(shù)據(jù)顯示出來，方便用戶使用，后期準(zhǔn)備添加更多功能。

優(yōu)化排行榜加載速度

優(yōu)化重復(fù)代碼

增加歌曲評(píng)論

增加 MV、電臺(tái) 功能

emm，更多功能容我再想想哈

感謝 Binaryify 對(duì)接口文檔 NeteaseCloudMusicApi 的不斷維護(hù)與更新。

感謝 ustbhuangyi 老師的 Vue 實(shí)戰(zhàn)教程 ，讓我學(xué)習(xí)到很多 vue 的知識(shí)。

最后的最后當(dāng)然是厚著臉皮的再求個(gè) star 啦，如果覺得我的項(xiàng)目還不錯(cuò)的話 ，就給個(gè) star 鼓勵(lì)一下吧~