产品简介 - IM 即时通讯 UIKit

更新时间： 2025/06/10 10:51:17

网易云信即时通讯界面组件（简称 IM UIKit）是基于 NIM SDK（网易云信 IM SDK）开发的一款即时通讯 UI 组件库，包括聊天、会话、圈组、搜索、通讯录、群管理等组件。通过 IM UIKit，您可快速集成包含 UI 界面的即时通讯应用。

适用客群

IM UIKit 简化了基于 NIM SDK 的应用开发过程，适合需要快速集成和定制即时通讯功能的开发者和企业客户。它不仅能助您快速实现 UI 功能，也支持调用 NIM SDK 相应的接口实现即时通讯业务逻辑和数据处理。因此，您在使用 IM UIKit 时仅需关注自身业务或个性化扩展。

主要功能

IM UIKit 主要分为会话、群组、联系人等几个 UI 子组件，每个 UI 组件负责展示不同的内容。更多详情，请参考功能概览和 UI 组件介绍。

功能优势

组件解耦

IM UIKit 不同组件可相互独立运行使用。您可按需选择组件，将其快速集成到您的应用，实现相应的 UI 功能，减少无用依赖。

简洁易用

Android、iOS、Flutter：IM UIKit 的业务逻辑层与 UI 层相互独立。在 UI 层，您仅需关注视图展示和事件处理。IM UIKit 清晰的数据流转处理，让 UI 层代码更简洁易懂。
Web：IM UIKit 提供 Provider 来管理各个组件之间的状态，开发者无需关心复杂状态的管理以及 NIM SDK 复杂接口的调用，只需引入并使用即可。

自定义能力

Android、iOS、Flutter：IM UIKit 支持在各 UI 组件的初始化过程中配置自定义 UI。同时提供 Fragment（安卓）、Controller（iOS）、Widget（Flutter）和 View 的能力封装，助您快速将 UI 功能添加到您的应用中。
Web：IM UIKit 提供 hooks 函数，以便用户获取内部状态进行一些自定义操作。另外还提供多个自定义渲染函数以及自定义主题修改，以供开发者自行定制 UI。另外还提供完善的语言设置功能，帮助开发者快速定制专属文案。

业务逻辑处理

IM UIKit 业务逻辑层提供完善的业务逻辑处理能力。您无需关心 SDK 层不同接口间的复杂处理逻辑，业务逻辑层一个接口帮您搞定所有。

工作原理

IM UIKit 采用（Model–View–ViewModel）MVVM 架构模型，实现 UI 展示与业务逻辑开发的相互独立。

Android

graph TD
    subgraph A["UI 层"]
        Activity["Activities<br>ChatP2PActivity, ChatTeamActivity"]
        Fragment["Fragments<br>ChatP2P/TeamFragment"]
        View["自定义视图<br>消息 ViewHolders"]
    end

    subgraph B["响应层"]
        ViewModel["ViewModels<br>ChatBaseViewModel"]
    end

    subgraph C["业务逻辑层"]
        Repository["Repositories"]
        Provider["Providers"]
    end

    subgraph D["SDK 层"]
        NIM["网易 IM SDK"]
    end

    Activity -->|"请求"| Fragment
    Fragment -->|"请求"| ViewModel
    ViewModel -->|"请求"| Repository
    Repository -->|"请求"| Provider
    Provider -->|"API 调用"| NIM

    NIM -->|"回调"| Provider
    Provider -->|"处理数据"| Repository
    Repository -->|"更新"| ViewModel
    ViewModel -->|"更新 LiveData"| Fragment
    Fragment -->|"更新"| View

    %% 为节点定义样式
    classDef node fill:#cce5ff,stroke:#6699ff,stroke-width:1px;
    %% 应用样式到所有节点
    class ChatKit,ConversationKit,ContactKit,TeamKit,LocalConversationKit,LocationKit,AISearchKit,ChatLogic,CommonUI,CorePlugin,NIMCore,AMapSDK node;

    %% 为子图定义样式
    classDef graphs fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px;
    %% 应用样式到所有子图
    class A,B,C,D graphs;

流程	说明
1	IM UIKit 展示层的 Activity/Fragment/View 向响应层的 ViewModel 发送请求。
2	ViewModel 将请求经由业务逻辑层转发至 NIM SDK（网易云信 IM SDK）。
3	NIM SDK 接收请求后触发回调，回调数据经由业务逻辑层和响应层发送至 Activity/Fragment/View。
4	Activity/Fragment/View 将回调数据发送至 RecyclerViewAdapter。后者根据界面需要展示的不同实体的 type，判定具体的 UI 样式。例如，SDK 返回的回调数据为消息数据时，RecyclerViewAdapter 可判定消息数据中包含的消息类型（即 type），将消息在 UI 上展示为对应类型的样式。

iOS

