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

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

创新互联公司是一家专注于网站设计制作、成都做网站与策划设计,比如网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:比如等地区。比如做网站价格咨询:028-86922220

首先在头部定义 ...

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就是传的播放地址

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


本文名称:小程序聊天室功能怎么实现
本文链接:http://myzitong.com/article/jhedes.html