千家信息网

小程序聊天室功能怎么实现

发表于:2024-10-16 作者:千家信息网编辑
千家信息网最后更新 2024年10月16日,这篇"小程序聊天室功能怎么实现"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"小程序聊
千家信息网最后更新 2024年10月16日小程序聊天室功能怎么实现

这篇"小程序聊天室功能怎么实现"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"小程序聊天室功能怎么实现"文章吧。

首先在头部定义 ...


1.index.js 使用的是微信自带的api,首先在头部定义一个

const recorderManager = wx.getRecorderManager()//获取全局唯一的录音管理器const createInnerAudioContext = wx.createInnerAudioContext()//由于使用的是wx.getRecorderManager录音,所以在播放录音的时候需要使用此api播放录音
  // 需要用户同意授权录音 方法  _checkRecordAuth(cbOk, cbError) {    wx.getSetting({      success: (res) => {        if (!res.authSetting['scope.record']) {          wx.authorize({            scope: 'scope.record',            success: (res) => {              // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问              console.log('同意', res);            }, fail: res => {              console.log('拒绝', res);              cbError && cbError();            }          })        } else {          cbOk && cbOk();        }      }    })  },  // 长按  _longClickVoicebtn(e) {    var that = this;      that._checkRecordAuth(        () => {        //调出取消弹窗        that.setData({          text: '松开 发送',          isShowVoice1: true,          singleVoiceTimeCount: 0,          duration: "00:00",          is_clock: true,//长按时应设置为true,为可发送状态          startPoint: e.touches[0],//记录触摸点的坐标信息        });        //开始录音        recorderManager.start(options);        recorderManager.onStart(()=>{          let date = new Date();          let s = date.getTime();//注意:使用的是当前的时间戳 - 时长          console.log(s);          //记录时长          that.data.timer = setInterval(() => {            let voiceTimeCount = (new Date()).getTime() - s            voiceTimeCount = voiceTimeCount/1000            that.setData({              duration: formatSecond(voiceTimeCount),              singleVoiceTimeCount: voiceTimeCount            })          }, 100);        })             },       (res) => {        //录音失败        console.error('录音拒绝授权');        clearInterval(this.data.timer);        this._endRecord();        wx.showModal({          title: '您未授权语音功能',          content: '暂时不能使用语音',          confirmText: '去设置',          success: res => {            if (res.confirm) {              wx.openSetting({                success: res => {                  if (res.authSetting['scope.record']) {                  }                }              });            } else {            }          }        });      });  },// 移动 如果移动到tabar上面了,就显示 松开手指,取消发送  _sendVoiceMoveEvent(e) {      //计算距离,当滑动的垂直距离大于 tabBarHeight 时,则取消发送语音      if (Math.abs(e.touches[0].clientY - this.data.startPoint.clientY) > this.data.tabBarHeight) {        this.setData({          is_clock: false,//设置为不发送语音          isShowVoice2: true,          isShowVoice1: false,          cance: 1,  //已取消        })      } else {        this.setData({          is_clock: true,//设置为不发送语音          isShowVoice2: false,          isShowVoice1: true,          cance: 0,  //不取消        });    }  },  // 松开div 录音结束  _sendVoiceMoveEndEvent(e) {    console.log('松开div 录音结束')    var that = this    clearInterval(this.data.timer);      that.setData({        text: '按住 说话',        isShowVoice1: false,        isShowVoice2: false,        singleVoiceTimeCount: 0,        duration: "00:00"      });      recorderManager.stop()//结束录音      //对停止录音进行监控      recorderManager.onStop((res) => {                //此时先判断是否需要发送录音        if (that.data.is_clock == true) {          console.log('发送语音')          //对录音时长进行判断,少于2s的不进行发送,并做出提示          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)              })            })          }        }      })  },

2.wxml中,给view添加上

3、index.js 播放录音


createInnerAudioContext.autoplay = truecreateInnerAudioContext.src = src //src就是传的播放地址

以上就是关于"小程序聊天室功能怎么实现"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。

0