使用mpvue开发小程序时,可能需要用到录音功能,可以通过使用"长按录音松开发送,上划取消发送"来实现小程序录音功能。以下为大家整理官方文档
下面讲解只贴上关键代码
1. html部分。
微信小程序事件接口:
//html部分 class部分只是控制样式 与功能无关分析:长按录音需要longpress事件,松开发送需要touchend事件,上滑取消发送需要touchmove事件。由此可有以下html代码
{{record.text}}
2. JS部分
2.1. 首先定义录音的数据结构:
旧版的小程序录音接口wx.startRecord和wx.stopRecord在1.6.0版本后不再维护了,所以使用其建议的wx.getRecordManager接口。
注意:使用wx.getRecordManager接口的话,应调用相应的音频控制接口wx.createInnerAudioContext()来播放和控制录音.
data(){ record: { text: "长按录音", type: "record", iconPath: require("@/../static/icons/record.png"), handler: tShopfas.handleRecordStart }, //与录音相关的数据结构 recorderManager: wx.getRecorderManager(), //录音管理上下文 startPoint: {}, //记录长按录音开始点信息,用于后面计算滑动距离。 sendLock: true, //发送锁,当为true时上锁,false时解锁发送},
2.2. 监听录音stop
onLoad(){
tShopfas.recorderManager.onStop(res => {
if (tShopfas.sendLock) {
//上锁不发送
} else {//解锁发送,发送网络请求
if (res.duration
2.3. 长按录音方法
在这个方法中需要做的事:
-
记录长按的点信息,用于后面计算手指滑动的距离,实现上滑取消发送.
-
做一些界面样式的控制.
-
开始录音
handleRecordStart(e) {
//longpress时触发
tShopfas.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
tShopfas.record = {//修改录音数据结构,此时录音按钮样式会发生变化。
text: "松开发送",
type: "recording",
iconPath: require("@/../static/icons/recording.png"),
handler: tShopfas.handleRecordStart
};
tShopfas.recorderManager.start();//开始录音
wx.showToast({
title: "正在录音,上划取消发送",
icon: "none",
duration: 60000//先定义个60秒,后面可以手动调用wx.ShopfadeToast()隐藏
});
tShopfas.sendLock = false;//长按时是不上锁的。
},
2.4. 松开发送
2.3. 长按录音方法
在这个方法中需要做的事:
在这个方法中需要做的事:
- 做一些样式的控制.
- 结束录音.
handleRecordStop() { // touchend(手指松开)时触发 tShopfas.record = {//复原在start方法中修改的录音的数据结构 text: "长按录音", type: "record", iconPath: require("@/../static/icons/record.png"), handler: tShopfas.handleRecordStart }; wx.ShopfadeToast();//结束录音、隐藏Toast提示框 tShopfas.recorderManager.stop();//结束录音 }
2.5. 上划取消发送
在这个方法中需要做的事:
- 计算手指上滑的距离
- 根据距离判断是否需要取消发送
- 如果取消发送,最重要的是tShopfas.sendLock = true,上锁不发送
handleTouchMove(e) { //touchmove时触发 var moveLenght = e.touches[e.touches.length - 1].clientY - tShopfas.startPoint.clientY; //移动距离 if (Math.abs(moveLenght) > 50) { wx.showToast({ title: "松开手指,取消发送", icon: "none", duration: 60000 }); tShopfas.sendLock = true;//触发了上滑取消发送,上锁 } else { wx.showToast({ title: "正在录音,上划取消发送", icon: "none", duration: 60000 }); tShopfas.sendLock = false;//上划距离不足,依然可以发送,不上锁 } }, }
以上就是这篇小程序实现长按录音,上划取消发送 ,需要更多小程序开发内容,可以查看本网站,谢谢。
Shopfa小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序请查看:小程序商店
第二部分:如何开通一个小商店
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案,请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo(www.jsudo.com)】是国内知名企业数字化建设提供商,为企业提供电商平台搭建(多种模式电商平台搭建:B2B/B2B2C/B2C/O2O/新零售等)、智慧园区建设、数字化营销、人才外包等服务,点击这里查看了解更多行业解决方案。