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

袁小威 2019-07-26 共7597人围观
小程序 
简介在做微信小程序的过程中，总是会冒出那么些没接触过的功能，然后就开始各种踩坑，最近要做一个长按录音的功能，大致需求为长按录音，垂直滑动则取消发送。

        在做微信小程序的过程中，总是会冒出那么些没接触过的功能，然后就开始各种踩坑，最近要做一个长按录音的功能，大致需求为长按录音，垂直滑动则取消发送。

        废话不多说，直接上代码。

        服务端在【基于avconv转码工具的微信小程序语音识别功能实现~】中已经说到过，这里就不再说明了。

        前端页面部分，主要需要三个事件，长按录音绑定longpress事件，松开发送绑定touchend事件，滑动取消发送绑定touchmove事件，代码如下：

    

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

        

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

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

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

        


        至此，核心功能部分算是完成了，一些效果和样式个人根据自己需要去完成~

        袁小威最新开发的微信小程序【垃圾分类引导指南】最新版已经上线了，新增了城市属性，欢迎大家扫码体验~

        

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

很赞哦！ (0)

赏

上一篇： 微信小程序之HTML富文本解析

下一篇： 关于启动php-fpm报错【ERROR: unable to bind listening socket for address '127.0.0.1:9000': Address already】的解决方案

热度榜

标签云

微信公众号

    最新内容会在公众号首发哟☄⊙ω⊙)☄

    袁小威微信公众号

博客小程序

    小程序版来了，随时随地都可以看有木有☄⊙ω⊙)☄

    袁小威博客小程序