TUIKit 介绍
TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、关系链、群组、音视频通话等功能。
基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
TUIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。
基于 React 开发的 TUIKit 界面风格更契合境外客户的使用习惯,而且支持国际化,如果您的业务有出海的需求,欢迎接入。
TUIKit 组成
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/69ef3132cfac70f91d9b220abc402700.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/69ef3132cfac70f91d9b220abc402700.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/1bc6b1fd8830911f279d6e85e40f04fa.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/1bc6b1fd8830911f279d6e85e40f04fa.png)
TUIChat 重点功能介绍
TUIChat 主要负责消息界面的展示。您可以利用它直接发送不同类型的消息,支持文字/表情/图片/视频/文件/自定义等消息类型,同时支持消息转发/撤回/引用、查询、已读回执等功能。
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/353a266ac0b69163bd95e0234ed2221d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/353a266ac0b69163bd95e0234ed2221d.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/6fdacbdae87863bfde5eaf7c1c2be7db.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6fdacbdae87863bfde5eaf7c1c2be7db.png)
说明:
为尊重表情设计版权,IM Demo/TUIKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的QQ表情版权归腾讯所有且不支持授权,请您谅解并知悉。
![](https://qcloudimg.tencent-cloud.cn/image/document/8e6662d637035c4b97ee6854a2778c21.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/8e6662d637035c4b97ee6854a2778c21.png)
TUIConversation 功能介绍
TUIConversation 主要负责会话列表的展示和编辑,包含会话置顶、会话删除等功能。
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/697a9bdba9a271be9700c03d1c9d621a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/697a9bdba9a271be9700c03d1c9d621a.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/51518dda3dcbbdc8b77ca6fa601114e9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/51518dda3dcbbdc8b77ca6fa601114e9.png)
TUIGroup 功能介绍
TUIGroup 主要负责群资料、群成员、群组权限的管理。
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/9c8b32da27b681bb8142540f0b053f6b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9c8b32da27b681bb8142540f0b053f6b.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/2d64f3c13779d78f14bab6ef7b487ce3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2d64f3c13779d78f14bab6ef7b487ce3.png)
TUIContact 重点功能介绍
TUIContact 主要负责关系链展示以及创建会话等操作。
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/2bd05a715c7349c55ddfc316e87a73e2.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2bd05a715c7349c55ddfc316e87a73e2.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/79d462bd9dbbd095aec2937eeb3b9ac9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/79d462bd9dbbd095aec2937eeb3b9ac9.png)
TUIProfile 重点功能介绍
TUIProfile 主要负责用户资料的管理。
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/f0bb8ced0a3e0ffc5955809ab7d8dd9d.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f0bb8ced0a3e0ffc5955809ab7d8dd9d.png)
H5 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/13ff355b586b09c0be1a31eaa5359233.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/13ff355b586b09c0be1a31eaa5359233.png)
交流与反馈