即时通信 IM Web-聊天互动（含 UI）-文档中心-腾讯云

适用场景
Web & H5 平台，独立集成私信聊天（1V1）或者群聊（Group），例如房产中介咨询、电商在线客服、保险远程定损等。
﻿
开发环境要求
Vue ( 全面支持 Vue2 & Vue3 ， 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
TypeScript （ 如您是 js 项目， 请跳转至 js 工程如何接入 TUIKit 组件 进行配置 ts 渐进式支持）
sass（sass-loader 版本 ≤ 10.1.1）
node（node.js ≥ 16.0.0）
npm（版本请与 node 版本匹配）
集成指引
请按照 集成 TUIKit 的步骤进行操作，操作完成后，您需要按找以下步骤配置 TUIChat。
集成 <TUIChat>
在需要展示的页面，引入 TUIChat 的组件即可使用。
例如：在 App.vue 页面中实现以下代码，即可快速搭建聊天界面并开启指定会话：
说明：
conversationID：会话 ID。会话ID组成方式如下：
C2C${userID}（单聊），例如 C2C123456
GROUP${groupID}（群聊），例如 GROUP123456
<template>
  <div id="app">
    <TUIKit
      :SDKAppID="0"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="YOUR_CONVERSATIONID"
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
    >
      <TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat>
    </TUIKit>
  </div>
</template>
<script lang="ts" setup>
import { TUIKit, TUIChat } from "./TUIKit";
</script>
<style lang="scss"></style>
启动项目
执行以下命令启动项目：
vue-cli
vite
说明：
由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，建议您关闭全局 overlay 报错提示。
webpack4及以上
webpack3
module.exports = defineConfig({
  devServer: {
    client: {
      overlay: false,
    },
  },
});
module.exports = {
  devServer: {
    overlay: false,
  },
};
npm run serve
npm run dev
常见问题
1. 接入报错类问题？
请单击 常见问题 查看解决方案。
2. 仅集成聊天，群聊会话中，点击右上角"..."按钮没反应，无法进入群管理模块？
本教程仅包含独立集成 TUIChat，如您需要群管理功能，请额外集成群管理组件 TUIGroup。
TUIChat + TUIGroup 示例代码如下：
<template>
  <div id="app">
    <TUIKit
      :SDKAppID="0"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="YOUR_CONVERSATIONID"
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc', position: 'relative' }"
    >
      <TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat>
      <TUIGroup :style="{ position: 'absolute', top: '0', left: '0' }" />
    </TUIKit>
  </div>
</template>
<script lang="ts" setup>
import { TUIKit, TUIChat, TUIGroup } from "./TUIKit";
</script>
<style lang="scss"></style>
如果您在群聊中不需要  TUIGroup  群管理模块，想要隐藏掉右上角"..."的入口按钮，可以修改如下代码：
在目录src/TUIKit/components/TUIChat/index.vue 文件中修改 ChatHeader 组件 headerExtensionList 传入参数为空数组 []
<ChatHeader
   ...
   :headerExtensionList="[]"
   ...
/>
3. 仅集成聊天，进入聊天页面，输入框上方 tabbar 中最右侧“历史消息（搜索消息）”按钮点击无效？
本教程仅包含独立集成 TUIChat，如您需要搜索历史消息记录，请额外集成云端搜索组件 TUISearch。
TUIChat + TUISearch 示例代码如下：
<template>
  <div id="app">
    <TUIKit
      :SDKAppID="0"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="YOUR_CONVERSATIONID"
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc', position: 'relative' }"
    >
      <TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat>
      <TUISearch searchType="conversation" :style="{ position: 'absolute', top: '0', right: '0' }" />
    </TUIKit>
  </div>
</template>
<script lang="ts" setup>
import { TUIKit, TUIChat, TUISearch } from "./TUIKit";
</script>
<style lang="scss"></style>
如果您在聊天界面不需要  TUISearch  群管理模块，想要隐藏掉入口按钮，请在 TUIKit 初始化前使用如下代码：
import { hideTUIChatFeatures } from './TUIKit';
hideTUIChatFeatures(['MessageSearch']);
相关文档
Vue2 & Vue3 UIKit 相关：
﻿chat-uikit-vue npm﻿
﻿Vue2 Demo源码及跑通示例﻿
﻿Vue3 Demo源码及跑通示例﻿
Vue2 & Vue3 UIKit 逻辑层: engine 相关
﻿chat-uikit-engine npm 仓库﻿
﻿chat-uikit-engine 接口文档﻿
交流与反馈
加入Telegram 技术交流群组或 WhatsApp 交流群，享有专业工程师的支持，解决您的难题。
﻿

Web

本页目录：

适用场景

开发环境要求

集成指引

集成 <TUIChat>

在需要展示的页面，引入 TUIChat 的组件即可使用。

例如：在 App.vue 页面中实现以下代码，即可快速搭建聊天界面并开启指定会话：

启动项目

常见问题

1. 接入报错类问题？

2. 仅集成聊天，群聊会话中，点击右上角"..."按钮没反应，无法进入群管理模块？

3. 仅集成聊天，进入聊天页面，输入框上方 tabbar 中最右侧“历史消息（搜索消息）”按钮点击无效？

相关文档

Vue2 & Vue3 UIKit 相关：

Vue2 & Vue3 UIKit 逻辑层: engine 相关

交流与反馈