这篇文章主要为大家展示了“mpvue如何开发音频类小程序”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“mpvue如何开发音频类小程序”这篇文章吧。
五大连池ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！
这是我第一次开发小程序，开发的产品是音频类的，在大佬的建议下采用了 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 = '/upload/otherpic71/T002R300x300M000003rsKF44GyaSk.jpg;
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文档上有写的，不过一开始并不是很理解，也踩坑了，所以在这里提一下，避免不知道的同学踩坑找半天。
{{ formatItem(item) }}
