小程序怎么导入sdk实现聊天功能
首先使用npm进行下载腾讯云的即时聊天sdk；然后在项目中进行引用并进行sdk初始化；再根据后台接口返回userID，userSig这两个参数判断当前登录人是谁；最后根据文档实现基础功能即可。
示例代码
wxml：
scroll-view bindscroll= refresh scroll-into-view= {{toView}} >js：
import TIM from #39;tim-wx-sdk #39;;
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({
#39;cos-wx-sdk #39;: COS
const app = getApp()
let recorderManager = wx.getRecorderManager();
// 录音部分参数 小程序文档
const recordOptions = {
duration: 60000, // 录音的时长，单位 ms，最大值 600000（10 分钟）
sampleRate: 44100, // 采样率
numberOfChannels: 1, // 录音通道数
encodeBitRate: 192000, // 编码码率
format: #39;aac #39; // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
Page({
data: {
friendId: #39; #39;,
friendName: #39; #39;,
friendAvatarUrl: #39; #39;,
messages: [], // 消息集合
complete: 0, // 是否还有历史消息可以拉取，1 - 表示没有，0 - 表示有
content: #39; #39;, // 输入框的文本值
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: #39; #39;,
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( #39;userData #39;))
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: #39;说话时间太短 #39;,
duration: 1000,
image: #39;../image/err.png #39;
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: #39;请输入内容 #39;,
duration: 1000,
icon: #39;none #39;
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: #39; #39; // 清空输入框文本
that.scrollToBottom();
* 发送图片消息
sendImg() {
let that = this;
wx.chooseImage({
sourceType: [ #39;album #39;], // 从相册选择
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: #39;row_ #39; + (this.data.messages.length - 1)
previewImage(e) {
let src = #39; #39;;
wx.previewImage({
current: e.currentTarget.dataset.src, // 当前显示图片的http链接
urls: [e.currentTarget.dataset.src]
// 录制语音
startAudio: function () {
wx.showToast({
title: #39;上滑取消发送 #39;,
duration: 10000,
image: #39;../image/cancel.png #39;
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: #39;松开，取消发送 #39;,
duration: 10000,
image: #39;../image/cancel.png #39;
} else {
// # 不取消
wx.hideToast()
wx.showToast({
title: #39;上滑取消发送 #39;,
duration: 10000,
image: #39;../image/cancel.png #39;
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: #39;加载中 #39;,
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实现聊天功能的详细内容，更多请关注php中文网其它相关文章！
最佳 Windows 性能的顶级免费优化软件
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
浙公网安备33010502012046号