Vue 實現網易雲音樂 WebApp

Ksig發表於2019-02-16

基於 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp,UI 介面參考了安卓版的網易雲音樂、flex 佈局適配常見移動端。

因為伺服器的原因,所以可能多人訪問的時候有些東西會載入不出來,如果可以的話一會再訪問應該就沒什麼問題了,出現這樣的問題,實在抱歉。

專案演示地址:移動端音樂 WebApp,或者可以掃描二維碼訪問:

clipboard.png

  • 推薦使用手機訪問,電腦在 Chrome 除錯模式下食用效果更佳,開啟除錯模式的手機模式後,如果不能滾動,重新整理一下頁面即可

原始碼地址:vue-music-webapp,歡迎 star 和 fork 哦~

如果你覺得我做的不錯的話,我就厚著臉皮求個 star ⭐️ 哈,star 是對我最大的鼓勵(老臉一紅)

預覽

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

推薦、排行榜、歌手

clipboard.png

歌單詳情、個人中心

clipboard.png

播放器、播放列表

clipboard.png

搜尋頁面

clipboard.png

開發目的

通過學習開發一個 Vue 全家桶專案,讓自己更熟練的使用 Vue 全家桶、模組化開發、ES6 等等知識,提高自己的技術能力。

技術棧

前端

  • Vue:用於構建使用者介面的 MVVM 框架
  • vue-router:為單頁面應用提供的路由系統,使用了 Lazy Loading Routes 技術來實現非同步載入優化效能
  • vuex:Vue 集中狀態管理,在多個元件共享某些狀態時非常便捷
  • vue-lazyload:實現圖片懶載入,節省使用者流量,優化頁面載入速度
  • better-scroll:解決移動端各種滾動場景需求的外掛,使移動端滑動體驗更加流暢
  • SCSS:css 預編譯處理器
  • ES6:ECMAScript 新一代語法,模組化、解構賦值、Promise、Class 等方法非常好用

後端

  • Node.js:利用 Express 搭建的本地測試伺服器
  • vue-axios:用來請求後端 API 音樂資料
  • NeteaseCloudMusicApi:網易雲音樂 NodeJS 版 API,提供音樂資料

其他工具

  • vue-cli:Vue 腳手架工具,快速初始化專案程式碼
  • eslint:程式碼風格檢查工具,幫助我們規範程式碼書寫(一定要養成良好的程式碼規範)
  • iconfont :阿里巴巴圖示庫,誰用誰知道
  • fastclick :消除 click 移動遊覽器 300ms 的延

實現功能

播放器核心、推薦頁面、熱榜頁面、歌手頁面、歌單詳情、歌手詳情、排行榜詳情、搜尋頁面、播放列表、使用者中心等等功能。

推薦頁面

推薦頁分成三個部分,分別是 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

  1. 優化排行榜載入速度
  2. 優化重複程式碼
  3. 增加歌曲評論
  4. 增加 MV、電臺 功能
  5. emm,更多功能容我再想想哈

感謝

最後

最後的最後當然是厚著臉皮的再求個 star 啦,如果覺得我的專案還不錯的話 ,就給個 star 鼓勵一下吧~

相關文章