基於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