跳到主要内容

消息阅读状态页面

消息阅读状态页面用于展示群聊中一条已发送消息的已读、未读人数和成员列表。它属于逐条消息已读功能（消息已读 V5）的详情页面，由聊天消息旁的阅读状态组件进入。

使用条件​

页面入口与阅读状态图标都依赖 uni.$RongKitStore.enableReadV5。RCKitStore 连接成功后会读取 IMLib 的 getAppSettings() 结果；只有本地开关允许且服务端的 readReceiptVersion 为 GroupReadReceiptVersion.V5 时，最终开关才会启用。

read-receipt-indicator.vue 还会同时检查以下条件：

  • 消息的 needReceipt 为 true。
  • 消息为当前用户发送的消息。
  • 会话类型不是系统会话。
  • 消息状态不是发送中或发送失败。

单聊消息只显示已读或未读图标，不打开详情页。群聊消息显示未读图标、部分已读比例或全部已读图标，点击后才进入消息阅读状态页面。

配置页面路由​

页面入口为 RCUIKit/pages/chat/read-receipt-status.vue。在应用的 pages.json 中注册以下路由：

JSON
{
  "path": "RCUIKit/pages/chat/read-receipt-status",
  "style": {
    "navigationStyle": "custom"
  }
}

Demo 源码通过条件编译为抖音小程序使用标题为“消息阅读状态”的原生导航栏，其他平台使用页面内的 nav-bar.vue。

路由参数​

参数必填说明
messageUId是要查询阅读状态的消息唯一标识
senderUserId否页面支持的发送者名称兜底参数；内置入口当前只传 messageUId

内置的群聊阅读状态组件使用以下地址跳转：

text
/RCUIKit/pages/chat/read-receipt-status?messageUId=<消息 UId>

页面触发与数据流程​

  1. message-item-common.vue 监听 RCKitStore.enableReadV5，满足条件时渲染 read-receipt-indicator.vue。
  2. 接收方聊天页面中的消息在可视区域达到阈值后，message-list.vue 调用 messageStore.sendV5Receipts() 发送逐条已读回执。
  3. 发送方消息上的 read-receipt-indicator.vue 根据 message.readReceiptInfo 展示未读、部分已读或全部已读状态。
  4. 用户点击群聊状态图标后，组件携带 messageUId 打开详情页面。
  5. 详情页面以 conversationStore.openedConversation 组装会话参数，调用 messageStore.getReadReceiptUsersV5() 分别获取已读和未读成员，首批每类最多 100 人。
  6. 页面根据返回的 pageToken 在列表滚动到底部时继续加载当前标签页；成员名称和头像由 appData.groupMembersCache 补全。
  7. 页面通过 messageStore.getMessageByUid() 从当前会话缓存读取消息摘要、发送时间和缩略图。若缓存消息没有 readReceiptInfo，则直接调用 IMLib 的 getMessageReadReceiptInfoV5() 补充已读、未读数量。

Store 和 API 依赖​

依赖用途
RCKitStore.enableReadV5 / setEnableReadV5()控制逐条消息已读能力和 UI 是否启用
conversationStore.openedConversation提供 conversationType、targetId、channelId
messageStore.getMessageByUid()从当前会话缓存取得消息摘要和已有回执统计
messageStore.getReadReceiptUsersV5()分页取得已读、未读用户，并关联群成员资料
messageStore.sendV5Receipts()接收方对可视消息发送逐条已读回执
appData.groupMembersCache将用户 ID 映射为昵称、群昵称和头像
getMessageReadReceiptInfoV5()缓存中没有统计信息时查询已读、未读数量
getMessagesReadReceiptUsersByPageV5()Store 内部实际调用的已读、未读成员分页接口
信息

getReadReceiptUsersV5() 在 enableReadV5 关闭或 messageUId 为空时返回空列表。成员缓存中没有资料时，列表名称会回退为用户 ID，头像为空。

修改页面和状态图标​

修改目标源码位置
消息摘要、已读/未读标签、成员列表、分页和空状态RCUIKit/pages/chat/read-receipt-status.vue
单聊图标、群聊比例图、展示条件和详情页跳转RCUIKit/pages/chat/message/read-receipt-indicator.vue
阅读状态组件的挂载位置及 enableReadV5 响应RCUIKit/pages/chat/message/message-item-common.vue
可视消息检测和发送回执的时机RCUIKit/pages/chat/message/message-list.vue
V5 开关、回执数据查询和消息缓存更新packages/kit-store/store/RCKitStore.ts、RCKitMessageStore.ts
导航栏、状态图标和主题变量RCUIKit/components/nav-bar.vue、rc-icon.vue、RCUIKit/styles/_variables.scss
注意

详情页面依赖 conversationStore.openedConversation 和当前会话的消息缓存。请从已打开的群聊页面点击阅读状态进入，不要把它作为独立入口。若业务自定义跳转，需要保证打开会话与 messageUId 所属会话一致。