文章最後更新(2019-04-06)
github最後更新(2019-04-09)
前言：
最近小組有個微信小程序分享的環節，於是在業餘時間使用mpvue框架寫了個音樂小程序，時間有限，之後有時間會繼續完善。
知識點：mpvue、vue、vuex、es6、sass、小程序基礎
源碼：https://github.com/XieTongXue/mpvue-music
不瞭解mpvue的小夥伴可先閱讀本人另一篇文章：使用mpvue開發微信小程序——原生微信小程序、mpvue、wepy對比
mpvue音樂小程序
此小程序使用mpvue框架開發，樣式使用stylus編寫，歌手、音樂數據抓取自QQ音樂，項目運行方法請看倉庫中的readme。
音樂小程序demo效果展示
主頁（未播放歌曲狀態）
歌手頁（未播放歌曲狀態）
歌手頁（歌曲正在播放狀態）
主頁（歌曲正在播放狀態）
個人中心-(暫未開發，預期功能：收藏歌曲的展示以及播放）
如上所示，此小程序具有歌手、歌手詳情（音樂列表）、播放、個人中心（此模塊暫時只是用來佔位）
與vue項目的一些差異
①、新建pages，按照vue組件創建的方法創建即可，需要在組件同文件夾下建立main.js掛載實例，比如Singer組件，如下：
②、pages建立好後需要再app.json中引用：
③：請求函數的封裝：
④：vuex的使用
vue項目裏store一般這樣注入：
而在mpvue項目中，假如使用了vuex輔助函數mapMutations與mapGetters，則在子組件中會報Cannot read property ‘commit’ of undefined錯誤：
應該將store對象通過$store屬性添加到vue原型上，即：Vue.prototype.$store = store
有些vue的特性在mpvue是無法使用的，比如vue-router，可以用微信小程序的方案替代，如使用wx.navigateTo()。
踩坑記錄
1、切換播放歌曲時海報切換，此時切換歌手，海報仍然顯示的是上一首歌曲的歌手海報，即當前播放歌曲與當前歌手不一致時導致的問題。
解決思路：添加一個標誌imageShouldShow，切換歌手時標誌爲0，切換歌曲時標誌爲1，根據條件判斷顯示當前歌曲的海報還是顯示當前歌手的海報。
原代碼：
現代碼：
2、迷你播放器組件重複調用時出現多次播放的情況，github issue鏈接：https://github.com/XieTongXue/mpvue-music/issues/1
解決思路：抽離部分邏輯代碼，commit鏈接：https://github.com/XieTongXue/mpvue-music/commit/4da3a32f2a098b125d61b0b4a216efb4dddc8b54