使用mpvue开发微信小程序——音乐小程序项目源码分享

文章最后更新(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

源码地址

github链接：https://github.com/XieTongXue/mpvue-music