Vue微信SDK 录音功能

该博客详细介绍了在Vue项目中实现微信环境下录音功能的解决方案,包括如何处理微信SDK初始化延迟问题以及解决iOS设备上长按录音的异常行为。在非微信环境中,为用户提供模拟录音的假按钮,确保用户体验的一致性。
摘要由CSDN通过智能技术生成

需求:
微信下长按按钮,弹出正在录音gif,上传录音;
在非微信下,正常显示录音gif,即做一个假的录音按钮。
在微信下,因为项目中会加载一个外部js,有一定几率会阻塞wx的初始化,所以如果在用户点击按钮时,wx sdk没有初始化,也显示假的录音按钮。

将tourch和mouse写绑定在一个button中 在IOS下 会出现一次录音 取消长按后再执行一次 startRecord -> stopRecord问题,所以将移动端和PC端按钮分开显示。

<button v-if="!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)" id="recrd_btn_mobile" class="record-button" @touchstart="startRecord" @touchend="stopRecord"></button>
<button v-else id="recrd_btn_pc" class="record-button"  @mousedown="startRecord" @mouseup="stopRecord"></button>
// 利用 _this.oRecordInfo.useWxRecord 来决定是否为假按钮 值可根据情况修改
touchmoveDefault: function (e) {
   
  e.preventDefault();
},
startRecord: function
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值