這篇文章主要為大家展示了“mpvue如何開發(fā)音頻類小程序”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“mpvue如何開發(fā)音頻類小程序”這篇文章吧。
這是我第一次開發(fā)小程序，開發(fā)的產(chǎn)品是音頻類的，在大佬的建議下采用了 mpvue ,一周時間把功能都做出來，由于不太熟悉mpvue和微信小程序，足足用了一周時間來改bug才出來一個能用的版本，在這里整理分享下我開發(fā)時遇到的一些問題和給出一些建議。
在 Linux 上開發(fā)小程序
在公司電腦裝了雙系統(tǒng)，日常用的是 Ubuntu 系統(tǒng)，Linux或Mac的開發(fā)環(huán)境對前端相對來說會友好一些。微信小程序官方的開發(fā)者工具只有 Windows 和 Mac 版本，所以這就尷尬了。
不過還好，發(fā)現(xiàn)已經(jīng)有大神在GitHub上做了Linux的支持，推薦給大家： Linux微信web開發(fā)者工具 。 根據(jù)教程安裝使用即可，使用時就用 ./bin/wxdt 命令打開。不過用了幾天后面覺得不太方便，就索性切回Windows系統(tǒng)用官方最新的版本了。
封裝wx.request為Promise
wx.request 用于發(fā)起http請求，但平時習慣了Promise的寫法，所以還是封裝一下這個方法為Promise的形式。 我看很多小程序會使用fly 這個庫。
但個人覺得發(fā)起請求不需要那么強大的功能，小程序本身就應該是一個輕量級的東西，引入一個庫可能會導致項目打包變大，可能讓小程序更卡，所以本著能自己寫就自己寫吧的心態(tài)，索性自己封裝一下算了。
在 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 之類的參數(shù)，大家能看明白是這樣封裝成Promise的就可以啦。
使用vant-weapp
小程序已經(jīng)支持了npm安裝，但不太會弄。還是按網(wǎng)上方法，將項目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"
},注意：需要打開微信開發(fā)者工具中的ES6轉(zhuǎn)ES5功能
一開始以為使用起來和web端的沒啥差別，但沒想到那么麻煩。比如：在vue中是可以使用 v-model 的，但在mpvue中的小程序中不能使用，只能
而且不能隨意靈活添加class修改組件的樣式，需要vant組件支持提供外部樣式才可修改，比如上面的 van-field 是通過 input-class 來添加樣式控制的，很不方便。而且某些內(nèi)部樣式由于沒有外部樣式表，根本改不了。
綜上： 在微信小程序使用第三方組件庫不太方便，樣式修改比較麻煩，如果產(chǎn)品是有UI設計時， 盡量不使用 ，有時候自己實現(xiàn)樣式可能更快，而且項目體積更小。
使用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在開發(fā)環(huán)境可以自動打印日志的工具，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 中使用：
踩坑指南
其實大多數(shù)坑可能是mpvue的，很多情況也是自己不熟悉小程序生命周期導致的一些奇奇怪怪的bug。
mpvue是支持小程序原生組件的
mpvue會將 div 編譯為小程序中的 view 。一開始我不了解，以為用了mpvue后就不能使用小程序原生支持的組件了，比如 swiper , scroll-view 等，小程序是支持的，可以放心使用哈哈。
npm run build后樣式丟失
本來在開發(fā)環(huán)境正常的，然后準備發(fā)版 npm run build 后發(fā)現(xiàn)樣式丟失了。然后重新 npm start 排查問題，樣式還是丟失的。內(nèi)心此時是mmp的：npm run build丟失就算了，我沒改什么東西重新npm start后為什么還是丟失，之前還是正常的呀？
剛開始懷疑是緩存什么的問題，刪掉的dist目錄，重啟開發(fā)者工具，甚至重啟電腦都試了一下，這是我遇到的超級詭異的問題之一。
冷靜下來想到：之前的版本是正常的，一定是新版本引入了什么導致了打包樣式的丟失。于是回滾版本一個個build排查問題，最后找到了原因： 在一個page中引入了其他page，即在頁面中import另一個頁面。
在我這里的具體例子是：我在 pages/index/index.vue 中想做底部共用一個tabbar，頁面根據(jù)tabbar的值來顯示對應的子級頁面: pages/page1/index.vue 和 pages/page2/index.vue 。
所以我將這兩個頁面當做子組件來引入了： import Page1 from '@/pages/page1' ，一開始沒有問題，等重啟項目，或者build后就發(fā)現(xiàn)樣式丟失了。
這可能是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。
在開發(fā)者工具中是可以正常獲取的，即開發(fā)時是沒問題的，但在真機上返回的是 undefined ，因此不能用 this.audio.src 來獲取當前播放的音頻url，得用一個變量來存這個數(shù)據(jù)。
直接使用音頻的currentTime可能渲染不及時
currentTime用于顯示當前的播放進度，但我用在子組件中時經(jīng)常更新不及時，打印是正常的，但試圖渲染不及時，有時候需要點擊一下才能重新渲染，這可能是mpvue使用時才會遇到。
所以建議還是項目自身維護一套背景音頻的變量比較好一點，比如放在 vuex 中。監(jiān)聽 BackgroundAudioManager.onTimeUpdate() 方法每次賦值到自身維護的變量中。
音頻的onCanplay方法不一定每個音頻都會觸發(fā)
一開始我監(jiān)聽在 onCanplay 方法，將音頻的時長信息 duration 賦值到vuex中存起來，但發(fā)現(xiàn) onCanplay 有時候是不會觸發(fā)的，比如重新賦值src播放下一首時，很尷尬。
所以不要太依賴onCanplay這個方法，還好目前直接使用 audio.duration 好像不會出現(xiàn)像上面的 currentTime 渲染不及時的問題，所以就這樣用著先。
音頻播放結(jié)束，即onStop后，不能再通過audio.play()的方法重新播放，得重新賦值src
正常來說，音頻播放結(jié)束后，音頻的src是不變的，再次 play() 應該是可以的。但在小程序中偏偏不行，得重新賦值src才能重新播放，這應該是小程序的一個bug。。。
所以需要判斷一下 暫停 和 停止 的情況，用不同的辦法播放。正常來說，音頻暫停時 currentTime 是不為0的，而結(jié)束時 currentTime 會為0。
所以可以通過 currentTime （最好是自己維護的變量）來判斷暫停和停止的情況: 如果currentTime不為0，表示是暫停的情況，可以用 play() ,如果小于等于0，則重新賦值src播放 ：
if (currentTime) {
this.audio.play()
} else {
this.audio.src = 'xx.mp3'
}mpvue不支持直接在template上直接綁定函數(shù)
這個是mpvue文檔上有寫的，不過一開始并不是很理解，也踩坑了，所以在這里提一下，避免不知道的同學踩坑找半天。
