Shulou(Shulou.com)05/31 Report--

The knowledge points of this article "how to achieve Mini Program chat room function" are not quite understood by most people, so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Mini Program chat room function how to achieve" article.

First of all, define it in the head.

1.index.js uses the api that comes with Wechat. First define one in the header

Const recorderManager = wx.getRecorderManager () / / get the globally unique recording manager const createInnerAudioContext = wx.createInnerAudioContext () / / because you are using wx.getRecorderManager recording Therefore, when playing a recording, you need to use this api to play the recording / / requires the user to agree to authorize the recording method _ checkRecordAuth (cbOk, cbError) {wx.getSetting ({success: (res) = > {if (! res.authSetting ['scope.record']) {wx.authorize ({scope:' scope.record') Success: (res) = > {/ / users have agreed to use the recording function for Mini Program Subsequent calls to the wx.startRecord API will not pop up to ask console.log ('agree', res) }, fail: res = > {console.log ('reject', res); cbError & & cbError ();})} else {cbOk & & cbOk ();})}, / / long press _ longClickVoicebtn (e) {var that = this That._checkRecordAuth () = > {/ / call up and cancel the pop-up window that.setData ({text: 'release send', isShowVoice1: true, singleVoiceTimeCount: 0, duration: "00:00", is_clock: true,// long on time should be set to true For the deliverable status startPoint: e.touches [0], / / record the coordinate information of the touch point}) / / start recording recorderManager.start (options); recorderManager.onStart () = > {let date = new Date (); let s = date.getTime (); / / Note: current timestamp-duration console.log (s) is used / / recording duration that.data.timer = setInterval (() = > {let voiceTimeCount = (new Date ()) .getTime ()-s voiceTimeCount = voiceTimeCount/1000 that.setData ({duration: formatSecond (voiceTimeCount), singleVoiceTimeCount: voiceTimeCount})}, 100) })}, (res) = > {/ / recording failed console.error ('recording denied authorization'); clearInterval (this.data.timer); this._endRecord () Wx.showModal ({title: 'you do not authorize voice feature', content: 'voice cannot be used for the time being', confirmText:'go to set' Success: res = > {if (res.confirm) {wx.openSetting ({success: res = > {if (res.authSetting ['scope.record']) {}) } else {});}) }, / / move if it moves to tabar, it will show release finger, cancel sending _ sendVoiceMoveEvent (e) {/ / calculate the distance, when the sliding vertical distance is greater than tabBarHeight Cancel sending voice if (Math.abs (e.touches [0] .clientY-this.data.startPoint.clientY) > this.data.tabBarHeight) {this.setData ({is_clock: false,// is set not to send voice isShowVoice2: true, isShowVoice1: false, cance: 1) / / cancelled})} else {this.setData ({is_clock: true,// is set not to send voice isShowVoice2: false, isShowVoice1: true, cance: 0, / / do not cancel}) }, / / release div recording end _ sendVoiceMoveEndEvent (e) {console.log ('release div recording end') var that = this clearInterval (this.data.timer); that.setData ({text: 'hold down and speak', isShowVoice1: false, isShowVoice2: false, singleVoiceTimeCount: 0, duration: "00:00"}) RecorderManager.stop () / / end recording / / A pair of stop recording for monitoring recorderManager.onStop ((res) = > {/ / at this point, first determine whether you need to send recording if (that.data.is_clock = = true) {console.log ('send voice') / / A pair of recording duration is judged, and those less than 2s will not be sent And make a hint of if (res.duration

< 1000) { that.showToast("录音时间太短，请长按录音"); } else { //进行语音发送 const { tempFilePath, duration, fileSize } = res; wx.showLoading({ title: '上传中...', mask: true }) uploadFile(tempFilePath).then(res =>

{console.log (res) This._sendMessage ({commentContent: res, orgId: that.data.orgId, resId: that.data.childId, commentContentType: "audio", fileSize: fileSize FileTime: parseInt (duration/1000)})}

In 2.wxml, add to view

3. Index.js plays the recording

CreateInnerAudioContext.autoplay = truecreateInnerAudioContext.src = src / / src is the playback URL

The above is about the content of this article on "how to achieve the function of Mini Program chat room". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.