九、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天会话管理的实现

会话好友列表的实现

1、
2、
3、
4、
5、
6、
7、
8、
9、
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照，相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)

目录
  • 会话好友列表的实现
  • 文章概述
  • 聊天会话管理的实现
    • 1.加载会话列表
      • 2. 删除会话项目
      • 3.设置会话草稿
  • 项目开源地址及交流群

文章概述

前面几篇我们讲述了ui上面的东西，现在我们稍微回归一下业务，讲述一下聊天会话管理的实现

聊天会话管理的实现

1.加载会话列表

在插件底层已经做好了会话缓存的处理，我们只需要根据腾讯提供的api加载即可，具体的定义如下：
在这里插入图片描述
具体调用的代码如下，这里我们需要注意nextSeq这个参数，是由插件提供反馈的，因此我们每次执行getConversationList之后需要在callback中记录最新的nextSeq

export default {
	data () {
		return {
			nextSeq: 0,
			conversationList: []
		}
	},
	mounted() {
		let{ data } = await this.$txim.getConversationList(this.nextSeq, 999)
		// 这里需要更新一下nextSeq
		this.nextSeq = data.nextSeq
		data.conversationList = data.conversationList || data.conversations
		let conversationList = data.conversationList.sort((a,b) => b.lastMessage.timestamp - a.lastMessage.timestamp)
		this.conversationList = conversationList
	}
}

2. 删除会话项目

删除某一条会话项目我们使用的api是deleteConversation，deleteConversation为删除会话记录api。请注意，删除会话的同时会导致本地储存的聊天记录一同删除，请谨慎使用。

this.$txim.deleteConversation(conversationID)
// 这里删除之后并不会有事件通知我们你删除了这条会话
// 因此我们需要自己删除会话列表中的元素，触发界面刷新
this.conversationList.splice(index, 1)

3.设置会话草稿

在微信中有一种特别的情况就是会话草稿，大致的情况如下图所示
在这里插入图片描述
在这里我们主要使用的是setConversationDraft方法，这里仅仅是针对会话项目的标记而已，标记他的草稿，没有实际的作用，仅仅是本地显示使用。

const conversation = uni.requireNativePlugin("TXIM-Conversation");
let conversationID = '129308-4291-94810-428190-1238921'
let draftText = '草稿'
conversation.setConversationDraft(conversationID, draftText, res => {
	// res = { type, data, code }
  console.log(res)
})

项目开源地址及交流群

项目成品效果查看：请点击项目引言
项目开源地址：https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue
Uniapp开发交流群：755910061

uniapp插件

相关

标签