graph TD
    subgraph a["UI层 (View)"]
        A1["NEChatUIKit"]
        A2["NEContactUIKit"]
        A3["NEConversationUIKit"]
        A4["NEQChatUIKit"]
        A5["NETeamUIKit"]
    end

    subgraph b["仓储层 (ViewModel)"]
        B1["NEChatKit"]
        B2["NEContactKit"]
        B3["NEQChatKit"]
    end

    subgraph c["核心层 (Model)"]
        C["NECoreKit"]
    end

    subgraph d["SDK层"]
        D["NIMSDK/V2NIM SDK"]
    end

    A1 --> B1
    A2 --> B2
    A3 --> B1
    A4 --> B3
    A5 --> B1

    B1 --> C
    B2 --> C
    B3 --> C

    C --> D

    %% 为节点定义样式
    classDef process fill:#cce5ff,stroke:#6699ff,stroke-width:1px;
    classDef decision fill:#ffffff,stroke:#ff4da6,stroke-width:1px;
    classDef endpoint fill:#e5ffe5,stroke:#009900,stroke-width:1px;

    class A1,A2,A3,A4,A5 process;
    class C,F,H,L decision;
    class B1,B2,B3 endpoint;

    %% 为子图定义样式
    classDef linkGroup fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px
    classDef statusGroup fill:#f3e5f5,stroke:#f3e5f5,stroke-width:2px
    classDef clientGroup fill:#ffe5ff,stroke:#ffe5ff,stroke-width:2px
    classDef resultGroup fill:#ffffcc,stroke:#ffffcc,stroke-width:2px

    %% 应用样式到子图
    class a,b,c,d linkGroup

流程	说明
1	IM UIKit 展示层的 UIViewController/View 向响应层的 ViewModel 发送请求。
2	ViewModel 将请求经由业务逻辑层转发至 NIM SDK（网易云信 IM SDK）。
3	NIM SDK 接收请求后触发回调，回调数据经由业务逻辑层和响应层发送至 UIViewController/View。
4	UIViewController/View 将回调数据发送至 UITableViewDelegate 和 UItableViewDataSource。后两者根据需在界面上展示的不同实体的 identifier，判定具体的 UI 样式。例如，SDK 返回的回调数据为消息数据时，UITableViewDelegate 和 UItableViewDataSource 可通过消息数据中包含的代表消息类型的 Identifier，将消息在 UI 上展示为对应类型的样式。

鸿蒙

graph TD
    subgraph 1["应用层"]
        App["示例应用程序 (imkit_sample)"]
    end

    subgraph 2["UI 组件层"]
        ConversationUI["会话 UI<br>(conversationkit_ui)"]
        LocalConversationUI["本地会话 UI<br>(localconversationkit_ui)"]
        ChatUI["聊天 UI<br>(chatkit_ui)"]
        ContactUI["联系人 UI<br>(contactkit_ui)"]
        TeamUI["团队 UI<br>(teamkit_ui)"]
    end

    subgraph 3["业务逻辑层"]
        ChatLogic["聊天业务逻辑<br>(chatkit)"]
        Common["通用工具<br>(common)"]
        CoreKit["核心套件<br>(corekit)"]
    end

    subgraph 4["SDK 层"]
        NimSDK["网易 IM SDK"]
    end

    App --> ConversationUI
    App --> LocalConversationUI
    App --> ChatUI
    App --> ContactUI
    App --> TeamUI

    ConversationUI --> ChatLogic
    ConversationUI --> Common

    LocalConversationUI --> Common

    ChatUI --> ChatLogic
    ChatUI --> Common

    ContactUI --> Common
    ContactUI --> ChatLogic

    TeamUI --> Common
    TeamUI --> ChatLogic

    ChatLogic --> CoreKit
    CoreKit --> NimSDK
    %% 为子图定义样式
    classDef linkGroup fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px
    classDef statusGroup fill:#cce5ff,stroke:#ffe5ff,stroke-width:2px

    %% 应用样式到子图
    class 1,2,3,4,5 linkGroup
    class 5 statusGroup

上图中：

UIKit 组件 UI 层：UI 组件中 UI 渲染和数据传递过程，通过业务逻辑层来进行数据获取和数据监听，UI 组件根据数据变更来刷新 UI。组件的被动刷新，采用鸿蒙系统提供的 @Local 装饰器，实现组件 UI 状态管理。
UIKit 业务逻辑层：将 IM SDK 接口能力进行组装提供给 UI 层。
IM SDK：IM UIKit 依赖的底层网易云信即时通讯 IM SDK。

Web

IM UIKit 提供了多个 UI 组件，您可以自行选择并组合。IM UIKit 利用 React Context API，内部管理了各个组件之间的状态，并利用 React 单向数据流来驱动 UI 更新与渲染。

