问题描述:
微信小程序项目,长按录制音频,手松开录制结束。长按时确实可以出发bindtouchstart 但是手松开之后不触发bindtouchend
从网上看很多说把bindtouchend换成bindtouchcancel。但是我这边依然不行
总感觉只要手长按页面后再松开页面还是那样很奇怪。去个厕所,回来没想通。回家睡觉,忽然想起一个点。我触发touchstart后,给当页变量赋值,会刷新静态页。会不会跟这个有关系呢。
大早晨起个大早,来公司试试,果然去掉this.setDate({...........})之后就触发bindtouchend了。找到问题点了,解决就好办了。本来赋值是为了样式显示,既然不行就像个别的 样式显示的方法呗。
整体代码如下:
xml:
<view bindtouchstart="startRecord" bindtouchend="stopRecord" bindtouchcancel="stopRecord" bindtouchmove="handleTouchMove" class='recordContent r2' hover-class="r1">
<image class="recordIcon" src='../../image/voice.png' mode="widthFix"></image>
<view style="color:#888;">按住说话</view>
</view>
css:
.recordContent{
width: 420rpx;
height: 80rpx;
border-radius: 50rpx;
margin: 0 auto;
padding: 9rpx 30rpx;
}
.r2{
background: #fff;
box-shadow:0 0 10rpx 2rpx #ccc;
}
.r1{
background: #40dc61;
box-shadow:0 0 10rpx 2rpx #ccc;
color: #fff;
}
js:
const recorderManager = wx.getRecorderManager();
import { uploadVoiceUrl } from '../../api/url.js';
/**
* 页面的初始数据
*/
data: {
is_clock: true,//当is_clock为true时发送,为false时不发送:
},
// 开始录制
startRecord() {
console.log("kaishilll")
let that = this,
startObj = {
duration: 60000,
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 48000,
format: 'mp3',
frameSize: 50
}
//录音开始
recorderManager.start(startObj);
},
stopRecord() {
console.log("jieshu l ")
// clearInterval(recordTimeInterval);
//停止录音事件
recorderManager.stop();
console.log(this.data.is_clock)
if (this.data.is_clock == true) {
var that = this
//对停止录音进行监控
recorderManager.onStop((res) => {
//对录音时长进行判断,少于2s的不进行发送,并做出提示
if (res.duration < 1000) {
wx.showToast({
title: '录音时间太短,请长按录音',
icon: 'none',
duration: 1000
})
} else {
wx.showLoading({
title: '保存音频中',
})
console.log(res)
let duration = res.duration
console.log(res.tempFilePath)
//上传录制的音频
wx.uploadFile({
url: uploadVoiceUrl,
filePath: res.tempFilePath,
name: 'voice',
success: function (res1) {
console.log(res1)
if (res1.statusCode == 413) {
wx.showToast({
icon: "none",
title: '音频文件太大!',
})
return;
}
if (res1.statusCode == 200) {
wx.hideLoading()
var dd = JSON.parse(res1.data);
console.log(dd.url)
wx.navigateTo({
url: '../../pages/fix/voice?url=' + dd.url + "&duration=" + duration,
})
} else {
wx.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
}
}
})
}
})
}
},
/**
* 滑动取消
*/
handleTouchMove: function (e) {
console.log("取消")
this.setData({
is_clock: false//设置为不发送语音
})
},