網易雲音樂移動端專案實現
網易雲音樂專案實現步驟
1、專案後端建立
（1）.下載專案所需後端檔案:
專案原始碼01-NeteaseCloudMusicApi-master(後端api原始碼)
（2）.將其解壓並通過終端指令 node app.js 執行所需後端檔案
- 專案建立：
（1）.通過vue3-cli 來建立專案：vue create music003
（2）.選取並下載所需依賴包檔案
（3）.選取vue版本
（4）.通過終端命令npm run serve 執行專案
- 發現有些建立發現頁面，後在頁面中分別以元件形式引入：導航欄，輪播圖，發現歌單列表
前置：引入檔案控制文字大小方法通偵測裝置螢幕寬度依靠特定函式動態調整
（1）.導航欄
將導航欄以元件形式新增到頁面上，以此優化專案結構方便後期的開發工作
具體實現步驟：
- 在components建立元件 topNav.vue
2.將元件 topNav.vue引入初始顯示頁面view資料夾下的HomeView.vue檔案並註冊，使用
- 頁面編寫
- 在特定地方使用阿里巴巴向量圖示以實現特定圖示的渲染
檔案引入：
特定圖示的渲染：
（2）輪播圖
-
下載並使用依賴包 swiper vue-awesome-swiper與swiper@5 以快速簡潔的建立元件
- 引入swiper.css 與 swiper 檔案
- 通過swiper.css 與 less 檔案快速建立元件css樣式
- 通過Swiper物件函式 繫結操縱物件並對物件下元素進行輪播
具體實現方法：
先下swiper vue-awesome-swiper再下swiper@5
其中loop為迴圈模式
autoplay為是否切換
speed為切換所需時間，單位為毫秒
5.設定分頁器
1.通過pagination物件繫結物件並進行點選設定
el為繫結元素 clickable為是否允許點選
6.資料替換
將頁面中的初始資料替換為從後端獲取的資料
實現方法：
1.
2.
（3）icon圖示
1.先完成整體框架
2.從阿里向量圖示庫引入圖片
（4）歌單列表
具體實現方式與swiper輪播圖類似，省略。
（5）歌單詳情與歌曲列表
實現步驟 1.在views建立元件 listView.vue，在components裡建立listViewTop.vue與playList.vue
2.在listView.vue中繫結listViewTop.vue與playList.vue的路由資訊
3.向子元件中傳送所需資料
（6）播放歌曲
- 定義一個函式，修改state中的playlist音樂播放列表資料
- 通過audio標籤播放歌曲
（1）
獲取歌曲id通過id 將 https://music.163.com/song/media/outer/url?id=id.mp3 以 src 賦予 Audio 即可播放
（2）播放與暫停的切換
（7）歌單詳情頁面
- 整體框架
2.進入歌單詳情頁面與返回
3.顯示唱片內容
4.顯示歌詞內容
我們使用comit觸發mutations中定義的函式（修改state中同步資料）
使用dispatch觸發actions中定義的函式（修改state中非同步資料）
6.歌曲的上下首切換
給上下首圖示引入一個函式goplay（），用於歌曲下標加減
然後引入下標值，此時要進行判斷，當歌曲下標小於零的時候回到最後一首，
下標值大於歌單長度回到第一首，這樣就能實現歌曲的上下首切換
（8）搜尋頁面
- 新建Search.vue專案用於展示搜尋頁面
- 新建searchTop.vue頁面用於呈現搜尋
- 在Search.vue中引入searchTop.vue頁面
- 給主頁面的搜尋圖示加一個路由
在router資料夾下的index加一個
給topNav.vue下，新增點選事件，通過路由觸發頁面出現
- 編輯searchTop.vue頁面
頁面的樣式CSS排版群裡有，主要是api埠的增加
在api下的index，增加一個埠，用於搜尋歌曲
在vue頁面引入埠
定義一個data（）來獲取使用者輸出框要搜尋的資料和儲存搜尋到的資料
搜尋欄進行傳輸數值給data（）
然後methods方法裡增加一個方法，將後端搜尋到的資料傳輸給data（）
然後頁面中進行迴圈展示
（9）搜尋頁面播放歌曲
思路：
1.將當前點選歌曲追加到播放列表末尾
2.修改當前播放歌曲下標為播放列表陣列最後一位下標
步驟：
定義一個函式，搜尋歌曲點選切換時，將點選的這首歌曲新增到state的播放列表末尾
點選搜尋頁面歌曲觸發事件
（10）登入頁面
- 先新建兩個vue，一個Login.vue一個Me.vue並新建路由