基於vue全家桶的移動端音樂web app

項目描述

這是一個基於 Vue2.x 和網易雲音樂 API 製做的移動端 web app 項目；因爲是出於練習和實驗的目的，所以並不是是網易雲音樂 app 的替代品，目前也沒有涵蓋所有的功能；

該項目主要使用的一些工具備：

1. webpack 和 webpack-dev-server
2. vue 全家桶
3. NeteaseCloudMusicApi 項目
4. axios
5. better-scroll
6. vue-lazyload
7. Iconfont
8. Muse-UI

github：github.com/xxf1996/vue…

線上地址：xiexuefeng.cc/app/music

使用須知

因爲項目使用的 API 接口徹底是基於 NeteaseCloudMusicApi 項目，所以須要事先啓動該項目做爲接口服務器（不管是本地仍是雲上）；啓動好後修改 src/index.js 文件中的 API 接口設置爲實際使用的接口地址便可。

如何運行

安裝依賴

npm i
複製代碼

開發

npm start
複製代碼

默認端口爲 8080；

打包發佈

npm run build
複製代碼

默認打包路徑爲 dist；

功能說明

因爲是針對移動端設計的 web app，所以採用了 rem 佈局來適應移動端不一樣分辨率的設備；設計稿是基於 375px 寬度的設備，仿照網易雲音樂 app 的頁面佈局和設計。目前製做的功能界面有：

登陸頁面（僞）

爲啥說是『僞』登陸，由於這裏只是獲取用戶的 uid，此後獲取到的數據都是一些公開只讀的數據，而涉及到真正改變用戶信息的操做（如收藏，點贊，評論等等）都不能使用；其實 NeteaseCloudMusicApi 項目提供了與網易雲音樂 app 同樣的手機或郵箱登陸的接口，可是因爲個人目的不是製做替代品，只是練習項目和試驗一些功能，利用 uid 獲取一些『只讀』數據已經足夠了（何況還涉及到用戶密碼和安全問題）。

那麼如何查詢本身的網易雲音樂帳戶 ID 號呢？那就須要在網易雲音樂 PC 網頁端查看本身的我的主頁，諸如https://music.163.com/#/user/home?id=xxxxxxx，id 後那串數字就是帳戶 ID。

關於遊客模式

遊客模式實際上就是沒有獲取用戶uid而已，所以有關『登陸』用戶的信息就沒法查看（好比側邊欄信息和首頁的用戶歌單等），其餘的數據基本上沒有影響。

首頁

側邊欄

首頁頂部左邊的圖標，點擊可彈出側邊欄查看用戶信息，以及一些設置；

向左滑動或點擊外側能夠收回；

查看更多歌單項

首頁歌單區塊默認最多顯示兩排（2x3，6 個）歌單信息，點擊欄目標題底部彈出所有信息：

歌單詳情頁

歌曲操做彈窗

帶有 3 個豎排原點的圖標，點擊會出現一個關於歌曲操做的底部彈窗：

底部小播放器

點擊歌單或專輯等頁面的歌曲項後，底部會出現一個小播放器：

全屏播放

點擊底部播放器會跳轉到全屏播放頁：

開啓『顯示頻譜』選項後（默認關閉，由於有些瀏覽器對於 WebAuio API 支持不夠），能夠在封面看到實時的頻譜圖：

點擊封面能夠切換到全屏歌詞頁面：

當前播放列表

評論頁面

專輯頁面

歌手詳情頁面

用戶詳情頁

搜索頁

點擊頂部菜單中的搜索圖標便可進入搜索頁面，在輸入框中輸入關鍵字，回車後便可獲取搜索結果；目前只支持單曲類型。

我的筆記

在寫這個項目的時候固然也遇到許多問題，基本上遇到的問題都會記錄下來，其中有些專門進行了整理放在博客上：

1. 關於rem佈局 | snowdream
2. 如何實現歌詞同步顯示 | snowdream
3. 音頻播放器的製做與WebAudio API | snowdream
4. Event對象與自定義事件 | snowdream