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

核心的聊天页面我们使用了原生动画模块,对每一个关键模块单独处理位置计算,带来 uniapp 平台上更加流畅的聊天体验。


前提条件
开通服务
步骤1:创建 IM 应用

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

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


环境准备
IDE: HBuilderX 升级到新版本。
语言: nvue。
运行环境: Node.js v12 版本及以上。
包管理: npm (版本需与 Node 版本匹配)。
支持平台: Uniapp 打包 App。
说明:
操作步骤
步骤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 SDKAppIDconst SECRETKEY = 'xxx'; // Your secretKey
步骤5:生成自定义基座并运行
单击 HBuilderX 的运行 > 运行到手机或模拟器 > 制作自定义调试基座,使用云端证书制作 Android 或 iOS 自定义调试基座。


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

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