高仿移動端網易雲音樂 Vue前端項目

技術棧

Vue + Vue-Router + Vuex + Webpack + Axios

如今就克隆下來看看吧！

Github地址： github.com/cat-walk/mu…

項目部署地址： meiyun.info

若是你發現該項目有問題，建議先看看本文底部的項目已知問題，裏面可能會有說明，若是沒有，歡迎issue或留言，謝謝～

前端部分

1. 安裝依賴

npm install
複製代碼

2. 起項目

npm run serve
複製代碼

後端部分

Github地址：github.com/Binaryify/N…

後端操做見文檔。

界面和功能展現

首頁展現banner、推薦歌單，點擊可進入排行榜

歌曲播放界面支持播放進度同步、收藏或取消收藏當前歌曲

banner、排行榜左邊的三個按鈕點擊沒有效果( ´▽｀) ，沒時間寫那些啦...

實現了登陸功能

登陸後展現頭像和暱稱，且可進入我的中心即「個人」頁面，可查看收藏的音樂和最近播放過的音樂。

搜索模塊：熱門搜索、搜索歷史、搜索建議

項目結構

PS：

1. 打勾的爲已完成的內容，如今本項目除我的信息修改之外，其餘功能都已完成。

2. 字體加粗的部分爲一個組件，第二次使用同一組件（即組件複用）時再也不加粗，以作標識。

• 1. 側邊欄模塊

  • 我的信息展現（頭像、暱稱）
    • 我的信息修改
  • 登陸按鈕
    • 登陸模塊

• 2. 音樂推薦模塊（主頁)

  • 輪播圖banner模塊
  • 排行榜入口
    • 排行榜模塊
      • 歌單詳情模塊
        • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能
  • 推薦歌單模塊
    • 歌單詳情模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能

• 3. 我的中心模塊

  • 最近播放歌曲入口
    • 最近播放歌曲展現模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能
  • 個人收藏入口
    • 歌單詳情模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能

• 4. 搜索模塊

  • 搜索框模塊
    • 搜索結果模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能
  • 熱門搜索模塊
    • 搜索結果模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能
  • 搜索歷史模塊（與熱門搜索模塊公用一個組件）
    • 搜索結果模塊
      • 播放控制模塊：實現了收藏/取消收藏歌曲的功能，實現了添加到最近播放歌曲的功能

代碼規範

使用EsLint, lint規範採用airbnb 的js 代碼規範

在VSCode裏配置 ESLint + Airbnb + Vue

技術方案

• 項目目錄結構

  參考 優雅的 Vue 項目目錄結構設計

• 移動適配方案

  基於amfe-flexible，進行了符合本身使用習慣的修改

  示例：

  • 根目錄字體大小：100px，即1rem = 100px。

  • 設計稿上75px = 75/100 = 0.75rem。

• 統一不一樣瀏覽器的默認樣式: Normalize.css現已改用minireset.css

  Normalize.css：參考 normalize.css與reset.css的不一樣 normalize.css的使用

• 側邊欄實現：vue-slideout

• 輪播圖實現：在Vue中使用Swiper

項目已知問題

收藏歌曲功能

1. 點擊收藏歌曲按鈕後，有時會有必定的延遲（0.5s～5s，視網絡狀況）收藏纔會成功。

   該問題多是後臺對網易雲的數據作了緩存致使的。（這個思考並無動腦子，咳咳( ´▽｀)

2. 因爲還沒有作節流和防抖，過於密集地點擊收藏按鈕時，可能會致使收藏/取消收藏功能不生效。

播放歌曲頁面

1. 因爲一系列複雜的問題，經過搜索界面進入歌曲控制頁面的話，沒有封面圖片，只有懶加載的默認圖片
2. 播放音樂時，旋轉的封面圖片有時會出現閃動
3. **若是你打開某一首歌沒法播放，那可能這首歌是要付費才能播放的，換一首便可。**有時間會優化須要付費才能播放的提示。

側邊欄（Vue-Slideout插件實現，=====>甩鍋:) ）

1. 在"個人」頁面下（還有部分其餘頁面），呼出側邊欄的按鈕沒法點擊

2. 在一些不須要側邊欄功能的頁面，還沒有禁用呼出側邊欄功能

3. 側邊欄暫時只能經過左滑操做來關閉，還沒有實現點擊空白處關閉側邊欄

ios端

1. 因爲iOS下規定audio標籤不能自動播放，所以，iOS環境下，第一次播放音樂時，須要點擊暫停後再點擊播放按鈕，如此便可。
2. 點擊底部音樂控制面板後，有時會從新開始播放

寫這個項目的經驗和收穫將在整理後發到個人Github上，應該不會鴿

致謝

很是感謝後臺提供者Binaryify，接口很穩定，文檔很完善

很是感謝CaiJinyc，我從ta的項目裏學到了很多

1. github.com/CaiJinyc/vu…
2. github.com/Binaryify/N…