跳到主要内容

会话页面集成与定制

会话页面对应 RCUIKit/pages/chat/index.vue，用于展示当前会话的标题、消息列表和消息输入区域。RCUIKit 提供的是可直接修改的页面源码，您可以在此页面基础上调整布局和交互。

效果预览​

会话页面

页面组成​

index.vue 从上到下由以下三部分组成：

区域对应源码主要职责
导航栏RCUIKit/pages/chat/index.vue、RCUIKit/components/nav-bar.vue返回会话列表、显示总未读数、会话名称和正在输入状态
消息列表RCUIKit/pages/chat/message/message-list.vue加载、监听和滚动展示当前会话的消息
输入区域RCUIKit/pages/chat/message/messageInput/message-input.vue发送文本、表情、语音、图片和视频，以及处理回复和群聊 @

有关两个内部模块的详细说明，请参见消息列表与消息组件和输入区域。

数据依赖​

会话页面通过 uni.$RongKitStore 读取和更新状态：

  • conversationStore：提供 openedConversation、总未读数和当前会话的打开、关闭能力。
  • messageStore：为消息列表提供历史消息和实时消息，并负责发送、重发、撤回、转发等操作。
  • typingStore：在单聊中发送和监听正在输入状态；收到状态后，导航栏标题会显示“对方正在输入中...”或“对方正在讲话...”。
  • appData：为群成员名称、头像、引用消息发送者和群聊 @ 成员列表提供用户数据。
  • speechToTextStore：在语音转文字功能开启后，维护高清语音消息的转换状态和结果。

系统会话不支持客户端发送消息，因此 index.vue 会在当前会话类型为 SYSTEM 时隐藏输入区域。

仅集成会话页面​

如果您的应用已有会话入口，可以只配置会话页面及其关联页面，无需配置 RCUIKit 的会话列表页面。

配置路由​

在项目的 pages.json 中加入以下页面：

JSON
{
  "pages": [
    {
      "path": "RCUIKit/pages/chat/index",
      "style": {
        "navigationStyle": "custom",
        "app-plus": {
          "bounce": "none"
        }
      }
    },
    {
      "path": "RCUIKit/pages/chat/forward-message",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "RCUIKit/pages/chat/video-play",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "RCUIKit/pages/chat/read-receipt-status",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

其中，forward-message、video-play 和 read-receipt-status 分别由消息转发、视频消息播放和阅读状态入口打开。即使只集成会话页面，也应保留您实际启用功能所需的关联路由。

平台导航栏配置

当前 Demo 在抖音小程序中使用原生导航栏，在其他平台使用 RCUIKit 自定义导航栏。若项目需要支持抖音小程序，请保留 Demo pages.json 和 index.vue 中的 MP-TOUTIAO 条件编译配置。

设置当前会话​

跳转前先创建内存会话，再通过 openConversation 将其设为当前会话：

typescript
const conversationOption = {
  conversationType: RongIMLib.ConversationType.PRIVATE,
  targetId: 'YourTargetId',
};

const conversation = uni.$RongKitStore.conversationStore.createCachedConversation(conversationOption);
uni.$RongKitStore.conversationStore.openConversation(conversation);

uni.navigateTo({
  url: '/RCUIKit/pages/chat/index',
});

conversationType 支持单聊和群聊。设置当前会话需要在 Web IMLib 和 imkit-store 初始化完成后执行，不需要等待 Web IMLib 连接成功；跳转页面前仍应确认连接已成功，否则消息收发不可用。初始化方式参见快速上手。

常见修改​

  • 修改返回按钮、未读数或标题栏：编辑 pages/chat/index.vue，公共导航栏外观参见公共组件与样式。
  • 修改消息列表布局和滚动加载：编辑 pages/chat/message/message-list.vue。
  • 修改消息气泡、头像、长按菜单或消息类型展示：参见消息列表与消息组件。
  • 修改底部输入栏、表情、工具面板、录音或群聊 @：参见输入区域。
  • 修改全局颜色和字号：编辑 RCUIKit/styles/_variables.scss，具体变量说明参见公共组件与样式。
升级注意

RCUIKit 位于项目源码中。重新复制或替换 RCUIKit 目录会覆盖您的 UI 修改，升级前请保留差异，并在新版本源码上重新合并。