這篇“小程序聊天室功能怎么實(shí)現(xiàn)”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“小程序聊天室功能怎么實(shí)現(xiàn)”文章吧。
創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站與策劃設(shè)計(jì),比如網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:比如等地區(qū)。比如做網(wǎng)站價(jià)格咨詢:028-86922220
首先在頭部定義 ...
1.index.js 使用的是微信自帶的api,首先在頭部定義一個(gè) const recorderManager = wx.getRecorderManager()//獲取全局唯一的錄音管理器const createInnerAudioContext = wx.createInnerAudioContext()//由于使用的是wx.getRecorderManager錄音,所以在播放錄音的時(shí)候需要使用此api播放錄音 // 需要用戶同意授權(quán)錄音 方法 _checkRecordAuth(cbOk, cbError) { wx.getSetting({ success: (res) => { if (!res.authSetting['scope.record']) { wx.authorize({ scope: 'scope.record', success: (res) => { // 用戶已經(jīng)同意小程序使用錄音功能,后續(xù)調(diào)用 wx.startRecord 接口不會彈窗詢問 console.log('同意', res); }, fail: res => { console.log('拒絕', res); cbError && cbError(); } }) } else { cbOk && cbOk(); } } }) }, // 長按 _longClickVoicebtn(e) { var that = this; that._checkRecordAuth( () => { //調(diào)出取消彈窗 that.setData({ text: '松開 發(fā)送', isShowVoice1: true, singleVoiceTimeCount: 0, duration: "00:00", is_clock: true,//長按時(shí)應(yīng)設(shè)置為true,為可發(fā)送狀態(tài) startPoint: e.touches[0],//記錄觸摸點(diǎn)的坐標(biāo)信息 }); //開始錄音 recorderManager.start(options); recorderManager.onStart(()=>{ let date = new Date(); let s = date.getTime();//注意:使用的是當(dāng)前的時(shí)間戳 - 時(shí)長 console.log(s); //記錄時(shí)長 that.data.timer = setInterval(() => { let voiceTimeCount = (new Date()).getTime() - s voiceTimeCount = voiceTimeCount/1000 that.setData({ duration: formatSecond(voiceTimeCount), singleVoiceTimeCount: voiceTimeCount }) }, 100); }) }, (res) => { //錄音失敗 console.error('錄音拒絕授權(quán)'); clearInterval(this.data.timer); this._endRecord(); wx.showModal({ title: '您未授權(quán)語音功能', content: '暫時(shí)不能使用語音', confirmText: '去設(shè)置', success: res => { if (res.confirm) { wx.openSetting({ success: res => { if (res.authSetting['scope.record']) { } } }); } else { } } }); }); },// 移動 如果移動到tabar上面了,就顯示 松開手指,取消發(fā)送 _sendVoiceMoveEvent(e) { //計(jì)算距離,當(dāng)滑動的垂直距離大于 tabBarHeight 時(shí),則取消發(fā)送語音 if (Math.abs(e.touches[0].clientY - this.data.startPoint.clientY) > this.data.tabBarHeight) { this.setData({ is_clock: false,//設(shè)置為不發(fā)送語音 isShowVoice2: true, isShowVoice1: false, cance: 1, //已取消 }) } else { this.setData({ is_clock: true,//設(shè)置為不發(fā)送語音 isShowVoice2: false, isShowVoice1: true, cance: 0, //不取消 }); } }, // 松開div 錄音結(jié)束 _sendVoiceMoveEndEvent(e) { console.log('松開div 錄音結(jié)束') var that = this clearInterval(this.data.timer); that.setData({ text: '按住 說話', isShowVoice1: false, isShowVoice2: false, singleVoiceTimeCount: 0, duration: "00:00" }); recorderManager.stop()//結(jié)束錄音 //對停止錄音進(jìn)行監(jiān)控 recorderManager.onStop((res) => { //此時(shí)先判斷是否需要發(fā)送錄音 if (that.data.is_clock == true) { console.log('發(fā)送語音') //對錄音時(shí)長進(jìn)行判斷,少于2s的不進(jìn)行發(fā)送,并做出提示 if (res.duration < 1000) { that.showToast("錄音時(shí)間太短,請長按錄音"); } else { //進(jìn)行語音發(fā)送 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) }) }) } } }) }, 2.wxml中,給view添加上 |
3、index.js 播放錄音
createInnerAudioContext.autoplay = truecreateInnerAudioContext.src = src //src就是傳的播放地址
以上就是關(guān)于“小程序聊天室功能怎么實(shí)現(xiàn)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。