小程序实现长按录制，取消发送线

使用mpvue开发小程序时，您可能需要使用录制功能。您可以使用'长按释放发送，上取消发送'来实现小程序录制功能。以下是每个人的官方文档

以下说明仅标有密钥代码

1. html部分。

微信小程序事件接口：

//html类部分只是控件风格和功能独立分析:长按需要长按事件，释放发送需要touchend事件，向上滑动取消发送需要touchmove事件。这将有以下HTML代码

{{record.text}}

2. JS部分

2.1. 首先定义录音的数据结构：

版本1.6.0之后不再维护旧的小程序记录接口wx.startRecord和wx.stopRecord，因此请使用他们推荐的wx.getRecordManager接口。

注意:如果使用wx.getRecordManager接口，则应调用相应的音频控制接口wx.createInnerAudioContext（）来播放和控制录制。

Data（）{记录: {文本:'长按记录'，类型:'记录'，iconPath:要求（'@/./static/icons/record.png'），处理程序: this.handleRecordStart}，//记录数据结构记录记录器管理器: wx.getRecorderManager（），//记录管理上下文startPoint: {}，//记录长按记录起始点信息，用于计算滑动距离。 sendLock:是，//发送锁定，当为真时锁定，在为假时解锁}，

2.2. 监听录音stoponLoad(){ this.recorderManager.onStop(res => { if (this.sendLock) { //上锁不发送 } else {//解锁发送，发送网络请求 if (res.duration < 1000) wx.showToast({ title: "录音时间太短", icon: "none", duration: 1000 }); else this.contents = [...this.contents,{ type: "record", content: res }];//contents是存储录音结束后的数据结构,用于渲染. } });}

2.3. 长按录音方法

在这个方法做的事情:

记录长按点信息，用于计算手指滑动的距离，实现平滑和取消发送。做一些界面风格控制。开始录制handleRecordStart（e）{//Longpress触发this.startPoint=e.touches [0]; //记录长按开始点信息，后者用于计算手指在取消上冲程时滑动的距离。 This.record={//修改录制数据结构，此时录制按钮样式将发生变化。文本:'释放发送'，类型:'录制'，iconPath: require（'@/./static/icons/recording.png'），处理程序: this.handleRecordStart}; this.recorderManager.start（）; //开始录制wx.showToast（{title:'录制，未预定发送'，图标:'无'，持续时间: 60000 //首先定义60秒，你可以手动调用wx.hideToast （） 隐藏}）; this.sendLock=false;//长按未锁定。 }，

2.4. 松开发送

在这个方法做的事情:

做一些风格控制。结束录音。 handleRecordStop（）{//touchend（finger release）触发this.record={//恢复在开始方法文本:'长按记录'中修改的记录的数据结构，输入:'record'，iconPath: require（' @/./static/icons/record.png'），处理程序: this.handleRecordStart}; wx.hideToast（）; //结束录制，隐藏Toast提示框this.recorderManager .stop（）; //结束录制}

2.5. 上划取消发送

在这个方法做的事情:

根据距离计算手指滑动的距离，以确定是否需要取消传输。如果取消传输，最重要的是this.sendLock=true，锁不发送handleTouchMove（e）{//touchmove triggers var moveLenght=e.touches [e。 Touches.length - 1] .clientY - this.startPoint.clientY; //移动距离if（Math.abs（moveLenght）＆gt; 50）{wx.showToast（{title:'release finger，cancel send'，icon:'non'，duration: 60000}）; this.sendLock=true; //触发幻灯片取消发送，锁定}其他{wx.showToast（{title:'录制，未预定发送'，图标:'无'，持续时间: 60000}）; this.sendLock=false; //距离不够，仍然可以发送，不能锁定}}，}

以上就是这个小程序实现长按录制，取消发送就行了，需要更多的小程序开发内容，你可以查看这个网站，谢谢。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序，请参阅：小程序 store

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。