基于微信小程序的长按录音、滑动取消发送功能实现~

在做微信小程序的过程中，总是会冒出那么些没接触过的功能，然后就开始各种踩坑，最近要做一个长按录音的功能，大致需求为长按录音，垂直滑动则取消发送。
废话不多说，直接上代码。
服务端在【基于avconv转码工具的微信小程序语音识别功能实现~】中已经说到过，这里就不再说明了。
前端页面部分，主要需要三个事件，长按录音绑定longpress事件，松开发送绑定touchend事件，滑动取消发送绑定touchmove事件，代码如下：

<view class='serac_img' catch:longpress="handleRecordStart" catch:touchmove="handleTouchMove" catch:touchend="handleRecordStop">
        <image src='../../images/voice.png' mode="widthFix"></image>
        <text>长按语音识别</text>
</view>

Js部分，首先定义录音接口及是否发送录音的初始值，当is_clock为true时发送，为false时不发送：

const recorderManager = wx.getRecorderManager()
data: {
    is_clock:false
  }

其次，长按录音事件部分，在这个事件中，需先将is_clock设置为true，然后记录长按时触摸点的坐标信息，用于后面计算手指滑动的距离，从而实现滑动取消发送功能，代码如下：

handleRecordStart: function(e) {
    this.setData({
      is_clock:true,//长按时应设置为true，为可发送状态
      startPoint: e.touches[0],//记录触摸点的坐标信息
})
//设置录音参数
    const options = {
      duration: 10000,
      sampleRate: 16000,
      numberOfChannels: 1,
      encodeBitRate: 48000,
      format: 'mp3'
}
//开始录音
    recorderManager.start(options);
  }

然后，就是松开发送事件，这里我们需要做的是结束录音，我这里把监控停止录音的方法也放在了里面，当然，这里面我们还需要判断录音时长，是否过短，代码如下：

handleRecordStop:function(e){
    recorderManager.stop()//结束录音
     //此时先判断是否需要发送录音
      if (this.data.is_clock == true) {
        var that = this
        //对停止录音进行监控
        recorderManager.onStop((res) => {
            //对录音时长进行判断，少于2s的不进行发送，并做出提示
            if(res.duration<2000){
wx.showToast({
                    title: '录音时间太短，请长按录音',
                    icon: 'none',
                    duration: 1000
                })
}else{
    //进行语音发送
    const {
        tempFilePath
      } = res;
      wx.showLoading({
        title: '语音检索中',
      })
      //上传录制的音频
      wx.uploadFile({
        url: requestUrl + 'Rubbish/uploadVoices',
        filePath: tempFilePath,
        name: 'voice',
        success: function(event) {
          var datas = JSON.parse(event.data);
          if (datas.status == 0) {
            wx.hideLoading()
            if (datas.result) {
              that.setData({ 
                detail: datas.result.list
              })
            } else {
              wx.showToast({
                title: '如此聪明伶俐的我居然会词穷，我要喊我父亲大人送我去深造~',
                icon: 'none',
                duration: 2000
              })
            }
          } else {
            wx.showToast({
              title: datas.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
}
        })
      }    
  }

最后，就是滑动取消发送，这里我们要做的是计算手指滑动的垂直距离，然后根据距离判断是否要取消发送，代码如下：

handleTouchMove:function(e){
   //计算距离，当滑动的垂直距离大于25时，则取消发送语音
    if (Math.abs(e.touches[e.touches.length - 1].clientY - this.data.startPoint.clientY)>25){
      this.setData({
        is_clock: false//设置为不发送语音
      })
    }
  }

至此，核心功能部分算是完成了，一些效果和样式个人根据自己需要去完成~
袁小威最新开发的微信小程序【垃圾分类引导指南】最新版已经上线了，新增了城市属性，欢迎大家扫码体验~

垃圾分类引导指南

最后，在说个题外话，袁小威AI开放平台今天正式上线了【传送门】,目前提供垃圾分类相关API，后续会不定时更新~

最后编辑于：2019.07.26 19:20:41