效果圖：

實現的功能

1、首頁

2、底部播放控件

3、播放頁面

4、播放列表

5、排行榜

6、音樂搜索

輸入搜索關鍵詞，點擊放大鏡圖標

7、側邊欄

目錄結構

開發心得與總結

1、輪播圖

首先感謝作者ShanaMaid/vue-image-scroll開源的代碼，我把代碼copy下來自己進行了一點修改(沒有手指滑動效果)，因為這是移動端，少不了的手指滑動切換，所以添加了vue-touch(偷偷告訴你，vue-touch的next分支還是支持vue2.0的)。

地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

2、歌曲操作(喜歡，分享，加入播放列表)動畫、播放列表展開與刪除歌曲動畫Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過渡

• 條件渲染 （使用 v-if）

• 條件展示 （使用 v-show）

• 動態組件

• 組件根節點

transition-group一組過度動畫，這裏有個小坑的，之前看官網列表過渡的栗子，給每一項設置唯一的key值，一般都會用index。所以在做的時候就把index傳給key，結果過渡老是不對，後來換成對應的item就正常了(生無可戀臉)。

3、直線進度條、弧形進度條

西班牙建築大師曾說過：“直線屬於人類，曲線則歸於上帝”。在這裏我大膽的使用了弧形來作為進度條，(幾大熱門音樂APP貌似還沒有弧形進度條)。

這裏我用到了Vue的綁定內聯樣式

4、本地存儲

將一些數據緩存到localStorage，可以減少Http請求，從而優化頁面加載時間。

在這個項目中首頁歌曲列表以及搜索歷史用到了本地緩存，拿搜索歷史來舉栗：

5、圖片懶加載

使用了vue-lazyload插件

用法：

6、歌詞滾動與高亮

因為api提供的歌詞包括時間，如：

[03:57.280]原諒我這一生不羈放縱愛自由

所以首先要進行字符串切割：

然後在播放的監聽事件中與播放的當前做對比：

到這就ok了

7、VUEX狀態管理

推薦官方調試工具 devtools extension

之前看到好多人寫的vuex，把整個項目的數據放到了一個state裏，導致應用的所有狀態集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。

所以我建議(個人見解，輕噴)：將 store 分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters。這樣方便管理與後期的維護。

車已到站??。

不知不覺寫了這麽多，老鐵們湊合這看吧，覺得還行的可以點贊，需要完整代碼練習的加群：453833554已經上傳到群文件。

用javascript和html5做一個音樂播放器，附帶源碼