小程序仿微信聊天按住说话功能

最新推荐文章于 2024-09-06 03:24:50 发布

WWWWWWWWolf

最新推荐文章于 2024-09-06 03:24:50 发布

阅读量3.8k

点赞数 1

文章标签： javascript java 移动开发 ViewUI

原文链接：https://juejin.im/post/5ba49bab5188255c672eac9e

版权

本文介绍如何在小程序中实现类似微信聊天的按住说话功能，包括录音授权判断、上滑取消发送、松开发送的逻辑处理，以及录音动画的实现。通过解决快速点击导致的录音bug，采用延时策略避免过多变量传递。此外，文章还讨论了判断说话时间过短的两种方案，并提出了模拟音量变化的录音动画技巧。

摘要由CSDN通过智能技术生成

小程序仿微信聊天按住说话功能

实现：按住说话有录音动画，上滑可取消发送，松开发送录音

录音授权判断

# .wxml
<view class="btn {
    {touchBtn?'hoverBtn':''}}" catch:touchend="onTouchEnd" bind:touchstart="record"
bind:longpress="onLongpress" catch:touchmove="onTouchMove">{
   {touchBtn?'松开 结束':'按住说话'}}</view>
复制代码

// # ontouchstart
record() {
    const scopeRecord = app.globalData.scopeRecord;
    // 无授权时获取授权
    if (!scopeRecord) {
    	getScopeRecord();
    	return;
    }
    this.data.touched = true;
    // 触发父组件录音事件，由父组件调用录音API
    this.triggerEvent('startRecord')
},
复制代码

上滑取消发送，利用滑动距离判断是否取消，

onTouchMove(e) {
    if (e.touches[0].clientY < 520) {
        // # 取消发送
    	this.data.cancelRecord = true;
    	wx.showToast({
            title: '松开，取消发送',
            duration: 10000,
            image: '/page/common/resource/image/cancel.png'
    	})
    } else {
        //