站長資訊網(wǎng)
小程序怎么導(dǎo)入sdk實(shí)現(xiàn)聊天功能
首先使用npm進(jìn)行下載騰訊云的即時聊天sdk；然后在項(xiàng)目中進(jìn)行引用并進(jìn)行sdk初始化；再根據(jù)后臺接口返回userID，userSig這兩個參數(shù)判斷當(dāng)前登錄人是誰；最后根據(jù)文檔實(shí)現(xiàn)基礎(chǔ)功能即可。
示例代碼
wxml：
<scroll-view bindscroll="refresh" scroll-into-view="{{toView}}" style="height: {{scroll_height}}px;" upper-threshold="100" scroll-y="true" enable-back-to-top="true" class="message-list"> <!-- 每一行 --> <view class="row" wx:for="{{messages}}" wx:key="{{index}}" id="row_{{index}}"> <!-- 日期 --> <view class="datetime" wx:if="{{item.msgTime != ''}}">{{item.msgTime}}</view> <!-- 頭像與內(nèi)容文本 --> <view class="body" style="flex-flow: {{item.flow == 'in' ? 'row' : 'row-reverse'}}"> <view class="avatar-container"> <image wx:if="{{item.flow=='in'}}" class="avatar" src="{{friendAvatarUrl}}" /> <image wx:else class="avatar" src="{{userData.avatarUrl}}" /> </view> <!-- 畫對話框 --> <view class="triangle" style="{{item.flow == 'out' ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view> <view class="content" style="{{item.flow == 'out' ? 'background: #7ECB4B' : ''}}"> <view wx:if="{{item.type === 'TIMTextElem'}}">{{item.payload.text}}</view> <image class="image-message" wx:elif="{{item.type === 'TIMImageElem'}}" src="{{item.payload.imageInfoArray[1].url}}" bindtap="previewImage" data-src="{{item.payload.imageInfoArray[1].url}}"></image> <view wx:elif="{{item.type === 'TIMSoundElem'}}" url="{{item.payload.url}}"> <view class="box" bindtap="openAudio" data-eventid="{{'13_'+index}}" data-time="{{item.payload.second}}" data-comkey="{{item.payload.url}}"> <image src="{{'13_'+index==audioIndex?audioGif:audioPng}}" style="height:22px;width:22px" class="_image"></image> <view style="padding-left: 4px;" class="_div data-v-afeb3abc"> {{item.payload.second<1?1:item.payload.second}}s </view> </view> </view> </view> </view> </view> </scroll-view> <view class="reply" style="bottom:{{reply_height}}px;"> <view class="Audio"> <image wx:if="{{opration==true}}" bindtap="Audio" src="../image/Audio.png"></image> <image wx:else bindtap="keyboard" src="../image/keyboard.png"></image> </view> <view class="opration-area"> <input bindfocus="bindfocus" wx:if="{{opration==true}}" type="text" bindinput="getContent" value="{{content}}" /> <view wx:else class="voice-button {{touchBtn?'hoverBtn':''}}" bind:touchstart="startAudio" bind:touchend="onTouchEnd" bind:longpress="onLongpress" bind:touchmove="onTouchMove"> {{touchBtn?'松開 結(jié)束':'按住說話'}} </view> </view> <view class="{{sendBtn==true?'send':'sendActive'}}" bindtap="sendMsg">發(fā)送</view> <view class="add" bind:tap="moreClick"> <image class="more" src="../image/more.png"></image> </view> <!-- <view class="send" bindtap="sendImg">相冊</view> <view class="send" bindtap="startAudio">開始</view> <view class="send" bindtap="endAudio">結(jié)束</view> --> </view> <view class="more_box" hidden="{{moreShow}}"> <view class="more_item" bindtap="sendImg"> <view class="img_box"> <image src="../image/picture.png"></image> </view> <view style="margin-top:10rpx;"> <text>相冊</text> </view> </view> </view>
js：
import TIM from 'tim-wx-sdk'; import COS from "cos-wx-sdk-v5"; let options = { SDKAppID: 0 // 接入時需要將0替換為您的即時通信 IM 應(yīng)用的 SDKAppID }; // 創(chuàng)建 SDK 實(shí)例，`TIM.create()`方法對于同一個 `SDKAppID` 只會返回同一份實(shí)例 let tim = TIM.create(options); // SDK 實(shí)例通常用 tim 表示 // 設(shè)置 SDK 日志輸出級別，詳細(xì)分級請參見 setLogLevel 接口的說明 tim.setLogLevel(1); // 普通級別，日志量較多，接入時建議使用 // tim.setLogLevel(1); // release 級別，SDK 輸出關(guān)鍵信息，生產(chǎn)環(huán)境時建議使用 // 注冊 COS SDK 插件 tim.registerPlugin({ 'cos-wx-sdk': COS }); const app = getApp() let recorderManager = wx.getRecorderManager(); // 錄音部分參數(shù) 小程序文檔 const recordOptions = { duration: 60000, // 錄音的時長，單位 ms，最大值 600000（10 分鐘） sampleRate: 44100, // 采樣率 numberOfChannels: 1, // 錄音通道數(shù) encodeBitRate: 192000, // 編碼碼率 format: 'aac' // 音頻格式，選擇此格式創(chuàng)建的音頻消息，可以在即時通信 IM 全平臺（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ù)拉，分頁續(xù)拉時需傳入該字段。 * 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 }) // 將某會話下所有未讀消息已讀上報 let promise = tim.setMessageRead({ conversationID: options.conversationID }); promise.then(function (imResponse) { // 已讀上報成功 }).catch(function (imError) { // 已讀上報失敗 }); }, onShow: function () { let that = this; // 獲取當(dāng)前聊天的歷史列表 that.getMessageList(); that.scrollToBottom(); // 獲取收到的單聊信息 let onMessageReceived = function (event) { // event.data - 存儲 Message 對象的數(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: '說話時間太短', duration: 1000, image: '../image/err.png' }) } }); }, onUnload: function () { }, /** * 獲取消息列表 */ getMessageList() { let that = this; let cb = tim.getMessageList({ conversationID: conversationID,//會話列表傳遞過來的參數(shù) count: 15 }) cb.then(function (imResponse) { const messageList = imResponse.data.messageList; // 消息列表。 const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于續(xù)拉，分頁續(xù)拉時需傳入該字段。 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: '請輸入內(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'], // 從相冊選擇 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] }) }, // 錄制語音 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) { }); }, // # 利用長按判斷錄音是否太短 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); } }, // 播放語音 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("語音結(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ù)拉，分頁續(xù)拉時需傳入該字段。 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, }) // 將某會話下所有未讀消息已讀上報 let promise = tim.setMessageRead({ conversationID: that.data.conversationID }); promise.then(function (imResponse) { // 已讀上報成功 }).catch(function (imError) { // 已讀上報失敗 }); }
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%; } /*文本輸入或語音錄入*/ .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%; } /*按住說話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; }
推薦教程：《小程序開發(fā)》
