Vue 實現網易雲音樂 WebApp

Ksig發表於2019-02-16
VueWebAPP

基於 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 鼓勵一下吧~

相關文章