扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“mpvue如何开发音频类小程序”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“mpvue如何开发音频类小程序”这篇文章吧。
这是我第一次开发小程序，开发的产品是音频类的，在大佬的建议下采用了 mpvue ,一周时间把功能都做出来，由于不太熟悉mpvue和微信小程序，足足用了一周时间来改bug才出来一个能用的版本，在这里整理分享下我开发时遇到的一些问题和给出一些建议。
在 Linux 上开发小程序
在公司电脑装了双系统，日常用的是 Ubuntu 系统，Linux或Mac的开发环境对前端相对来说会友好一些。微信小程序官方的开发者工具只有 Windows 和 Mac 版本，所以这就尴尬了。
不过还好，发现已经有大神在GitHub上做了Linux的支持，推荐给大家： Linux微信web开发者工具 。 根据教程安装使用即可，使用时就用 ./bin/wxdt 命令打开。不过用了几天后面觉得不太方便，就索性切回Windows系统用官方最新的版本了。
封装wx.request为Promise
wx.request 用于发起http请求，但平时习惯了Promise的写法，所以还是封装一下这个方法为Promise的形式。 我看很多小程序会使用fly 这个库。
但个人觉得发起请求不需要那么强大的功能，小程序本身就应该是一个轻量级的东西，引入一个库可能会导致项目打包变大，可能让小程序更卡，所以本着能自己写就自己写吧的心态，索性自己封装一下算了。
在 src/utils ,新建一个 request.js :
const apiUrl = 'https://your server.com/api/'
const request = (apiName, reqData, isShowLoading = true) => {
// 某些请求可能不需要显示loading
if (isShowLoading) {
wx.showLoading({
title: '正在努力加载中',
mask: true
})
}
return new Promise(function (resolve, reject) {
wx.request({
url: apiUrl + apiName,
method: 'POST',
data: reqData,
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
if (res.data.code === 0) {
// 与后端约定code=0时才是正常的
resolve(res)
} else {
reject(res)
}
},
fail (err) {
reject(err)
},
complete (res) {
wx.hideLoading()
}
})
})
}
export default request当然这是个简化版的，我实际项目中还会在初始化时加入一些 token 之类的参数，大家能看明白是这样封装成Promise的就可以啦。
使用vant-weapp
小程序已经支持了npm安装，但不太会弄。还是按网上方法，将项目clone下来放进static目录下。
git clone https://github.com/youzan/vant-weapp.git
然后将 vant-weapp 的 dist 目录拷贝到项目的static目录下（尽可能精简，删掉一些奇奇怪怪的如 .github 的东西，所以直接使用dist目录），改名为 vant (也可以不改名)。全局使用时，可以在 app.json 引入：
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-field": "/static/vant/field/index"
},注意：需要打开微信开发者工具中的ES6转ES5功能
一开始以为使用起来和web端的没啥差别，但没想到那么麻烦。比如：在vue中是可以使用 v-model 的，但在mpvue中的小程序中不能使用，只能
而且不能随意灵活添加class修改组件的样式，需要vant组件支持提供外部样式才可修改，比如上面的 van-field 是通过 input-class 来添加样式控制的，很不方便。而且某些内部样式由于没有外部样式表，根本改不了。
综上： 在微信小程序使用第三方组件库不太方便，样式修改比较麻烦，如果产品是有UI设计时， 尽量不使用 ，有时候自己实现样式可能更快，而且项目体积更小。
使用vuex
mpvue官方的快速模板中是将vuex放在 counter 这个page目录下，可能习惯了vue官方写法的很多同学（包括我）不太喜欢，所以最好就改为vuex官方的写法。
在src目录下建一个 store 的文件夹，分别建以下文件：
项目不太复杂时不建议使用modules，使用起来比较麻烦。
贴一下 index.js 的代码，其他的 actions.js , getters.js 按官方的写法就好啦。
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})vuex/dist/logger 是vuex在开发环境可以自动打印日志的工具，debug比较方便，建议使用。 然后在 src/main.js 引入：
import Vue from 'vue'
import App from './App'
import store from '@/store'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store
const app = new Vue({
store
})
app.$mount()这样就可以在项目中正常使用啦，完全支持 mapState , mapActions , mapGetters 的写法，比如在 pages/index/index.vue 中使用：
踩坑指南
其实大多数坑可能是mpvue的，很多情况也是自己不熟悉小程序生命周期导致的一些奇奇怪怪的bug。
mpvue是支持小程序原生组件的
mpvue会将 div 编译为小程序中的 view 。一开始我不了解，以为用了mpvue后就不能使用小程序原生支持的组件了，比如 swiper , scroll-view 等，小程序是支持的，可以放心使用哈哈。
npm run build后样式丢失
本来在开发环境正常的，然后准备发版 npm run build 后发现样式丢失了。然后重新 npm start 排查问题，样式还是丢失的。内心此时是mmp的：npm run build丢失就算了，我没改什么东西重新npm start后为什么还是丢失，之前还是正常的呀？
刚开始怀疑是缓存什么的问题，删掉的dist目录，重启开发者工具，甚至重启电脑都试了一下，这是我遇到的超级诡异的问题之一。
冷静下来想到：之前的版本是正常的，一定是新版本引入了什么导致了打包样式的丢失。于是回滚版本一个个build排查问题，最后找到了原因： 在一个page中引入了其他page，即在页面中import另一个页面。
在我这里的具体例子是：我在 pages/index/index.vue 中想做底部共用一个tabbar，页面根据tabbar的值来显示对应的子级页面: pages/page1/index.vue 和 pages/page2/index.vue 。
所以我将这两个页面当做子组件来引入了： import Page1 from '@/pages/page1' ，一开始没有问题，等重启项目，或者build后就发现样式丢失了。
这可能是mpvue打包机制的一个限制，即 页面不能将另一个页面当子组件来引用 ，否则会导致样式丢失。
背景音频的src无法读取
项目中希望用户退出小程序后依然能播放音频，所以用到了背景音频的api： wx.getBackgroundAudioManager()。
this.audio = wx.getBackgroundAudioManager() this.audio.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' this.audio.title = '此时此刻' //注意必填 this.audio.epname = '此时此刻' this.audio.singer = '许巍' this.audio.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
title 和 src 赋值后会直接播放音频，后面的几个属性建议也填上，因为播放背景音频时微信是有个界面需要封面图和歌手名称等的。
如果想要获取当前正在播放的音频src，本来以为通过 this.audio.src 来获取就可以了但是有bug。
在开发者工具中是可以正常获取的，即开发时是没问题的，但在真机上返回的是 undefined ，因此不能用 this.audio.src 来获取当前播放的音频url，得用一个变量来存这个数据。
直接使用音频的currentTime可能渲染不及时
currentTime用于显示当前的播放进度，但我用在子组件中时经常更新不及时，打印是正常的，但试图渲染不及时，有时候需要点击一下才能重新渲染，这可能是mpvue使用时才会遇到。
所以建议还是项目自身维护一套背景音频的变量比较好一点，比如放在 vuex 中。监听 BackgroundAudioManager.onTimeUpdate() 方法每次赋值到自身维护的变量中。
音频的onCanplay方法不一定每个音频都会触发
一开始我监听在 onCanplay 方法，将音频的时长信息 duration 赋值到vuex中存起来，但发现 onCanplay 有时候是不会触发的，比如重新赋值src播放下一首时，很尴尬。
所以不要太依赖onCanplay这个方法，还好目前直接使用 audio.duration 好像不会出现像上面的 currentTime 渲染不及时的问题，所以就这样用着先。
音频播放结束，即onStop后，不能再通过audio.play()的方法重新播放，得重新赋值src
正常来说，音频播放结束后，音频的src是不变的，再次 play() 应该是可以的。但在小程序中偏偏不行，得重新赋值src才能重新播放，这应该是小程序的一个bug。。。
所以需要判断一下 暂停 和 停止 的情况，用不同的办法播放。正常来说，音频暂停时 currentTime 是不为0的，而结束时 currentTime 会为0。
所以可以通过 currentTime （最好是自己维护的变量）来判断暂停和停止的情况: 如果currentTime不为0，表示是暂停的情况，可以用 play() ,如果小于等于0，则重新赋值src播放 ：
if (currentTime) {
this.audio.play()
} else {
this.audio.src = 'xx.mp3'
}mpvue不支持直接在template上直接绑定函数
这个是mpvue文档上有写的，不过一开始并不是很理解，也踩坑了，所以在这里提一下，避免不知道的同学踩坑找半天。