uni-app

最近更新时间:2026-03-10 15:15:10

我的收藏
chat-uikit-uniapp 是一款基于腾讯云 Chat SDK 的 uniapp UI 组件库,提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件,您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-uniapp 界面效果如下图所示:

核心的聊天页面我们使用了原生动画模块,对每一个关键模块单独处理位置计算,带来 uniapp 平台上更加流畅的聊天体验。
四大模块独立计算位置信息(仅为渲染示意图)
四大模块独立计算位置信息(仅为渲染示意图)

chat-uikit-uniapp 支持离线推送,通过集成 uni-app 腾讯云推送服务(Push),即使在 App 不在前台或者没有在运行的情况下,也能收到离线的消息。效果如下:


前提条件

开通服务

步骤1:创建 IM 应用

登录 即时通信 IM 控制台,在应用管理页面,单击创建新应用。如果您已有应用,可省略创建应用过程。


步骤2:获取 SDKAppID 与密钥

应用管理的应用列表中,获取新应用的 SDKAppIDSecretKey (密钥) 信息。
注意:
查看密钥信息需要验证身份。
密钥信息为敏感信息,为防止他人盗用,请妥善保管,谨防泄露。


步骤3:创建测试账号

账号管理中创建两个预设账号用于互相发送消息,以便后续的开发和调试。




环境准备

IDE: HBuilderX 升级到新版本。
语言: nvue。
运行环境: Node.js v12 版本及以上。
包管理: npm (版本需与 Node 版本匹配)。
支持平台: Uniapp 打包 App。
说明:
Uniapp 打包微信小程序请另外参考 uniapp 精简版

操作步骤

步骤1:获取 Demo 代码

说明:
为了尊重版权,IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前,请您替换为自己设计或拥有版权的其他表情包。请注意,下图所示的默认小黄脸表情包版权属于腾讯云,您可以通过升级至 IM 企业版套餐 免费使用该表情包。



git clone https://github.com/Tencent-RTC/TUIKit_uni-app


步骤2:安装项目依赖

cd App && npm install

步骤3:导入项目并配置 AppID。

1. 打开 HBuilderX,选择 文件 > 导入 > 从本地目录导入,导入 TUIKit_uni-app/App目录。

2. 打开 manifest.json > 基础配置,重新获取 Uniapp 的 AppID


步骤4:配置 IM 应用信息。

开通服务 > 步骤2 中获取的 SDKAppID 和 SecretKey (密钥),赋值到 TUIKit_uni-app/App/debug/GenerateTestUserSig.js 文件中的对应变量。
const SDKAppID = 0; // Your SDKAppID
const SECRETKEY = 'xxx'; // Your secretKey

步骤5:生成自定义基座并运行

单击 HBuilderX 的运行 > 运行到手机或模拟器 > 制作自定义调试基座,使用云端证书制作 Android 或 iOS 自定义调试基座。


单击 HBuilderX 菜单栏中的:运行 > 运行到手机或模拟器 > 运行到“指定”基座


步骤6:发送您的第一条消息

登录应用:在登录页输入 前提条件 > 开通服务 > 步骤3:创建测试账号 中创建的测试账号,登录后选择聊天场景。
添加好友:点击通讯录,添加好友搜索框中输入另一个测试账号的userID 前提条件 > 开通服务 > 步骤3:创建测试账号 搜索并完成添加。
开启会话:点击好友信息进入好友详情,点击发送消息即可进入聊天界面,发送您的第一条消息。


联系我们

如遇任何问题,可联系 官网售后 获得专业工程师支持。