产品简介

更新时间: 2024/09/14 11:23:04

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

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

功能优势

组件解耦

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
IMuikitDataFlow_Android.png
流程 说明
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
IMuikitDataFlow_iOS.png
流程 说明
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 上展示为对应类型的样式。
Web

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

app_structure.drawio.png
Flutter
app_structure_Flutter.png
流程 说明
1 IM UIKit 展示层的 Widget 向响应层的 ViewModel 发送请求。
2 ViewModel 将请求经由业务逻辑层转发至 NIM SDK(网易云信 IM SDK)。
3 NIM SDK 接收请求后触发回调,回调数据经由业务逻辑层发送至响应层处理,随后通知 Wiget 刷新。
4 Widget 从响应层获取到新变更的数据,后根据新的数据重新构建 Widget 完成刷新。

组件架构

Android
app_structure_android.png

上图中:

  • UIKit 层的 ContactKit-uiChatKit-uiConversationKit-uiTeamKit-ui,对应上述工作原理图中的 Activity/Fragment/View。
  • UIKit 层的 ChatKit,对应上述工作原理图中的 Repository。
  • CoreKit 层对应上述工作原理图中的 Provider。
iOS
app_structure_iOS.png

上图中:

  • UIKit UI 层的 NEContactUIKitNEChatUIKitNEConversationUIKitNETeamUIKit,对应上述工作原理图中的 UIViewController/View。
  • UIKit UI 层的 NEChatKit,对应上述工作原理图中的 Repository。
  • NECoreKit 层对应上述工作原理图中的 Provider。
Web
app_structure_foure.png
Flutter
app_structure_foure_Flutter.png

上图中:

  • UIKit UI 层的 nim_contactkit_uinim_chatkit_uinim_conversationkit_ui,对应上述工作原理图中的 Widget Tree。
  • UIKit UI 层的 nim_contactKitnim_chatKitnim_conversationKit,对应上述工作原理图中的 Repository。
  • UIKitCore 层对应上述工作原理图中的 Provider。

相关文档

此文档是否对你有帮助?
有帮助
去反馈
  • 功能优势
  • 组件解耦
  • 简洁易用
  • 自定义能力
  • 业务逻辑处理
  • 工作原理
  • 组件架构
  • 相关文档