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

使用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步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序请查看:小程序商店


【本站声明】
  1、本站文章中所选用的图片及文字来源于网络以及用户投稿,由于未联系到知识产权人或未发现有关知识产权的登记,如有知识产权人并不愿意我们使用,如果有侵权请立即联系。
  2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



上/下篇
  • 小程序转发图片尺寸设置,对话框微信小程序图片尺寸

  • 转转小程序分包加载实例

换一换相关推荐
精选内容
热点精选