当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序实现长按录音,上划取消发送

小程序实现长按录音,上划取消发送

2018-08-21 10:54 来源: 霸界科技

摘要:使用mpvue开发小程序时,可能需要用到录音功能,可以通过使用"长按录音松开发送,上划取消发送"来实现小程序录音功能。以下为大家整理官方文档...

期权保本理财
  使用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;//上划距离不足,依然可以发送,不上锁
 
  }
 
  },
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088