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(); } } },