聊天页面

概述

环信单群聊 ChatUIKit 提供 ChatPage 和 ChatView 两种方式方便用户快速集成聊天页面和自定义聊天页面。该页面提供如下功能：

• 发送和接收消息, 包括文本、表情、图片、语音、视频、文件和名片消息。
• 对消息进行复制、引用、撤回、删除、编辑和重新发送。
• 清除本地消息。

消息相关功能，详见 功能介绍文档。

聊天页面

创建聊天页面

使用 ChatPage

单群聊 UIKit 提供 ChatPage 页面，应用程序可以采用组件导航（Navigation）跳转到 ChatPage，示例代码如下：

// conversationId: 单聊会话为对端用户 ID，群聊会话为群组 ID。
// conversationType：单聊为 ConversationType.Chat，群聊为 ConversationType.GroupChat。
this.navPathStack?.pushPath({name: "ChatPage", param: {
        conversationId: this.conversationId,
        conversationType: this.conversationType
    } as ChatPageParams
});

使用 ChatView

开发者也可以使用单群聊 UIKit 提供的 ChatView 创建聊天页面，示例代码如下：

步骤一：编写包含 NavDestination 子组件的页面。

import { ChatPageParams, ChatType, ChatView, ComposeTitleBar } from '@easemob/chatuikit';

@ComponentV2
export struct MyChatPage {
  pathStack: NavPathStack = new NavPathStack();
  @Local conversationId: string = '';
  @Local chatType: ChatType = ChatType.Chat;

  build() {
    NavDestination() {
      ComposeTitleBar({
        primaryTitle: this.conversationId,
        onBackPress: () => {
          this.pathStack.pop();
        }
      })
      ChatView({
        conversationId: this.conversationId,
        chatType: this.chatType,
        pathStack: this.pathStack
      })
        .layoutWeight(1)
    }
    .hideTitleBar(true)
    .onReady((context) => {
      this.pathStack = context.pathStack;
      let params = this.pathStack.getParamByName("MyChatPage") as ChatPageParams[]
      if (params) {
        let param = params[0] as ChatPageParams;
        this.conversationId = param.conversationId;
        this.chatType = param.conversationType as number;
      } else {
        // 如果没有传参数则关闭当前页面
        this.pathStack.removeByName("MyChatPage");
      }
    })
  }
}

@Builder
export function MyChatPageBuilder() {
  MyChatPage();
}

步骤二：将页面配置到系统配置文件 route_map.json 中（参考 系统路由表）。

// 1. 工程配置文件 module.json5 中配置 {"routerMap": "$profile:route_map"}
// 2. 在 route_map.json 注册 MyChatPage 信息
{
  "routerMap": [
    {
      "name": "MyChatPage",
      "pageSourceFile": "src/main/ets/pages/MyChatPage.ets",
      "buildFunction": "MyChatPageBuilder",
      "data": {
        "description" : "Chat page"
      }
    }
  ]
}

步骤三：跳转到 MyChatPage 页面。

this.navPathStack?.pushPath({name: "MyChatPage", param: {
        conversationId: this.conversationId,
        conversationType: this.conversationType
    } as ChatPageParams
});