這篇文章主要介紹小程序如何導(dǎo)入sdk實(shí)現(xiàn)聊天功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)十余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營(yíng)銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：木包裝箱等企業(yè)，備受客戶稱譽(yù)。
小程序怎么導(dǎo)入sdk實(shí)現(xiàn)聊天功能
首先使用npm進(jìn)行下載騰訊云的即時(shí)聊天sdk；然后在項(xiàng)目中進(jìn)行引用并進(jìn)行sdk初始化；再根據(jù)后臺(tái)接口返回userID，userSig這兩個(gè)參數(shù)判斷當(dāng)前登錄人是誰(shuí)；最后根據(jù)文檔實(shí)現(xiàn)基礎(chǔ)功能即可。
示例代碼
wxml：
{{item.msgTime}}
{{item.payload.text}}
{{item.payload.second<1?1:item.payload.second}}s
{{touchBtn?'松開 結(jié)束':'按住說(shuō)話'}}
發(fā)送
相冊(cè)
js：
import TIM from 'tim-wx-sdk';
import COS from "cos-wx-sdk-v5";
let options = {
SDKAppID: 0 // 接入時(shí)需要將0替換為您的即時(shí)通信 IM 應(yīng)用的 SDKAppID
};
// 創(chuàng)建 SDK 實(shí)例，`TIM.create()`方法對(duì)于同一個(gè) `SDKAppID` 只會(huì)返回同一份實(shí)例
let tim = TIM.create(options); // SDK 實(shí)例通常用 tim 表示
// 設(shè)置 SDK 日志輸出級(jí)別，詳細(xì)分級(jí)請(qǐng)參見 setLogLevel 接口的說(shuō)明
tim.setLogLevel(1); // 普通級(jí)別，日志量較多，接入時(shí)建議使用
// tim.setLogLevel(1); // release 級(jí)別，SDK 輸出關(guān)鍵信息，生產(chǎn)環(huán)境時(shí)建議使用
// 注冊(cè) COS SDK 插件
tim.registerPlugin({
'cos-wx-sdk': COS
});
const app = getApp()
let recorderManager = wx.getRecorderManager();
// 錄音部分參數(shù) 小程序文檔
const recordOptions = {
duration: 60000, // 錄音的時(shí)長(zhǎng)，單位 ms，最大值 600000（10 分鐘）
sampleRate: 44100, // 采樣率
numberOfChannels: 1, // 錄音通道數(shù)
encodeBitRate: 192000, // 編碼碼率
format: 'aac' // 音頻格式，選擇此格式創(chuàng)建的音頻消息，可以在即時(shí)通信 IM 全平臺(tái)（Android、iOS、微信小程序和Web）互通
};
Page({
data: {
friendId: '',
friendName: '',
friendAvatarUrl: '',
messages: [], // 消息集合
complete: 0, // 是否還有歷史消息可以拉取，1 - 表示沒有，0 - 表示有
content: '', // 輸入框的文本值
lock: false, // 發(fā)送消息鎖 true - 加鎖狀態(tài) false - 解鎖狀態(tài)
scroll_height: wx.getSystemInfoSync().windowHeight - 54,
reply_height: 0,
moreShow: true,
userData: [],
audioPng:"../image/audio-play.png",
audioGif:"../image/audio-play.gif",
audioState:true,
/**
* 歷史消息消息集合（結(jié)構(gòu)如下）：
* nextReqMessageID 用于續(xù)拉，分頁(yè)續(xù)拉時(shí)需傳入該字段。
* isCompleted 表示是否已經(jīng)拉完所有消息。
*/
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
})
// 將某會(huì)話下所有未讀消息已讀上報(bào)
let promise = tim.setMessageRead({ conversationID: options.conversationID });
promise.then(function (imResponse) {
// 已讀上報(bào)成功
}).catch(function (imError) {
// 已讀上報(bào)失敗
});
},
onShow: function () {
let that = this;
// 獲取當(dāng)前聊天的歷史列表
that.getMessageList();
that.scrollToBottom();
// 獲取收到的單聊信息
let onMessageReceived = function (event) {
// event.data - 存儲(chǔ) Message 對(duì)象的數(shù)組 - [Message]
let msgList = that.data.messages
handlerHistoryMsgs(event.data, that)
that.scrollToBottom();
};
tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived)
// 監(jiān)聽錄音結(jié)束
recorderManager.onStop(function (res) {
if (that.data.recording) {
if (that.data.cancelRecord) {
wx.hideToast()
that.setData({
cancelRecord: false
})
} else {
// 創(chuàng)建消息實(shí)例，接口返回的實(shí)例可以上屏
const message = tim.createAudioMessage({
to: that.data.friendId,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: res
},
onProgress: function (event) { }
});
// 發(fā)送消息
let promise = tim.sendMessage(message);
promise.then(function (imResponse) {
// 發(fā)送成功
that.addMessage(imResponse.data.message, that)
}).catch(function (imError) {
// 發(fā)送失敗
});
that.setData({
recording: false
})
}
} else {
wx.showToast({
title: '說(shuō)話時(shí)間太短',
duration: 1000,
image: '../image/err.png'
})
}
});
},
onUnload: function () {
},
/**
* 獲取消息列表
*/
getMessageList() {
let that = this;
let cb = tim.getMessageList({
conversationID: conversationID,//會(huì)話列表傳遞過(guò)來(lái)的參數(shù)
count: 15
})
cb.then(function (imResponse) {
const messageList = imResponse.data.messageList; // 消息列表。
const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于續(xù)拉，分頁(yè)續(xù)拉時(shí)需傳入該字段。
const isCompleted = imResponse.data.isCompleted; // 表示是否已經(jīng)拉完所有消息。
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
})
},
/**
* 發(fā)送消息
*/
sendMsg: function (e) {
if(this.data.content ==""){
wx.showToast({
title: '請(qǐng)輸入內(nèi)容',
duration: 1000,
icon:'none'
})
return
}
var that = this
// 發(fā)送文本消息，Web 端與小程序端相同
// 1. 創(chuàng)建消息實(shí)例，接口返回的實(shí)例可以上屏
let message = tim.createTextMessage({
to: this.data.friendId,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
text: this.data.content
}
});
// 2. 發(fā)送消息
let promise = tim.sendMessage(message);
promise.then(function (imResponse) {
// 發(fā)送成功
that.addMessage(imResponse.data.message, that)
that.setData({sendBtn:true})
}).catch(function (imError) {
// 發(fā)送失敗
});
},
/**
* 刷新文本消息
*/
addMessage: function (msg, that) {
var messages = that.data.messages;
messages.push(msg);
that.setData({
messages: messages,
content: '' // 清空輸入框文本
})
that.scrollToBottom();
},
/**
* 發(fā)送圖片消息
*/
sendImg() {
let that = this;
wx.chooseImage({
sourceType: ['album'], // 從相冊(cè)選擇
count: 1, // 只選一張，目前 SDK 不支持一次發(fā)送多張圖片
success: function (res) {
// 2. 創(chuàng)建消息實(shí)例，接口返回的實(shí)例可以上屏
let message = tim.createImageMessage({
to: that.data.friendId,
conversationType: TIM.TYPES.CONV_C2C,
payload: {
file: res
},
onProgress: function (event) {
}
});
// 3. 發(fā)送圖片
let promise = tim.sendMessage(message);
promise.then(function (imResponse) {
// 發(fā)送成功
that.addMessage(imResponse.data.message, that)
}).catch(function (imError) {
// 發(fā)送失敗
});
}
})
},
scrollToBottom: function () {
this.setData({
toView: 'row_' + (this.data.messages.length - 1)
});
},
previewImage(e) {
let src = '';
wx.previewImage({
current: e.currentTarget.dataset.src, // 當(dāng)前顯示圖片的http鏈接
urls: [e.currentTarget.dataset.src]
})
},
// 錄制語(yǔ)音
startAudio: function () {
wx.showToast({
title: '上滑取消發(fā)送',
duration: 10000,
image: '../image/cancel.png'
})
this.setData({
touchBtn: true
})
if (this.data.stopFlag) {
return;
}
recorderManager.start(recordOptions);
recorderManager.onError(function (errMsg) {
});
},
// # 利用長(zhǎng)按判斷錄音是否太短
onLongpress() {
this.setData({
recording: true
})
},
// 發(fā)送錄音
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);
}
},
// 播放語(yǔ)音
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("語(yǔ)音結(jié)束了")
})
this.data.audioContext.onError((res) => {
})
},
// 上滑取消
onTouchMove(e) {
if (e.touches[0].clientY < 520) {
// # 取消發(fā)送
this.setData({
cancelRecord: true
});
wx.showToast({
title: '松開，取消發(fā)送',
duration: 10000,
image: '../image/cancel.png'
})
} else {
// # 不取消
wx.hideToast()
wx.showToast({
title: '上滑取消發(fā)送',
duration: 10000,
image: '../image/cancel.png'
})
this.setData({
cancelRecord: false
})
}
},
// 下拉加載聊天記錄
refresh: function (e) {
let that = this
if (that.data.ScrollLoading == 1) { //防止多次觸發(fā)
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; // 用于續(xù)拉，分頁(yè)續(xù)拉時(shí)需傳入該字段。
const isCompleted = imResponse.data.isCompleted; // 表示是否已經(jīng)拉完所有消息。
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,
})
// 將某會(huì)話下所有未讀消息已讀上報(bào)
let promise = tim.setMessageRead({ conversationID: that.data.conversationID });
promise.then(function (imResponse) {
// 已讀上報(bào)成功
}).catch(function (imError) {
// 已讀上報(bào)失敗
});
}wxss：
/** 聊天窗口樣式
* 54px為回復(fù)框高度，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;
}
/*回復(fù)框*/
.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%;
}
/*文本輸入或語(yǔ)音錄入*/
.reply .opration-area {
flex: 1;
padding: 8px;
}
/*回復(fù)文本框*/
.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%;
}
/*按住說(shuō)話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;
}
/*圖標(biāo)*/
.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;
}以上是“小程序如何導(dǎo)入sdk實(shí)現(xiàn)聊天功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
標(biāo)題名稱：小程序如何導(dǎo)入sdk實(shí)現(xiàn)聊天功能
網(wǎng)頁(yè)URL：
http://weahome.cn/article/ijojps.html
重慶分公司
重慶分公司
