wx.getUserInfo(object)
在微信小程序的官方文档中有提出，此接口有调整，使用该接口将不再出现授权弹窗，请使用<button open-type=”getUserInfo”></button>引导用户主动进行授权，我把授权放在了用户第一次操作的按钮上。
在用户第一次登陆的时候，渲染授权按钮。当storage中已经存有openid的时候，渲染录音按钮
<!-- 用户授权按钮 -->
<button class=\'mike\' wx:if="{{userInfo}}" hover-class=\'curStyle\' open-type=\'getUserInfo\' bindgetuserinfo=\'login\'></button>
<!-- 录音按钮 -->
<button class=\'mike\' wx:if="{{record}}" hover-class=\'curStyle\' bindtouchstart=\'startHandel\' bindtouchend=\'endHandle\'></button>
交互逻辑：当用户按下按钮时，显示loading提示框（开始录音），松开时，隐藏loading并开始正在努力搜索的提示框，上传录制的音频成功，跳转到搜索结果页。
绑定的事件：bindtouchstart（手指触摸动作开始）和bindtouchend（手指触摸动作结束）。当组件触发事件时，会收到一个事件对象，其中有timeStamp，事件生成时的事件戳。两个事件分别记录开始录音时间startTime和结束录音时间endTime，因为用户不知道长按录音还是仅点击开始录音，当用户短按的时候即endTime - startTime<350时，提示说话时间太短，来引导长按才是开始录音
录音管理器getRecorderManager
用到getRecorderManager的start开始录音方法和stop停止录音方法，比较坑的是用到start方法时，第一次录音的用户会自动弹出要使用你的录音功能，是否允许？这样会影响到识别松开按钮这个动作，所以我用一个recordStatus录音授权的状态来控制。
当recordStatus为false时，只向用户发起录音的请求，而不做其他的操作
当recordStatus为true时，按下按钮开始录音，松开按钮正在努力搜索......
//按下按钮
startHandel: function (e) {
var that = this;
var startTime = e.timeStamp;
var recordStatus = that.data.recordStatus;
if (!recordStatus){
wx.getSetting({
success(res) {
if (!res.authSetting[\'scope.record\']) {
wx.authorize({
scope: \'scope.record\',
success() {
recordStatus=true;
that.setData({
recordStatus: recordStatus
})
}
})
}
}
})
}else{
//记录开始录音时间
that.setData({
startTime: startTime
})
wx.showLoading({
title: \'开始录音\',
mask: true
})
recorderManager.onStart(() => {
console.log(\'recorder start\')
})
const options = {
duration: 10000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 96000,
format: \'mp3\',
frameSize: 50
}
recorderManager.start(options);
}
},
//松开按钮
endHandle: function (e) {
var that = this;
var recordStatus = that.data.recordStatus;
console.log(recordStatus);
if (recordStatus){
var endTime = e.timeStamp;
var speakTime = endTime-that.data.startTime;
//如果录音时间太短，提示
if (speakTime < 350 ){
wx.showToast({
title: \'说话时间太短\',
icon: \'none\',
})
recorderManager.stop();
}else{
wx.hideLoading();
wx.showToast({
title: \'正在努力搜索\',
icon: \'loading\',
duration: 6000,
mask: true
})
recorderManager.onStop((res) => {
const { tempFilePath } = res;
//上传录制的音频
wx.uploadFile({ url:\'https://cookbook.cityshop.com.cn/index.php?r=product/tune\',
filePath: tempFilePath,
name: \'viceo\',
success: function (res) {
wx.hideToast();
//如果为空
if (res.statusCode!=500){
that.wxSearchAddHisKey(res.data);
}
if (speakTime >= 350){
wx.navigateTo({
url: \'../result/result?searchValue=\' + res.data
})
}
}
})
})
//触发录音停止
recorderManager.stop();
}
}
},
请发表评论