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

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

小程序怎么导入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;}-

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。