使用mpvue开发小程序时，，，，，可能需要用到录音功效，，，，，可以通过使用"长按录音松开发送，，，，，上划作废发送"来实现小程序录音功效。。。以下为各人整理官方文档

下面解说只贴上要害代码

1. html部分。。。

微信小程序事务接口：

//html部分 class部分只是控制样式 与功效无关剖析:长按录音需要longpress事务，，，，，松开发送需要touchend事务，，，，，上滑作废发送需要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. 首先界说录音的数据结构：

旧版的小程序录音接口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: this.handleRecordStart
          }, //与录音相关的数据结构
    recorderManager: wx.getRecorderManager(), //录音治理上下文    
    startPoint: {}, //纪录长按录音最先点信息,用于后面盘算滑动距离。。。
          sendLock: true, //发送锁，，，，，当为true时上锁，，，，，false时解锁发送},

2.2. 监听录音stop

onLoad(){
  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 = {//修改录音数据结构，，，，，此时录音按钮样式会爆发转变。。。
                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: "松开手指,作废发送",
                  icon: "none",
                  duration: 60000
            });
            this.sendLock = true;//触发了上滑作废发送，，，，，上锁
          } else {
            wx.showToast({
                  title: "正在录音，，，，，上划作废发送",
                  icon: "none",
                  duration: 60000
            });
            this.sendLock = false;//上划距离缺乏，，，，，依然可以发送，，，，，不上锁
          }
    },
  }

以上就是这篇小程序实现长按录音，，，，，上划作废发送 ，，，，，需要更多小程序开发内容，，，，，可以审查本网站，，，，，谢谢。。。

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。。。通过拖拽、拼接？？？
？榻峁剐〕绦蛏坛且趁，，，，，所看即所得，，，，，只需要美工就能做出细腻商城。。。更多小程序请审查：小程序市肆