警告：
该版本集成精简版 SDK 减小体积，暂时无法使用 TUICallKit。
TUIKit 新手接入指引视频
对于 TUIKit v2.2.0 及之后的版本，如果您是首次接入，强烈建议您参考视频指引完成 TUIKit 的接入。
chat-uikit-uniapp 介绍
chat-uikit-uniapp （vue2/vue3）是一款基于腾讯云 Chat SDK 的 uniapp UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-uniapp 界面效果如下图所示：
消息云端搜索功能界面效果如下图所示：
在线客服功能界面效果如下图所示：
开发环境要求
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 版本匹配）
TUIKit 源码集成
完成以下步骤即可发送您的第一条消息。
步骤1：创建项目 （已有项目可忽略）
打开 HBuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 
chat-example 的 uni-app 项目。步骤2：下载 TUIKit 组件
HBuilderX 创建项目时默认不会创建
package.json 文件，请在项目根目录下执行以下命令创建 package.json 文件：npm init -y
下载 TUIKit 并拷贝源码至项目中：
npm i @tencentcloud/chat-uikit-uniapp@3.0.0-beta.3
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./TUIKit
npm i @tencentcloud/chat-uikit-uniapp@3.0.0-beta.3
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-uniapp .\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-uniapp\\excluded-list.txt
步骤3：引入 TUIKit 组件
1. 工程配置
在
manifest.json 文件的源码视图中开启小程序分包 subPackages。// weixin miniProgram"mp-weixin" : {"appid" : "","optimization" : {"subPackages" : true}},
注意：
小程序默认使用分包集成，打包小程序时
manifest.json 不要配置 lazyCodeLoading 选项。2. 集成 TUIKit
请将以下内容复制到项目对应的文件中。
<script lang="ts">import { TUILogin } from '@tencentcloud/tui-core';let vueVersion = 3;// Required information// You can get userSig from TencentCloud chat console for Testing TUIKit.// Deploy production environment please get it from your server.// View https://cloud.tencent.com/document/product/269/32688uni.$SDKAppID = 0; // Your SDKAppIDuni.$userID = ''; // Your userIDuni.$userSig = ''; // Your userSigexport default {onLaunch: function () {TUILogin.login({SDKAppID: uni.$SDKAppID,userID: uni.$userID,userSig: uni.$userSig,useUploadPlugin: true, // If you need to send rich media messages, please set to true.framework: `vue${vueVersion}` // framework used vue2 / vue3}).catch(() => {});}};</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"}}
3. 在项目主包中配置 TUIConversation 和 TUIContact 的入口
请将以下内容复制到 pages/index/index.vue 文件中。
<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>
步骤4：获取 SDKAppID 、userID 、 userSig
获取 SDKAppID、userID、userSig 信息后填写到
App.vue 中对应的字段上。uni.$SDKAppID = 0; // Your SDKAppIDuni.$userID = ''; // Your userIDuni.$userSig = ''; // Your userSig
SDKAppID 信息，可通过 即时通信 IM 控制台 获取:
userID 信息，可单击 即时通信 IM 控制台 > 账号管理，切换至目标应用所在账号，创建 2 个 userID 方便后续体验聊天功能。
userSig 信息，可单击 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 userID，即可生成 userSig。
步骤5：启动项目
1. 使用 HBuilderX 启动该项目，单击 运行 > 运行到小程序模拟器 > 微信开发者工具。
2. 如果 HBuilderX 没有自动拉起微信开发者工具，请使用微信开发者工具手动打开编译后的项目。
使用微信开发者工具打开项目根目录下的
unpackage/dist/dev/mp-weixin 即可。3. 打开项目后，在微信开发者工具 详情 > 本地设置 中勾选 不校验合法域名、web-view（业务域名）、TLS版本以及 HTTPS 证书。
步骤6：发送您的第一条消息
1. 单击 打开会话列表 按钮，在搜索栏输入 步骤4 中创建的 userID，选中后单击 【完成】，发送您的第一条消息。
步骤7：发布前准备 & 微信小程序体积优化
发布前请配置小程序域名白名单
发布前请删除 Debug 脚本
出于体积和安全双重因素考虑，请在发布前删除项目目录下
/TUIKit/debug 文件夹。在开发阶段为了方便开发，项目提供生成本地 UserSig 的脚本文件存放于TUIKit/debug文件夹中，但这并不安全，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。因此，请在项目发布前删除Debug脚本，使用后台生成 UserSig，具体原因和操作步骤请参考文档：生成 UserSig。小程序发布前使用 HBuilderX 的发行功能进行打包
小程序发布前使用 HBuilderX 的发行功能进行打包。使用发行方式进行打包会删除代码中的 Source Map 等信息，打包体积最小。在 HBuilderX 的工具栏中依次单击发行 > 小程序-微信（仅适用于 uni-app）。
然后单击发行，会在项目目录中的
unpackage/dist/build/mp-weixin 文件夹中生成微信小程序源码，再使用微信开发者工具打开该文件夹即可。
更多高级特性（强烈推荐）
仅集成聊天
如果您按照本文步骤集成 TUIKit 后，需要单独使用 TUIChat 能力，按照以下示例代码用
uni.navigateTo 进行跳转即可。// 1v1 chat: conversationID = `C2C${userID}`// group chat: conversationID = `GROUP${groupID}`const conversationID = '';uni.navigateTo({ url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`});
云端审核
在消息发送、资料修改场景中，很有可能会扩散不合适的内容，特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容，不仅严重损害了用户们的身心健康，更很有可能违法并导致业务被监管部门查封。即时通信 IM 支持云端内容审核（反垃圾信息）功能，可针对不安全、不适宜的内容进行自动识别、处理，为您的产品体验和业务安全保驾护航。
云端审核：在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容，支持针对不同场景的不同内容分别配置审核策略，并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景，只需在 IM 控制台打开功能开关，即可直接使用。
常见问题
1. 我只需要聊天功能，如何单独集成 TUIChat？如何直接打开指定单聊/群聊会话？
2. 集成 UIKit 在 page.json 中默认没有配置 tabBar，项目中如何实现 tabBar 功能？
如果您是打包 App / H5，需要在 pages.json 中配置 tabBar。可以参考 uni-app 官网 tabBar 配置 自实现。
如果您是打包小程序，因为主包体积限制，小程序默认是分包集成，如果您的 tabBar 需要自定义实现。可参见 uni-app 官网 自定义 tabBar。
3. 更多问题请参见：uni-app 相关问题。
参考文档
TUIKit GitHub 源码：
实现更多功能，请参考 ChatEngine API 文档：
