主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
首先,使用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.createImageMessage({ 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
评论前必须登录!
注册