小程序如何导入sdk实现聊天功能

这篇文章主要介绍小程序如何导入sdk实现聊天功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达十余年累计超上千家客户的网站建设总结了一套系统有效的全网营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：木包装箱等企业，备受客户称誉。

小程序怎么导入sdk实现聊天功能

首先使用npm进行下载腾讯云的即时聊天sdk；然后在项目中进行引用并进行sdk初始化；再根据后台接口返回userID，userSig这两个参数判断当前登录人是谁；最后根据文档实现基础功能即可。

示例代码

wxml：

  
  
    
    {{item.msgTime}}
    
    
      
        
        
      
      
      
      
        {{item.payload.text}}
        
        
          
            
            
              {{item.payload.second<1?1:item.payload.second}}s
            
          
        
      
    
  


  
    
    
  
  
    
    
      {{touchBtn?'松开 结束':'按住说话'}}
    
  
  发送
  
    
  
  

 
  
    
      
    
    
      相册
    
  

js：

import TIM from 'tim-wx-sdk';
import COS from "cos-wx-sdk-v5";
let options = {
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
// 创建 SDK 实例，`TIM.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
let tim = TIM.create(options); // SDK 实例通常用 tim 表示
// 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
tim.setLogLevel(1); // 普通级别，日志量较多，接入时建议使用
// tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用
// 注册 COS SDK 插件
tim.registerPlugin({
  'cos-wx-sdk': COS
});
const app = getApp()
let recorderManager = wx.getRecorderManager();
// 录音部分参数 小程序文档
const recordOptions = {
  duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 录音通道数
  encodeBitRate: 192000, // 编码码率
  format: 'aac' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
};
Page({
  data: {
    friendId: '',
    friendName: '',
    friendAvatarUrl: '',
    messages: [], // 消息集合
    complete: 0, // 是否还有历史消息可以拉取，1 - 表示没有，0 - 表示有
    content: '', // 输入框的文本值
    lock: false, // 发送消息锁 true - 加锁状态 false - 解锁状态
    scroll_height: wx.getSystemInfoSync().windowHeight - 54,
    reply_height: 0,
    moreShow: true,
    userData: [],
    
    audioPng:"../image/audio-play.png",
    audioGif:"../image/audio-play.gif",
    audioState:true,
    /**
     * 历史消息消息集合（结构如下）：
     * nextReqMessageID 用于续拉，分页续拉时需传入该字段。
     * isCompleted 表示是否已经拉完所有消息。
     */
    nextReqMessageID: "",
    isCompleted: "",
    isFirstGetList: true,
    audioContext: null,
    opration: true,
    touchBtn: false,
    recording: false,
    stopflag: false,
    cancelRecord: false,
    refreshTime: '',
    ScrollLoading: 0,
    audioIndex:null,
    sendBtn:true
  },
  onLoad: function (options) {
    // 
    this.setData({
      friendId: options.friendId,
      friendName: options.friendName,
      friendAvatarUrl: options.friendAvatarUrl,
      conversationID: options.conversationID
    })
    wx.setNavigationBarTitle({
      title: options.friendName
    })
    var that = this
    var userData = JSON.parse(wx.getStorageSync('userData'))
    that.data.messages = [] // 清空历史消息
    let audioContext = wx.createInnerAudioContext()
    this.setData({
      userData,
      audioContext
    })
    // 将某会话下所有未读消息已读上报
    let promise = tim.setMessageRead({ conversationID: options.conversationID });
    promise.then(function (imResponse) {
      // 已读上报成功
    }).catch(function (imError) {
      // 已读上报失败
    });
  },
  onShow: function () {
    let that = this;
    // 获取当前聊天的历史列表
    that.getMessageList();
    that.scrollToBottom();
    // 获取收到的单聊信息
    let onMessageReceived = function (event) {
      // event.data - 存储 Message 对象的数组 - [Message]
      let msgList = that.data.messages
      handlerHistoryMsgs(event.data, that)
      that.scrollToBottom();
    };
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived)
    // 监听录音结束
    recorderManager.onStop(function (res) {
      if (that.data.recording) {
        if (that.data.cancelRecord) {
          wx.hideToast()
          that.setData({
            cancelRecord: false
          })
        } else {
          // 创建消息实例，接口返回的实例可以上屏
          const message = tim.createAudioMessage({
            to: that.data.friendId,
            conversationType: TIM.TYPES.CONV_C2C,
            payload: {
              file: res
            },
            onProgress: function (event) { }
          });
          //  发送消息
          let promise = tim.sendMessage(message);
          promise.then(function (imResponse) {
            // 发送成功
            that.addMessage(imResponse.data.message, that)
          }).catch(function (imError) {
            // 发送失败
          });
          that.setData({
            recording: false
          })
        }
      } else {
        wx.showToast({
          title: '说话时间太短',
          duration: 1000,
          image: '../image/err.png'
        })
      }
    });
  },
  onUnload: function () {
  },
  /**
   * 获取消息列表
   */
  getMessageList() {
    let that = this;
    let cb = tim.getMessageList({
      conversationID: conversationID,//会话列表传递过来的参数
      count: 15
    })
    cb.then(function (imResponse) {
      const messageList = imResponse.data.messageList; // 消息列表。
      const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
      const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
      that.setData({
        nextReqMessageID: nextReqMessageID,
        isCompleted: isCompleted
      })
      handlerHistoryMsgs(messageList, that);
      that.scrollToBottom();
    });
  },
  /**
   * 获取文本的消息
   */
  getContent: function (e) {
    if(e.detail.value ==""){
      this.setData({sendBtn:true})
    }else{
      this.setData({sendBtn:false})
    }
    console.log(e)
    var that = this;
    that.setData({
      content: e.detail.value
    })
  },
  /**
   * 发送消息
   */
  sendMsg: function (e) {
    if(this.data.content ==""){
      wx.showToast({
        title: '请输入内容',
        duration: 1000,
        icon:'none'
      })
      return
    }
    var that = this
    // 发送文本消息，Web 端与小程序端相同
    // 1. 创建消息实例，接口返回的实例可以上屏
    let message = tim.createTextMessage({
      to: this.data.friendId,
      conversationType: TIM.TYPES.CONV_C2C,
      payload: {
        text: this.data.content
      }
    });
    // 2. 发送消息
    let promise = tim.sendMessage(message);
    promise.then(function (imResponse) {
      // 发送成功
      that.addMessage(imResponse.data.message, that)
      that.setData({sendBtn:true})
    }).catch(function (imError) {
      // 发送失败
    });
  },
  /**
   * 刷新文本消息
   */
  addMessage: function (msg, that) {
    var messages = that.data.messages;
    messages.push(msg);
    that.setData({
      messages: messages,
      content: '' // 清空输入框文本
    })
    that.scrollToBottom();
  },
  /**
   * 发送图片消息
   */
  sendImg() {
    let that = this;
    wx.chooseImage({
      sourceType: ['album'], // 从相册选择
      count: 1, // 只选一张，目前 SDK 不支持一次发送多张图片
      success: function (res) {
        // 2. 创建消息实例，接口返回的实例可以上屏
        let message = tim.createImageMessage({
          to: that.data.friendId,
          conversationType: TIM.TYPES.CONV_C2C,
          payload: {
            file: res
          },
          onProgress: function (event) {
          }
        });
        // 3. 发送图片
        let promise = tim.sendMessage(message);
        promise.then(function (imResponse) {
          // 发送成功
          that.addMessage(imResponse.data.message, that)
        }).catch(function (imError) {
          // 发送失败
        });
      }
    })
  },
  scrollToBottom: function () {
    this.setData({
      toView: 'row_' + (this.data.messages.length - 1)
    });
  },
  previewImage(e) {
    let src = '';
    wx.previewImage({
      current: e.currentTarget.dataset.src, // 当前显示图片的http链接
      urls: [e.currentTarget.dataset.src]
    })
  },
  // 录制语音
  startAudio: function () {
    wx.showToast({
      title: '上滑取消发送',
      duration: 10000,
      image: '../image/cancel.png'
    })
    this.setData({
      touchBtn: true
    })
    if (this.data.stopFlag) {
      return;
    }
    recorderManager.start(recordOptions);
    recorderManager.onError(function (errMsg) {
    });
  },
  // # 利用长按判断录音是否太短
  onLongpress() {
    this.setData({
      recording: true
    })
  },
  // 发送录音
  onTouchEnd: function () {
    wx.hideToast()
    let that = this;
    that.setData({
      touchBtn: false
    })
    if (that.data.stopFlag) {
      return;
    }
    if (that.data.recording) {
      recorderManager.stop();
    } else {
      that.setData({
        stopFlag: true
      })
      setTimeout(() => {
        recorderManager.stop();
        that.setData({
          stopFlag: false
        })
      }, 400);
    }
  },
  // 播放语音
  openAudio(audio) {
    console.log(audio)
    let index = audio.currentTarget.dataset.eventid
    this.setData({
      audioIndex:index
      // audioState:false
    })
    this.data.audioContext.src = audio.currentTarget.dataset.comkey
    this.data.audioContext.autoplay = true;
    this.data.audioContext.play()
    this.data.audioContext.onPlay((res) => {
    })
    this.data.audioContext.onEnded(() => {
      wx.hideToast()
      this.setData({
        audioIndex:null
      })
      console.log("语音结束了")
    })
    this.data.audioContext.onError((res) => {
    })
  },
  // 上滑取消
  onTouchMove(e) {
    if (e.touches[0].clientY < 520) {
      // # 取消发送
      this.setData({
        cancelRecord: true
      });
      wx.showToast({
        title: '松开，取消发送',
        duration: 10000,
        image: '../image/cancel.png'
      })
    } else {
      // # 不取消
      wx.hideToast()
      wx.showToast({
        title: '上滑取消发送',
        duration: 10000,
        image: '../image/cancel.png'
      })
      this.setData({
        cancelRecord: false
      })
    }
  },
  // 下拉加载聊天记录
  refresh: function (e) {
    let that = this
    if (that.data.ScrollLoading == 1) { //防止多次触发
      return false
    }
    if (e.detail.scrollTop < 1) {
      that.setData({ ScrollLoading: 1 })
      wx.showLoading({
        title: '加载中',
      })
      setTimeout(() => {
        let promise = tim.getMessageList({ conversationID: that.data.conversationID, nextReqMessageID: that.data.nextReqMessageID, count: 15 });
        promise.then(function (imResponse) {
          const newMessageList = imResponse.data.messageList; // 消息列表。
          const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
          const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。
          that.setData({
            nextReqMessageID: nextReqMessageID,
            isCompleted: isCompleted,
            messages: newMessageList.concat(that.data.messages)
          })
          wx.hideLoading()
          that.setData({ ScrollLoading: 0 })
          // handlerHistoryMsgs(messageList, that);
        });
      }, 800);
    }
    // setTimeout(function(){
    //   var date = new Date();
    // },300);
  },
  // 切换
  Audio() {
    this.setData({
      opration: false
    })
  },
  keyboard() {
    this.setData({
      opration: true
    })
  },
  moreClick() {
    if (this.data.moreShow) {
      this.setData({
        moreShow: false,
        reply_height: 92,
        scroll_height: this.data.scroll_height - 92
      })
    }
  },
  bindfocus() {
    this.setData({
      moreShow: true,
      reply_height: 0,
      scroll_height: wx.getSystemInfoSync().windowHeight - 54
    })
  }
})
/**
 * 处理历史消息 
 */
