如何将SDK导入小程序实现聊天功能（小程序调用SDK）

如何将SDK导入到小程序中实现聊天功能

首先，使用npm下载腾讯云即时聊天SDK。 然后在您的项目中引用它并初始化SDK。 然后后台接口返回userID和userSig参数来判断当前登录的用户。 最后就可以根据文档实现基本的功能了。

示例代码

wxml：

{{item.msgTime}} 相册

js:

来自“tim- wx[k3”的 TIM ]sdk';import COS from "cos-wx-sdk-v5";let options = { SDKAppID: 0 // 访问应用程序的 SDKAppID 时，将 0 替换为即时通讯 IM // 创建 SDK 实例。 `TIM.create()` 方法仅返回相同 `SDKAppID` 的相同实例。 let tim = TIM.create(options); // SDK 实例通常由 tim/ /Set 表示。 更多关于SDK日志记录级别的信息，请参见setLogLevel接口说明。 tim.setLogLevel(1); // 这是推荐的访问方式。 tim.setLogLevel(1); // 发布级别。 SDK输出关键信息。 推荐在生产环境中使用。 // 注册 COS SDK 插件。 tim.registerPlugin({ 'cos-wx[ k3]sdk': COS});const app = getApp()let RecorderManager = wx.getRecorderManager(); // 录制参数小程序文档 const RecordOptions = {duration: 60000, // 记录周期，单位ms，最大值600000（10分钟）sampleRate: 44100, // 采样率numberOfChChannels: 1, // 录音通道数encodeBitRate: 192000, // 编码码率格式: 'aac' // 音频格式，该格式创建的语音消息兼容所有IM平台（Android、iOS、微信小程序、Web ) interoperability};Page({ data: {friendsId: '',friendsName:'',friendsAvatarUrl:'',messages: [], // 消息采集完成: 0, // 有已采集的历史消息Completed 是否检索到，1-表示没有，0-表示有 content: '', // 输入框中的文本值 lock: false, // 消息发送 lock 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，操作：true，touchBtn：false，录音：false，stopflag：false，cancelRecord：false，refreshTime：''，ScrollLoading：0，audioIndex :null, sendBtn:true }, onLoad: function (options) { // this.setData({friendsId: options.friendId,friendsName: options.friendName,friendsAvatarUrl: options.friendAvatarUrl, 对话 ID: options.conversationID }) wx. setNavigationBarTitle ({ title: options.friendName }) var that = this var userData = JSON.parse(wx.getStorageSync('userData')) that.data.messages = [] // 清除历史消息 let audioContext = wx.createInnerAudioContext ( ) 这个.setData({ userData, audioContext }) // 将会话中所有未读消息报告为已读 letpromise = tim.setMessageRead({conversationID:options.conversationID}); Promise.then(function (imResponse) { // }, onShow: function () { 那 = 这个; // 获取当前聊天记录列表 that.getMessageList(); 滚动到底部(); // 获取收到的单个聊天消息 let onMessageReceived = function (event) { //event.data - 包含消息对象的数组 - [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.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) { } }); // 发送消息 letpromise = tim.sendMessage(message); ) { // 发送成功 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({ 会话 ID: 会话 ID, //会话列表传递的参数个数: 15 }) cb.then(function (imResponse) { const messageList = imResponse.data.messageList; // MessageList. const nextResponse .data.nextReqMessageID; // 用于继续拉取。 const isCompleted = imResponse.data.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.setData({ content: e. detail.value }) }, /** * 发送消息 */ sendMsg: function (e) { if(this.data.content == ""){ wx.showToast({ title : '请输入内容' , period: 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) { varmessages = that.data.messages; message.push(msg); that.setData({messages:messages, content: '' // 清除输入框文本}) that . }, /** * 发送图片消息*/ sendImg() { let that = this.chooseImage({ sourceType: ['album'], // 从相册中选择编号: 1, // 只选择一张图片。当前; ，SDK不支持一次发送多张图片 success: function (res) { // 2. 创建接口返回的消息实例 let message = tim.createImageMes​​sage({ to: that.data.friendId,通信类型：TIM.TYPES.CONV_C2C，有效负载：{文件：res}，onProgress：function (event) { } }); // 3. 发送图像 letpromise = 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 wx.previewImage({ current: e.currentTarget.dataset.src, // 当前显示的图像 http 链接 urls: [e.currentTarget.dataset.src ] }) }, // 录制音频 startAudio: function () { wx.showToast({ title: '向上滑动取消发送', period: 10000, image: '../image/cancel.png' }) this.设置Data({ touchBtn: true }) if (this.data.stopFlag) { return; RecorderManager.onError(function (errMsg) { }); // # 长按即可停止录制。 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) letindex = audio.currentTarget.dataset .se 事件tData({ 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: '释放，取消发送', period: 10000, image: '../image/cancel.png& #39; }) } else { // # 不取消 wx.hideToast()wx.showToast({ title: '向上滑动取消发送', period: 10000, image: '../image/cancel.png' }) this.setData({ cancelRecord: false }) } }, // 加载下拉聊天记录，refresh: function (e) { let that = this if (that.data.ScrollLoading == 1) { //防止多个触发器返回 false } if ( e.detail.scrollTop { let Promise = tim.getMessageList({ 会话 ID: 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); // 切换音频() { this.setData({ 操作: 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({对话ID: that.data.conversationID }) Promise.then( function (imResponse) { // 读取报告成功}).catch(function (imError) { // 读取报告失败});}

