Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to achieve long-press recording and cancel the sending function of Mini Program". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Mini Program how to achieve long-press recording, on the cancel send function" it!

1. Html part.

WeChat Mini Programs event API:

/ / html part class part only controls the style independent of function analysis: long press recording requires longpress event, loosening transmission requires touchend event, and skidding to cancel sending requires touchmove event. From this you can have the following html code

{{record.text}} 2. JS part 2.1. First, define the data structure of the recording:

The old Mini Program recording interfaces wx.startRecord and wx.stopRecord are no longer maintained after version 1.6.0, so use their recommended wx.getRecordManager interface.

Note: if you use the wx.getRecordManager interface, call the corresponding audio control interface wx.createInnerAudioContext () to play and control the recording.

Data () {record: {text: "long press recording", type: "record", iconPath: require ("@ /.. / static/icons/record.png"), handler: this.handleRecordStart}, / / data structure related to recording recorderManager: wx.getRecorderManager (), / / recording management context startPoint: {} / / record long press recording start point information, which is used to calculate the sliding distance later. SendLock: true, / / send lock, lock when true, unlock send when false}, 2.2. Monitor recording stoponLoad () {this.recorderManager.onStop (res = > {if (this.sendLock) {/ / lock do not send} else {/ / unlock send, send network request 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 = {//修改录音数据结构，此时录音按钮样式会发生变化。 text: "松开发送", type: "recording", iconPath: require("@/../static/icons/recording.png"), handler: this.handleRecordStart }; this.recorderManager.start();//开始录音 wx.showToast({ title: "正在录音，上划取消发送", icon: "none", duration: 60000//先定义个60秒，后面可以手动调用wx.hideToast()隐藏 }); this.sendLock = false;//长按时是不上锁的。 },2.4. 松开发送 在这个方法中需要做的事: 做一些样式的控制. 结束录音. handleRecordStop() { // touchend(手指松开)时触发 this.record = {//复原在start方法中修改的录音的数据结构 text: "长按录音", type: "record", iconPath: require("@/../static/icons/record.png"), handler: this.handleRecordStart }; wx.hideToast();//结束录音、隐藏Toast提示框 this.recorderManager.stop();//结束录音 }2.5. 上划取消发送 在这个方法中需要做的事: 计算手指上滑的距离 根据距离判断是否需要取消发送 如果取消发送,最重要的是this.sendLock = true,上锁不发送 handleTouchMove(e) { //touchmove时触发 var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离 if (Math.abs(moveLenght) >

50) {wx.showToast ({title: "release your finger and cancel sending", icon: "none", duration: 60000}); this.sendLock = true / / triggered the skid to cancel sending, lock} else {wx.showToast ({title: "recording, cancel sending", icon: "none", duration: 60000}); this.sendLock = false / / the distance is not enough, you can still send, unlocked}},} so far, I believe you have a deeper understanding of "how to achieve long-press recording and cancel sending function on Mini Program". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.