function handlerHistoryMsgs(result, that) {
  var historyMsgs = that.data.messages;
  result.forEach(item => {
    historyMsgs.push(item)
  })
  // historyMsgs.push(result[0])
  that.setData({
    messages: historyMsgs,
  })
    // 将某会话下所有未读消息已读上报
    let promise = tim.setMessageRead({ conversationID: that.data.conversationID });
    promise.then(function (imResponse) {
      // 已读上报成功
    }).catch(function (imError) {
      // 已读上报失败
    });
}

wxss：

/** 聊天窗口样式
 * 54px为回复框高度，js同
 */
/*聊天记录*/
page{
  background: rgb(245, 245, 245);
}
.message-list {
  /*margin-bottom: 54px;*/
  background: rgb(235, 235, 235);
}
/*单元行*/
.row {
  display: flex;
  flex-direction: column;
  margin: 0 30rpx;
}
/*日期*/
.datetime {
  font-size: 10px;
  padding: 10px 0;
  color: #999;
  text-align: center;
}
.send {
  font-size: 15px;
  /* padding-right: 10px; */
  color: #999;
  text-align: center;
  height: 70%;
  border: 1px solid #e4dfdf;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  border-radius: 10rpx;
}
.sendActive {
  font-size: 15px;
  /* padding-right: 10px; */
  color: #fff;
  text-align: center;
  height: 70%;
  border: 1px solid #05c15f;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
  border-radius: 10rpx;
  background-color: #05c15f;
}
.Audio {
  font-size: 15px;
  color: #999;
  text-align: center;
  padding-left: 10rpx;
}
.Audio image {
  width: 50rpx;
  height: 50rpx;
}
.add {
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90rpx;
}
.more {
  width: 50rpx;
  height: 50rpx;
}
/*主体*/
.body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-top: 10px;
}
/*头像容器*/
.body.avatar-container {
  width: 20%;
}
/*头像*/
.body .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 20rpx;
}
/*文本消息*/
.body .content {
  font-size: 16px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  line-height: 22px;
  margin-bottom: 10px;
  word-wrap: break-word;
  max-width: 300rpx;
}
/* 三角箭头 */
.body .triangle {
  background: white;
  width: 20rpx;
  height: 20rpx;
  margin-top: 26rpx;
  transform: rotate(45deg);
  position: absolute;
}
/*图片消息*/
.picture {
  width: 160px;
}
/*回复框*/
.reply {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  /* bottom: 0; */
  width: 100%;
  height: 54px;
  border-top: 1px solid rgb(215, 215, 215);
  background: rgb(245, 245, 245);
}
.reply .voice-image {
  width: 25px;
  height: 25px;
  margin-left: 3%;
}
/*文本输入或语音录入*/
.reply .opration-area {
  flex: 1;
  padding: 8px;
}
/*回复文本框*/
.reply input {
  background: rgb(252, 252, 252);
  height: 36px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 6px;
  padding-left: 3px;
}
/*选取图片*/
.reply .choose-image {
  width: 25px;
  height: 25px;
  margin-right: 3%;
}
/*按住说话button*/
.voice-button {
  height: 36px;
  color: #818181;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  border: 1px solid #e4dfdf;
  border-radius: 10rpx;
}
/*悬浮提示框*/
.hud-container {
  position: fixed;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -75px;
}
/*背景层*/
.hud-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #999;
  opacity: 0.8;
  z-index: 11;
  border-radius: 10px;
}
/*悬浮框主体*/
.hud-body {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 19;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/*图标*/
.hud-body image {
  margin-top: 20px;
  width: 80px;
  height: 80px;
}
/*文字*/
.hud-body .tip {
  color: #fff;
  text-align: center;
  width: 90%;
  line-height: 34px;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 90%;
}
.hud-body .warning {
  background: #c33;
  border-radius: 5px;
}
.image-message {
  max-width: 100%;
  border-radius: 4rpx;
}
.box {
  display: flex;
  height: 40rpx;
  line-height: 40rpx;
}
.hoverBtn {
  background-color: rgb(226, 220, 220);
  color: #fff;
  border-radius: 10rpx;
}
.more_box {
height: 138rpx;
width: 100%;
padding: 15rpx;
display: flex;
background: rgb(245, 245, 245);
position: fixed;
bottom: 0;
}
.more_item {
  text-align: center;
  height: 150rpx;
  font-size: 24rpx;
  margin-left: 26rpx
}
.img_box {
  width: 80rpx;
  height: 84rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
.img_box image {
  width: 40rpx;
  height: 40rpx;
}

以上是“小程序如何导入sdk实现聊天功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！