wxss:

/** 聊天窗口样式* 54px 回复框height,js为*//*聊天记录*/page{ background: rgb(245, 245, 245);}.message-list { /*margin -bottom: 54px;*/ 与backgro相同und: rgb(235, 235, 235);}/*单位行*/.row {显示: flex; flex-方向: 列; margin: 0 30rpx;}/*日期*/.datetime { font[k3 ]大小：10px；填充：10px 0；文本-对齐：中心；}.send { 字体-大小：15px；/* 填充-右：10px； 999；文本-对齐：中心；边框：1像素#e4dfdf；-对齐内容：中心； ] radius: 10rpx;}.sendActive { font- size: 15px; /* padding-right: 10px; */ color: #fff; text-align: height: 70%; Solid #05c15f; 显示：Flex；-对齐内容：中心；边框-半径：10rpx；背景颜色：#05c15f；}.Audio -尺寸：15px；颜色：#999；文本对齐：居中r; 填充 - left: 10rpx;}. 音频图像 {width: 50rpx; height: 50rpx;}.add { height: 70%; - 对齐项目: center;中心; 宽度：90rpx;}.more { 宽度：50rpx;}/*body*/.body {显示：flex-方向：对齐-项目：flex-开始; justify-content: flex-start; margin-top: 10px;}/*头像容器*/.body.avatar-container {width: 20%;}/* Avatar*/.body.avatar{width:80rpx; height: 80rpx; border-radius: 50%; margin: 0 20rpx;}/*文字信息*/.body .content { font -size: 16px;背景：#fff；边框-半径：5px；行-高度：22px；边距-底部：10px； : 300rpx;}/* 三角形箭头*/.body .triangle { 背景: 白色; 高度: 20rpx;20rpx; margin-top: 26rpx; 变换：旋转（45度）; }/*图片消息*/.picture {width: 160px;}/*回复框*/.reply {display: flex; flex - 方向: row; justify-start; - 对齐项目: center; /* 底部: 0; */ 宽度: 100%;边框[ k3]顶部：1px实心rgb(215, 215, 215);背景：rgb(245, 245, 245);}.reply .voice-图像{宽度：25px高度：25px; left: 3%;}/*文字输入或语音输入*/.reply .opration-area { flex: 1; padding: 8px;}/*回复文本框*/.reply input {background: rgb(252, 252, 252); 高度: 36px; 边框: 1px 实心 rgb(221, 221, 221); border-半径: 6px; padding-left: 3px;}/*选择图片*/ .reply .choose[ k3] image { width: 25px; height: 25px; margin-right: 3%;}/*按住语音按钮*/.voice-button { height: 36 像素；颜色：#818181；行-高度：36px；文本-对齐：1 像素实心#e4dfdf； *浮动提示框*/.hud-container {位置：固定；宽度：150px；左侧：50%； 顶部: 50%; 边距-左: -75px; 边距-顶部: -75px;}/*背景层*/.hud-背景宽度: 100%;高度：100%；背景：#999；z-索引：11；边框-半径：10px；}/*浮动框主体*/.hud-主体{位置：相对宽度； : 100%; 高度: 100%; z- 索引: 19; 显示: flex; flex - 对齐内容: - 之间的间距; align-items: center;}/*icon*/.hud-body 图片 { margin-top: 20px; width: 80px; height: 80px;}/*text*/.hud[k3 ]body .tip { 颜色：#fff; 文本-对齐：中心；90%; 行-高度: 34px; 边距: 0 自动; 宽度: 90%;}.hud-body .warning {背景: #c33; 5px;}.image-消息{ max-宽度: 100%; border-半径: 4rpx;}.box {显示: flex; 行-高度: 40rpx }.hoverBtn; {背景-颜色：rgb(226, 220, 220);颜色：#fff;边框-半径：10rpx;}.more_box {高度：138rpx;宽度：100%;填充：15rpx;背景: rgb(245, 245, 245); 位置: 固定; 底部: 0;}.more_item { 文本-对齐: 中心; 字体- 大小: 24rpx; }.img_box { 宽度：80rpx；背景-颜色：#fff；-对齐内容：中心；-对齐项目：中心；} .img_box 图像 { 宽度：40rpx;ght: 40rpx;}

推荐教程：《小程序开发》

PHP 快速学习视频免费教程（入门到精通）

如何开始学习 PHP？怎样才能快速学习PHP呢？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何开发小程序插件？（小程序开发助手插件）
• 小程序如何获取并维护微信登录状态（微信小程序用户登录功能）
• 小程序21个新功能（小程序21个新功能在哪里找）
• 关于小程序生命周期的简单说明（小程序appjs生命周期）
• 如何利用微信小程序开发小游戏？（实用教程）（微信小程序与小游戏开发）

本文由主机参考刊发，转载请注明：如何将SDK导入小程序实现聊天功能（小程序调用SDK） https://zhujicankao.com/124137.html