graph TD
    subgraph 1["应用层"]
        ReactApp["React 应用"]
        VueApp["Vue 应用"]
    end

    subgraph 2["UIKit 层"]
        IMUIKit["IMUIKit 类"]
        CoreComponents["核心 UI 组件"]
    end

    subgraph 3["状态层"]
        RootStore["RootStore"]
        subgraph 5["Store 模块"]
            ConversationStore["会话 Store"]
            MessageStore["消息 Store"]
            UserStore["用户 Store"]
            TeamStore["团队 Store"]
            RelationStore["关系 Store"]
            UIStore["UI Store"]
        end
    end

    subgraph 4["SDK 层"]
        V2NIM["V2NIM (nim-web-sdk-ng)"]
    end

    ReactApp -->|"初始化"| IMUIKit
    VueApp -->|"初始化"| IMUIKit
    IMUIKit -->|"渲染"| CoreComponents
    IMUIKit -->|"创建"| RootStore
    RootStore -->|"包含"| ConversationStore & MessageStore & UserStore & TeamStore & RelationStore & UIStore
    ConversationStore & MessageStore & UserStore & TeamStore & RelationStore -->|"与之交互"| V2NIM


    %% 为子图定义样式
    classDef linkGroup fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px
    classDef statusGroup fill:#cce5ff,stroke:#ffe5ff,stroke-width:2px

    %% 应用样式到子图
    class 1,2,3,4,5 linkGroup
    class 5 statusGroup

Flutter

graph TD
    subgraph 1["应用层"]
        A["Flutter 应用"]
    end

    subgraph 2["UI Kit 层"]
        B["nim_chatkit_ui"]
        C["nim_contactkit_ui"]
        D["nim_conversationkit_ui"]
        E["nim_teamkit_ui"]
        F["nim_searchkit_ui"]
    end

    subgraph 3["核心服务层"]
        G["nim_core_v2"]
        H["netease_corekit_im"]
        K["nim_chatkit"]
    end

    A --> B
    A --> C
    A --> D
    A --> E
    A --> F

    B --> G
    C --> G
    D --> G
    E --> G
    F --> G

    B --> K
    C --> K
    D --> K
    E --> K
    F --> K

    K --> H

    H --> G

    G --> J["网易 IM 后端服务"]
    %% 为子图定义样式
    classDef linkGroup fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px
    classDef statusGroup fill:#cce5ff,stroke:#ffe5ff,stroke-width:2px

    %% 应用样式到子图
    class 1,2,3,4,5 linkGroup
    class 5 statusGroup

该架构采用分层方法：

UI Kit 层包含五个主要 UI 组件
核心服务层提供底层通信基础设施
每个 UI 组件与 NIM 核心 SDK (nim_core_v2)通信，实现后端服务集成

uni-app

该库遵循结构化的组件架构，将即时通讯的不同功能区域分开：

graph TD
    subgraph 1["主要组件类别"]
        Conversation["会话组件"]
        Chat["聊天界面组件"]
        User["用户资料组件"]

        Conversation --> ConvList["会话列表"]
        Conversation --> ConvItem["会话项"]

        Chat --> MsgList["消息列表"]
        Chat --> MsgInput["消息输入"]
        Chat --> MsgForward["消息转发"]

        MsgList --> MsgItem["消息项"]
        MsgInput --> EmojiPanel["表情面板"]
        MsgInput --> VoiceInput["语音输入"]
        MsgInput --> MorePanel["更多面板"]

        User --> Profile["用户资料"]
        User --> Card["用户名片"]
    end
    %% 为子图定义样式
    classDef linkGroup fill:#f2f2f2,stroke:#f2f2f2,stroke-width:2px
    classDef statusGroup fill:#cce5ff,stroke:#ffe5ff,stroke-width:2px

    %% 应用样式到子图
    class 1,2,3,4,5 linkGroup
    class 5 statusGroup

组件架构

Android

上图中：

UIKit 层的 ContactKit-ui、ChatKit-ui、ConversationKit-ui 和 TeamKit-ui，对应上述工作原理图中的 Activity/Fragment/View。
UIKit 层的 ChatKit，对应上述工作原理图中的 Repository。
CoreKit 层对应上述工作原理图中的 Provider。

iOS

上图中：

UIKit UI 层的 NEContactUIKit、NEChatUIKit、NEConversationUIKit 和 NETeamUIKit，对应上述工作原理图中的 UIViewController/View。
UIKit UI 层的 NEChatKit，对应上述工作原理图中的 Repository。
NECoreKit 层对应上述工作原理图中的 Provider。

鸿蒙

上图中：

Demo：按照当前通用的 IM 场景，将 UI 组件组装成一个完整的 App。包括应用初始化、登录、UI 组件搭建首页和设置等功能。
UI 组件：包含会话列表、消息、通讯录和群组四个组件，您可以根据自己的需求来选择集成一个或者多个。
业务接口层：该模块根据 UI 组件的业务逻辑，将 IM SDK 的接口数据进行组合优化，为上层 UI 层提供更加便捷高效的接口。
组件框架和公共库：提供组件的框架服务，包括组件之间的通信、初始化、公共能力，供上层组件使用。
IM SDK：IM UIKit 依赖的底层网易云信即时通讯 IM SDK。

Web

Flutter

上图中：

UIKit UI 层的 nim_contactkit_ui、nim_chatkit_ui 和 nim_conversationkit_ui，对应上述工作原理图中的 Widget Tree。
UIKit UI 层的 nim_contactKit、nim_chatKit 和 nim_conversationKit，对应上述工作原理图中的 Repository。
UIKitCore 层对应上述工作原理图中的 Provider。

适用客群

主要功能

功能优势

组件解耦

简洁易用

自定义能力

业务逻辑处理

工作原理

组件架构

相关文档