- 当前 Bug 的表现(可附上截图)
有两个页面都有一个长按飞起的动画, 但是从一个页面有这个动画的页面 后退到 也有动画的页面,再长按动画就不执行了
- 预期表现
- 复现路径
- 提供一个最简复现 Demo
<!-- 小鱼按钮 -->
<button catch:touchstart="startRecode"
catch:touchend="endRecode"
catch:touchcancel="endRecode"
class='right-bottom-img'
hover-class="none" id="fish_box">
<image animation="{{animationData}}"
mode="aspectFit"
class='voice_fish'
src="https://res.botbrain.ai/zhiyu/img/voice_fish.png"
></image>
</button>
// components/startRecord/components/fishBtn/fishBtn.js
const app = getApp();
// 微信同声传译
const WechatPlugin = requirePlugin("WechatSI");
let manager = WechatPlugin.getRecordRecognitionManager();
const voice = wx.createInnerAudioContext();
let timer,siri_timer,is_start=false,start_time=0;
// let tempFilePath ; //文件临时路径
Component({
/**
* 组件的属性列表
*/
properties: {
show_btns: Boolean,
start_record: {
type: Boolean,
value: false,
observer: 'stop_record'
},
text_result: {
type: Object,
value: {
question: '',
result: '',
link: '',
isPlay: false
},
observer: (newVal) => {
if (newVal.isPlay && newVal.result){
WechatPlugin.textToSpeech({
lang: "zh_CN",
content: newVal.result,
success: function (res) {
console.log("filename", res.filename)
voice.src = res.filename;
voice.obeyMuteSwitch = false;
voice.play();
},
fail: function (res) {
console.log("filename err", res)
}
})
}
}
}
},
/**
* 组件的初始数据
*/
data: {
show_tip: 0,
siri_hide: true, // 没有在录音
radomheight: [],
record_status: 0,
animationData: ''
},
// 组件实例进入页面节点树时执行
attached() {
let that = this;
// 首次录音提示
wx.getStorage({
key: 'voice_tip',
fail(){
that.setData({
show_tip: 1
})
setTimeout(() => {
that.close_tip();
}, 5000)
}
})
// 调起录音权限
wx.authorize({
scope: 'scope.record',
success() {
console.log("录音授权成功");
//第一次成功授权后 状态切换为1
that.setData({
record_status: 1
})
}
})
// 初始化语音识别回调
this.initRecord();
},
ready(){
let screen_width = wx.getSystemInfoSync().windowWidth;
let screen_height = wx.getSystemInfoSync().windowHeight;
let move_x = (screen_width - 58 / 2) / 2 - 30;
let move_y = screen_height - 175 / 2 - 20;
this.data.move_x = move_x;
this.data.move_y = move_y;
this.init_animation();
this.myradom();
},
detached(){
voice.stop();
},
/**
* 组件的方法列表
*/
methods: {
init_animation(){
console.log('ready wx.createAnimation')
this.animation = wx.createAnimation({
duration: 450,
timingFunction: 'ease-in-out'
});
},
/**
* 初始化语音识别回调
* 绑定语音播放开始事件
*/
initRecord: function() {
let that = this;
// 成功开始录音识别
manager.onStart = function () {
// 关闭技能列表
that.triggerEvent('switch_component', 'voice_btns');
that.setData({
siri_hide: false
})
// 小鱼飞起
that.onstart_recode();
// 显示语音波浪线
siri_timer = setInterval(() => {
that.myradom()
}, 420)
}
//有新的识别内容返回,则会调用此事件
manager.onRecognize = (res) => {
console.log(res,'有新的识别内容返回');
}
// 识别结束事件
manager.onStop = (res) => {
console.log(res, '停止录音');
// that.setData({
// tempFilePath: res.tempFilePath
// })
that.onend_recode();
that.setData({
siri_hide: true
})
wx.showLoading({
title: '识别中...',
mask: true
})
clearInterval(siri_timer);
if (start_time !== 0) {
// that.triggerEvent('no_understand');
that.recodeUpload(res.tempFilePath);
return;
}
}
// 识别错误事件
manager.onError = (res) => {
console.log(res,'识别错误事件');
that.onend_recode();
start_time = 0;
that.setData({
siri_hide: true
})
clearInterval(siri_timer);
that.triggerEvent('no_understand');
// -30011 正在录音
if(res.retcode === -30011){
manager.stop();
}
}
// 语音播放开始事件
wx.onBackgroundAudioPlay();
},
// 开始录音
startRecode(e) {
let that = this;
voice.stop();
if (is_start) {
console.warn("正在录音");
return
}
start_time = e.timeStamp;
timer = setTimeout(()=>{
if(that.data.record_status===0){
that.get_record_authorize();
return;
}
that.triggerEvent('handle_start_record',true);
manager.start({
lang: 'zh_CN'
})
is_start = true;
},300)
},
// 录音结束
endRecode: function(e) { // 结束录音
console.log(is_start,'endRecode')
// 没有录音的时候返回 防止重复触发stop函数
if (is_start) {
clearTimeout(timer);
manager.stop();
is_start = false;
}
// 按下抬起时间小于0.6秒
if (e.timeStamp - start_time <= 300){
clearTimeout(timer);
// 在首页
if(!this.data.show_btns){
// wx.navigateTo({
// url: '/pages/voice/voiceNavigation/voiceNavigation'
// })
}else{
wx.showToast({
title: '说话时间太短',
icon: 'none',
mask: true
})
setTimeout(() => {
wx.hideToast();
}, 1000)
}
}
},
// 关闭录音弹框
stop_record(newVal){
// console.log(this.data,'this.data')
voice.stop();
if(!newVal && !this.data.siri_hide){
this.init_animation();
this.initRecord();
this.onend_recode();
// this.setData({
// siri_hide: true
// })
clearInterval(siri_timer);
manager.stop();
}
},
// 上传录音文件
recodeUpload(path) {
let that = this;
wx.uploadFile({
url: app.globalData.API_URL + '/interaction/v1/' + app.globalData.appid + '/skills/fileRealize',
filePath:path,
name: 'file',
header: {
'content-type': 'multipart/form-data'
},
formData: {
uid: app.globalData.uid
},
success(res) {
if (!res.data) return;
let response = JSON.parse(res.data);
console.log(response, 'recodeUpload');
// -15 说的话识别为''空
if (response.code === -15) {
that.triggerEvent('switch_component', 'default_com');
return;
}
// 异常处理
if (response.code != 0) {
// 没有识别出来
if(response.data){
that.triggerEvent('handle_text_result', {
question: response.data.msg,
result: '小鱼还小,不明白你刚才讲的话,请换种问法',
link: '',
isPlay: true
})
}else{
that.triggerEvent('no_understand');
}
return;
};
console.log(response, 'response-------');
that.triggerEvent('has_result', response.data);
},
fail(e) {
that.triggerEvent('no_understand')
},
complete() {
wx.hideLoading();
}
});
},
// 我的随机数
myradom: function() {
const that = this;
var _radomheight = [];
for (var i = 0; i < 22; i++) {
// +1是为了避免为0
_radomheight[i] = (200 * Math.random().toFixed(2)) + 10;
}
that.setData({
radomheight: _radomheight
});
},
// 小鱼飞起
onstart_recode() {
console.log(this.data.siri_hide,'小鱼飞起')
let move_x = this.data.move_x;
let move_y = this.data.move_y;
this.animation.translate3d(-move_x, -move_y, 0).step();
this.setData({
animationData: this.animation.export()
})
},
// 小鱼回来
onend_recode() {
this.animation.translate3d(0, 0, 0).step()
this.setData({
animationData: this.animation.export()
})
},
// 切换显示的组件
switch_component() {
this.triggerEvent('switch_component', 'voice_input');
},
close_tip() {
this.setData({
show_tip: false
})
wx.setStorage({
key: 'voice_tip',
data: 1
})
},
// 调起录音授权
get_record_authorize(){
let that = this;
wx.authorize({
scope: 'scope.record',
success() {
console.log("录音授权成功");
//第一次成功授权后 状态切换为2
that.setData({
record_status: 1
})
},
fail(){
wx.showModal({
title: '提示',
content: '您未授权录音,功能将无法使用',
showCancel: true,
confirmText: "授权",
confirmColor: "#52a2d8",
success: function (res) {
if (res.confirm) {
//确认则打开设置页面(重点)
wx.openSetting({
success: (res) => {
console.log(res.authSetting);
if (!res.authSetting['scope.record']) {
//未设置录音授权
that.setData({
record_status: 0
})
} else {
//第二次才成功授权
console.log("设置录音授权成功");
that.setData({
record_status: 1
})
}
},
fail: function () {
console.log("授权设置录音失败");
}
})
} else if (res.cancel) {
console.log("cancel");
}
},
fail: function () {
console.log("openfail");
}
})
}
})
}
}
})
解决了,解决办法是页面显示的时候重新渲染,隐藏的时候销毁组件
我用你的代码做了个简单的片段,删掉了录音相关功能,问题并没有复现。所以我推测是录音出了什么问题
wechatide://minicode/z0HOY8mG7w3R
谢谢🙏,我在看一下,感谢
一大团大团的代码。。耐心下降30%
以后尽量整理成代码片段 , 再次感谢
解决了,解决办法是页面显示的时候重新渲染,隐藏的时候销毁组件
语音组件吗?
你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
苹果6s , 版本6.7.2 , 你可以搜索公众号EduMax 看一下
看没用。。要跑代码才知道原因。。根据你的描述,我觉得有两种可能
1、动画实例没了
2、动画没还原
我把代码粘贴了一下,您看一下,谢谢
最好能弄成代码片段,要跑起来才能调试。。首先有个问题哦,this.data.move_x move_y 这俩东西请不要这么使用,直接this.move_x 比较好