在微信小程序中,我想做一个搜索功能,这个搜索功能支持语音输入,我想在语音输入后,直接调用输入框的提交函数,怎么操作?
(也就是按住语音,语音可以直接反馈到输入框,当前需要再去点击输入框的提交(或者软键盘)后,才能提交搜索。我想语音录入,反馈到输入框,立即自动搜索)
其中:
js代码:
const app = getApp()
//引入插件:微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
Page({
data: {
//语音
recordState: false, //录音状态
content:'',//内容
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//识别语音
this.initRecord();
},
//识别语音 -- 初始化
initRecord: function () {
const that = this;
// 有新的识别内容返回,则会调用此事件
manager.onRecognize = function (res) {
console.log(res)
}
// 正常开始录音识别时会调用此事件
manager.onStart = function (res) {
console.log("成功开始录音识别", res)
}
// 识别错误事件
manager.onError = function (res) {
console.error("error msg", res)
}
//识别结束事件
manager.onStop = function (res) {
console.log('..............结束录音')
console.log('录音临时文件地址 -->' + res.tempFilePath);
console.log('录音总时长 -->' + res.duration + 'ms');
console.log('文件大小 --> ' + res.fileSize + 'B');
console.log('语音内容 --> ' + res.result);
if (res.result == '') {
wx.showModal({
title: '提示',
content: '听不清楚,请重新说一遍!',
showCancel: false,
success: function (res) {}
})
return;
}
var text = res.result;
text = text.replace(/\,|\。|\?|\,|\.|\?/g," ");
that.setData({
content: text
})
that.formSubmit();
}
},
//语音 --按住说话
touchStart: function (e) {
this.setData({
recordState: true, //录音状态
content:"正在聆听...",
})
// 语音开始识别
manager.start({
lang: 'zh_CN',// 识别的语言,目前支持zh_CN en_US zh_HK sichuanhua
})
},
//语音 --松开结束
touchEnd: function (e) {
this.setData({
recordState: false
})
// 语音结束识别
manager.stop();
},
//执行点击事件
formSubmit: function (e) {
//声明当天执行的
var that = this;
var formData = e.detail.value;
//显示搜索中的提示
wx.showLoading({
title: '搜索中',
icon: 'loading'
})
//向搜索后端服务器发起请求
wx.request({
//URL
url: 'https://XXX.com/search.php?keyword=' + formData,
//发送的数据
data: formData,
//请求的数据时JSON格式
header: {
'Content-Type':'application/json'
},
//请求成功
success: function (res) {
//控制台打印(开发调试用)
console.log(res.data)
//把所有结果存进一个名为re的数组
that.setData({
re: res.data,
})
//搜索成功后,隐藏搜索中的提示
wx.hideLoading();
}
})
},
// 获取滚动条当前位置
onPageScroll: function (e) {
console.log(e)
if (e.scrollTop > 100) {
this.setData({
floorstatus: true
});
} else {
this.setData({
floorstatus: false
});
}
},
//回到顶部
goTop: function (e) { // 一键回到顶部
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
})
}
},
})
wxml部分代码(部分)
<form bindsubmit="formSubmit">
<input type="text" value="{{content}}" class="search_input" placeholder='你要找什么呢?' bindconfirm="formSubmit"/>
</form>
<view class="button-z">
<button class="btn1" bindtouchstart="touchStart" bindtouchend="touchEnd">
<image src='../../images/icon/yys.png' class='btnImg'></image>
<text wx:if="{{recordState == false}}"></text>
<text wx:else></text>
</button>
</view>
<cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
<cover-image src="../../images/icon/yyn.png"></cover-image>
<cover-view>开始语音</cover-view>
</cover-view>
</view>
js我是用 that.formSubmit();调用的提交函数,但是报错:
如果改成:
this.formSubmit();
则报错:
//生成formData
var formData = new FormData();
//需要什么数据就往里添加
formData.append("key","value");
调用函数的时候把formData传过去就好了
换成this试试
js代码中的这句:
不知道错在哪里。