TUIKit 是基于 IM SDK 的一款 UI 组件库，可通过 UI 组件快速实现聊天、会话、搜索、关系链、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
完整版界面效果如下图所示：
关键概念
针对用户不同场景的诉求和体积要求，我们推出了多个版本的 UI 组件 ，您可以根据实际业务需求选择集成最适合的版本。
前提条件
HBuilderX 需要升级到最新版本
TypeScript / JavaScript （TUIKit 使用 ts 语言开发，支持在 js 或者 ts 项目中集成）
Vue2 / Vue3
sass（sass-loader 版本 ≤ 10.1.1）
node（12.13.0 ≤ node，推荐使用 Node.js 官方 LTS 版本 16.17.0）
npm（版本请与 node 版本匹配）
创建项目
1. 打开 HBuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为
chat-example 的 uni-app 项目。
2. 在终端输入
npm init -y，创建package.json文件。npm init -y
下载并导入组件
步骤1：安装依赖
下载 TUIKit 并拷贝源码至项目中：
# unplugin-vue2-script-setup 主要用于 vue2, 如果是 vue3 项目, 可不下载npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./TUIKit
# unplugin-vue2-script-setup 主要用于 vue2, 如果是 vue3 项目, 可不下载npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-uniapp .\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-uniapp\\excluded-list.txt
步骤2：引入组件
1. 工程配置
在
manifest.json 文件的源码视图中开启小程序分包 subPackages。// weixin miniProgram"mp-weixin" : {"appid" : "","optimization" : {"subPackages" : true}},
注意：
小程序默认使用分包集成，打包小程序时
manifest.json 不要配置 lazyCodeLoading 选项。Vue2 项目必须在根目录下创建或修改 vue.config.js 。
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;module.exports = {parallel: false,configureWebpack: {plugins: [ScriptSetup({/* options */}),],},chainWebpack(config) {// disable type check and let `vue-tsc` handles itconfig.plugins.delete('fork-ts-checker');},};
2. 集成 TUIKit
请将以下内容复制到项目对应的文件中。
<script lang="ts">import { TUILogin } from '@tencentcloud/tui-core-lite';import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite';let vueVersion = 3;// 填写步骤三获取到的鉴权信息uni.$SDKAppID = 0; // Your SDKAppIDuni.$userID = ''; // Your userIDuni.$userSig = ''; // Your userSigexport default {onLaunch: function () {TUILogin.login({SDKAppID: uni.$SDKAppID,userID: uni.$userID,userSig: uni.$userSig,framework: `vue${vueVersion}`}).then(() => {TUIChatEngine.isReady();}).catch((error) => {console.error(error);});}};</script><style>/* common css for page */uni-page-body,html,body,page {width: 100% !important;height: 100% !important;overflow: hidden;}</style>
{"pages": [{"path": "pages/index/index" // 您的项目首页}],"subPackages": [{"root": "TUIKit","pages": [{"path": "components/TUIConversation/index","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIChat/index","style": {"navigationBarTitleText": "腾讯云 IM","app-plus": {"softinputMode": "adjustResize","titleNView": {"buttons": [{"type": "menu"}]}},"h5": {"titleNView": {"buttons": []}}}},// 集成 chat 组件，必须配置该路径: 视频播放{"path": "components/TUIChat/video-play","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIChat/web-view","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIContact/index","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIGroup/index","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUISearch/index","style": {"navigationBarTitleText": "聊天记录"}}]}],"preloadRule": {"pages/index/index": {"network": "all","packages": ["TUIKit"]}},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}
<template><div><button @click="openConversationList">打开会话列表</button><button @click="openContact">打开联系人</button></div></template><script>export default {methods: {// 打开会话列表openConversationList() {uni.navigateTo({ url: '/TUIKit/components/TUIConversation/index' });},// 打开联系人openContact() {uni.navigateTo({ url: '/TUIKit/components/TUIContact/index' });},},};</script>
如果您是 Vue2 项目，请在 main.js 中引入组合式API，防止环境变量
isPC 等无法使用。// #ifndef VUE3import VueCompositionAPI from '@vue/composition-api';Vue.use(VueCompositionAPI);// #endif
步骤3：获取 SDKAppID、userID 和 userSig
参数 | 类型 | 说明 |
SDKAppID | Number | 说明： SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。 说明： |
注意：
SDKAppID：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。
userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
运行和测试
步骤1：运行
步骤2：发送第一条消息
步骤3：增加音视频通话（可选）
功能 | 音视频通话组件 |
1v1 视频、音频通话 | ✓ |
群组通话（9人及以下） | ✓ |
中途呼叫/加入三方通话 | ✓ |
自定义呼叫铃声 | ✓ |
呼叫/接听/拒绝/挂断 | ✓ |
1. 开通服务
语音通话 | 视频通话 |
 |  |
2. 配置小程序域名白名单
常见问题
Debug 文件的作用？
主要作用：在开发阶段，TUIKit 提供了 debug文件夹中的本地 UserSig 生成脚本，用于方便开发和调试。
警告：（该方法仅适合本地跑通 Demo 和功能调试）
该方法中的 SECRETKEY 容易被反编译逆向破解。
一旦密钥泄露，攻击者可以盗用您的腾讯云流量。
仅适用于本地 Demo 运行和功能调试，绝对不能用于生产环境。
uniapp 运行小程序中 Chat 的实例是 web 实例还是 native 实例？
chat-uikit-uniapp 运行小程序中，其 Chat 实例是 web 实例，而非 native 实例。
Conversation 中 groupProfile 或 userProfile 信息不全是为什么，如何获取？
原因：会话（Conversation）中携带的群组资料（groupProfile）或用户资料（userProfile）通常是简化版本，主要包含最核心的信息，例如基本的群名称、群头像或用户的昵称、头像等。这样设计的首要目的是为了提升性能和应用响应速度。
解决方案：
说明：
群组或用户的自定义字段的获取都需要在完整信息中获取。
参考文档
TUIKit GitHub 源码：
实现更多功能，请参考 ChatEngine API 文档：
