小程序?qū)崿F(xiàn)長(zhǎng)按錄音,上劃取消發(fā)送
使用mpvue開發(fā)小程序時(shí),可能需要用到錄音功能,可以通過(guò)使用"長(zhǎng)按錄音松開發(fā)送,上劃取消發(fā)送"來(lái)實(shí)現(xiàn)小程序錄音功能。以下為大家整理官方文檔
下面講解只貼上關(guān)鍵代碼
1. html部分。
微信小程序事件接口:
//html部分 class部分只是控制樣式 與功能無(wú)關(guān)分析:長(zhǎng)按錄音需要longpress事件,松開發(fā)送需要touchend事件,上滑取消發(fā)送需要touchmove事件。由此可有以下html代碼
<div class="input weui-grid" hover-class="weui-grid_active" :class="record.type" @longpress="handleRecordStart" @touchmove="handleTouchMove" @touchend="handleRecordStop"> <image class="weui-grid__icon" :src="record.iconPath"/> <div class="weui-grid__label">{{record.text}}</div> </div>
2. JS部分
2.1. 首先定義錄音的數(shù)據(jù)結(jié)構(gòu):
舊版的小程序錄音接口wx.startRecord和wx.stopRecord在1.6.0版本后不再維護(hù)了,所以使用其建議的wx.getRecordManager接口。
注意:使用wx.getRecordManager接口的話,應(yīng)調(diào)用相應(yīng)的音頻控制接口wx.createInnerAudioContext()來(lái)播放和控制錄音.
data(){ record: { text: "長(zhǎng)按錄音", type: "record", iconPath: require("@/../static/icons/record.png"), handler: this.handleRecordStart }, //與錄音相關(guān)的數(shù)據(jù)結(jié)構(gòu) recorderManager: wx.getRecorderManager(), //錄音管理上下文 startPoint: {}, //記錄長(zhǎng)按錄音開始點(diǎn)信息,用于后面計(jì)算滑動(dòng)距離。 sendLock: true, //發(fā)送鎖,當(dāng)為true時(shí)上鎖,false時(shí)解鎖發(fā)送},
2.2. 監(jiān)聽錄音stop
onLoad(){ this.recorderManager.onStop(res => { if (this.sendLock) { //上鎖不發(fā)送 } else {//解鎖發(fā)送,發(fā)送網(wǎng)絡(luò)請(qǐng)求 if (res.duration < 1000) wx.showToast({ title: "錄音時(shí)間太短", icon: "none", duration: 1000 }); else this.contents = [...this.contents,{ type: "record", content: res }];//contents是存儲(chǔ)錄音結(jié)束后的數(shù)據(jù)結(jié)構(gòu),用于渲染. } }); }
2.3. 長(zhǎng)按錄音方法
在這個(gè)方法中需要做的事:
- 記錄長(zhǎng)按的點(diǎn)信息,用于后面計(jì)算手指滑動(dòng)的距離,實(shí)現(xiàn)上滑取消發(fā)送.
- 做一些界面樣式的控制.
- 開始錄音
handleRecordStart(e) { //longpress時(shí)觸發(fā) this.startPoint = e.touches[0];//記錄長(zhǎng)按時(shí)開始點(diǎn)信息,后面用于計(jì)算上劃取消時(shí)手指滑動(dòng)的距離。 this.record = {//修改錄音數(shù)據(jù)結(jié)構(gòu),此時(shí)錄音按鈕樣式會(huì)發(fā)生變化。 text: "松開發(fā)送", type: "recording", iconPath: require("@/../static/icons/recording.png"), handler: this.handleRecordStart }; this.recorderManager.start();//開始錄音 wx.showToast({ title: "正在錄音,上劃取消發(fā)送", icon: "none", duration: 60000//先定義個(gè)60秒,后面可以手動(dòng)調(diào)用wx.hideToast()隱藏 }); this.sendLock = false;//長(zhǎng)按時(shí)是不上鎖的。 },
2.4. 松開發(fā)送
在這個(gè)方法中需要做的事:
- 做一些樣式的控制.
- 結(jié)束錄音.
handleRecordStop() { // touchend(手指松開)時(shí)觸發(fā) this.record = {//復(fù)原在start方法中修改的錄音的數(shù)據(jù)結(jié)構(gòu) text: "長(zhǎng)按錄音", type: "record", iconPath: require("@/../static/icons/record.png"), handler: this.handleRecordStart }; wx.hideToast();//結(jié)束錄音、隱藏Toast提示框 this.recorderManager.stop();//結(jié)束錄音 }
2.5. 上劃取消發(fā)送
在這個(gè)方法中需要做的事:
- 計(jì)算手指上滑的距離
- 根據(jù)距離判斷是否需要取消發(fā)送
- 如果取消發(fā)送,最重要的是this.sendLock = true,上鎖不發(fā)送
handleTouchMove(e) { //touchmove時(shí)觸發(fā) var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移動(dòng)距離 if (Math.abs(moveLenght) > 50) { wx.showToast({ title: "松開手指,取消發(fā)送", icon: "none", duration: 60000 }); this.sendLock = true;//觸發(fā)了上滑取消發(fā)送,上鎖 } else { wx.showToast({ title: "正在錄音,上劃取消發(fā)送", icon: "none", duration: 60000 }); this.sendLock = false;//上劃距離不足,依然可以發(fā)送,不上鎖 } }, }
以上就是這篇小程序?qū)崿F(xiàn)長(zhǎng)按錄音,上劃取消發(fā)送 ,需要更多小程序開發(fā)內(nèi)容,可以查看本網(wǎng)站,謝謝。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序請(qǐng)查看:小程序商店