即时通信 IM uni-app

chat-uikit-uniapp 是一款基于腾讯云 Chat SDK 的 uniapp UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-uniapp 界面效果如下图所示：
﻿
chat-uikit-uniapp 支持离线推送，通过集成  uni-app 腾讯云推送服务（Push），即使在 App 不在前台或者没有在运行的情况下，也能收到离线的消息。效果如下：
﻿
消息云端搜索功能界面效果如下图所示：
﻿
环境准备与前提条件
支持平台
uniapp 打包 App
说明：
Uniapp 打包微信小程序请另外参考 uniapp 精简版。
TUIKit v2.2.0 起，请按照本文所述步骤接入。
TUIKit v2.1.3 起，支持通过 cli 脚手架工具创建的项目集成，集成指引请点击 uniapp vue2/vue3（cli 脚手架）查看。
环境要求
IDE： HBuilderX，需升级到新版本。
语言： TypeScript / JavaScript。TUIKit 使用 TS 开发，支持在 JS 或 TS 项目中集成。
框架： Vue2 / Vue3。
CSS 预处理器： sass (sass-loader 版本 $\\le$ 10.1.1)。
运行环境： Node.js v12 版本及以上。
包管理： npm (版本需与 Node 版本匹配)。
下载并导入组件
﻿
完成以下步骤即可发送您的第一条消息。
步骤1：创建项目
打开 HBuilderX，在菜单栏中选择 “文件 > 新建 > 项目”，创建一个名为 chat-example 的 uni-app 项目。
﻿
﻿
步骤2：下载 TUIKit 组件
1. 创建 package.json 文件：HBuilderX 默认不创建该文件，请在项目根目录下执行命令：
npm init -y
2. 下载 TUIKit 和依赖：通过 NPM 方式下载 TUIKit 组件和 unplugin-vue2-script-setup 依赖：
npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
3. 拷贝 TUIKit 源码：为了方便开发者对 UI 进行扩展，需要将 TUIKit 源码复制到项目目录中的 ./TUIKit 文件夹下。
macOS 端
Windows 端
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./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 和 vue.config.js 文件，以确保 TUIKit 依赖可以正常加载。
manifest.json 文件
vue.config.js（仅 Vue2 项目）
在 manifest.json 文件的源码视图中手动关闭 H5 treeShaking 选项。
{
    "name" : "chat-example",
    /* 其他配置 */
    "h5" : {
        "optimization" : {
            "treeShaking" : {
                "enable" : false
            }
        }
    },
    /* 其他配置 */
}
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 it
    config.plugins.delete('fork-ts-checker');
  },
};
2. 集成 TUIKit：该步骤配置登录逻辑和页面路由，确保 TUIKit 可以正常运行和跳转。请将以下内容复制到项目对应的文件中。
App.vue 文件
pages.json 文件
main.js（仅 Vue2 项目）
配置 App.vue 登录逻辑：在 App.vue 文件的 <script>标签内引入所需模块，并使用 TUILogin.login 实现登录。
<script lang="ts">
import { TUILogin } from '@tencentcloud/tui-core-lite';
import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite';
﻿
// #ifdef APP-PLUS || H5
import { TUIChatKit } from './TUIKit';
TUIChatKit.init();
// #endif
﻿
let vueVersion = 2;
// #ifdef VUE3
vueVersion = 3;
// #endif
﻿
// 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/32688
uni.$SDKAppID = 0; // Your SDKAppID
uni.$userID = ''; // Your userID
uni.$userSig = ''; // Your userSig
﻿
export default {
  onLaunch: function () {
	TUILogin.login({
	  SDKAppID: uni.$SDKAppID,
	  userID: uni.$userID, 
	  userSig: uni.$userSig, 
	  framework: `vue${vueVersion}` // framework used vue2 / vue3
	})
    .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.json 路由，这是集成 Chat 组件的必备配置。
{
  "pages": [
    {
      "path": "pages/index/index" // 您的项目首页
    },
    {
      "path": "TUIKit/components/TUIConversation/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM",
        "app-plus": {
          "softinputMode": "adjustResize",
          "titleNView": {
            "buttons": [
              {
                "type": "menu"
              }
            ]
          }
        },
      }
    },
    // 集成 chat 组件，必须配置该路径: 视频播放
    {
      "path": "TUIKit/components/TUIChat/video-play",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/web-view",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIContact/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIGroup/index",
      "style": {
        "navigationBarTitleText": "腾讯云 IM"
      }
    },
    {
      "path": "TUIKit/components/TUISearch/index",
      "style": {
        "navigationBarTitleText": "聊天记录"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}
如果您是 Vue2 项目，请在 main.js 中引入组合式API，防止环境变量 isPC 等无法使用。
// #ifndef VUE3
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
// #endif
3. 配置入口：在项目的首页文件 pages/index/index.vue 中配置 TUIConversation (会话列表) 和 TUIContact (联系人) 的跳转入口。
<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：配置 IM 应用信息
在进行登录前，需要获取 IM 应用的 SDKAppID、userID 和 userSig，并配置到 App.vue 文件中。
参数
类型
说明
SDKAppID
Number
SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 即时通信 IM 控制台 创建新应用，获取 SDKAppID 。
说明：
SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID
String
用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。
userSig
String
用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
说明：
开发环境：快速跑通 Demo，可以通过 即时通信 IM 控制台 获取 UserSig。
生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 服务端生成 UserSig。
注意：
本文示例代码采用在即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见服务端生成 UserSig。
获取 SDKAppID、userID、userSig 信息后填写到 App.vue 中对应的字段上。
uni.$SDKAppID = 0; // Your SDKAppID
uni.$userID = ''; // Your userID
uni.$userSig = ''; // Your userSig
SDKAppID：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。
﻿
userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
﻿
userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
﻿
运行和测试
步骤1：运行项目
使用 HBuilderX 启动该项目，单击菜单栏中的：运行 > 运行到手机或模拟器 > 运行到“指定”基座。
﻿
步骤2：发送您的第一条消息
单击 打开会话列表 按钮进入 会话列表，点击发起单聊。
在搜索栏输入下载并导入组件 > 步骤4：配置 IM 应用信息 中创建的测试账号 userID。
选中后单击完成，即可进入聊天界面并发送您的第一条消息。
﻿
更多高级特性（强烈推荐）
﻿仅集成聊天﻿
仅使用 TUIChat (聊天界面) 能力时，可以按照以下示例代码通过 uni.navigateTo进行跳转。该方式可实现点击对话按钮后，直接打开与特定 userID (单聊) 或 groupID (群聊) 的聊天页面。
// 1v1 chat: conversationID = `C2C${userID}`
// group chat: conversationID = `GROUP${groupID}`
const conversationID = '';
uni.navigateTo({ url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`});
﻿消息推送﻿
说明：
如果您的 app 需要推送功能，推荐您接入 uni-app 腾讯云推送服务（Push），支持 iOS 和 Android 推送，同时适配各大厂商推送。对 FCM 也有完善的支持，出海必备。
﻿
﻿消息云端搜索﻿
注意：
@tencentcloud/chat-uikit-uniapp ≥ 2.0.6 默认支持， 只需要进入 控制台 > 插件市场 > 云端搜索 ，单击免费试用或购买插件即可使用消息云端搜索功能。
﻿
音视频通话 TUICallKit 插件
说明：
TUIKit 中默认没有集成 TUICallKit 音视频组件。
TUICallKit 主要负责语音、视频通话。
运行平台
集成方案
文档链接
移动端应用 (App)
请集成 uni-app (客户端) TUICallKit。
﻿音视频通话（客户端）。
H5 环境
请集成 uni-app (H5) TUICallKit。
﻿音视频通话（H5）。
客户端通话示意图：
﻿
﻿
﻿
H5 通话示意图：
﻿
﻿智能客服﻿
说明：
进入智能客服控制台，选择应用后，通过领取试用（每个应用都可领取2次、每次有效期7天的免费试用）或者直接购买，开通智能客服。如果您没有可选择的应用，可参见 创建应用 步骤操作，再为新建应用开通智能客服。
单独购买智能客服时，仅支持用户和客服号收发消息，账号数和 DAU 无上限。如需 C2C 聊天、群聊等功能，请加购 IM 套餐包。
集成请参考 用户端 SDK 轻量接入。
﻿
云端审核
在消息发送、资料修改场景中，很有可能会扩散不合适的内容，特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容，不仅严重损害了用户们的身心健康，更很有可能违法并导致业务被监管部门查封。即时通信 IM 支持云端内容审核（反垃圾信息）功能，可针对不安全、不适宜的内容进行自动识别、处理，为您的产品体验和业务安全保驾护航。
﻿云端审核：在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容，支持针对不同场景的不同内容分别配置审核策略，并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景，只需在 IM 控制台打开功能开关，即可直接使用。
常见问题
1. 集成 TUIKit 时，在 pages.json 中默认没有配置 tabBar，项目中如何实现 tabBar 功能？
打包 App / H5，需要在 pages.json 中配置 tabBar。可以参考 uni-app 官网 tabBar 配置 自行实现。
2. Debug 文件的作用？
主要作用​​：在开发阶段，TUIKit 提供了 debug文件夹中的本地 UserSig 生成脚本，用于方便开发和调试。
警告：（该方法仅适合本地跑通 Demo 和功能调试）
该方法中的 SECRETKEY 容易被反编译逆向破解。
一旦密钥泄露，攻击者可以盗用您的腾讯云流量。
​​仅适用于本地 Demo 运行和功能调试​​，绝对不能用于生产环境。
请在项目发布前删除 Debug 脚本，使用后台生成 UserSig，具体原因和操作步骤请参考文档：生成 UserSig。
3. uniapp 打包 App 中 Chat 的实例是 web 实例还是 native 实例？
chat-uikit-uniapp 即使打包为 App，其 Chat 实例依然是 ​​web 实例​​，而非 native 实例。
4. Conversation 中 groupProfile 或 userProfile 信息不全是为什么，如何获取？
原因：会话（Conversation）中携带的群组资料（groupProfile）或用户资料（userProfile）通常是简化版本，主要包含最核心的信息，例如基本的群名称、群头像或用户的昵称、头像等。这样设计的首要目的是为了​​提升性能和应用响应速度。
解决方案：
获取完整的群组资料​：通过 TUIGroupService.getGroupProfile 获取。
获取完整的用户资料​：通过 TUIUserService.getUserProfile 获取。
说明：
群组或用户的自定义字段的获取都需要在完整信息中获取。
更多常见问题请参见：uni-app 相关问题。
参考信息
TUIKit GitHub 源码：
﻿chat-uikit-uniapp (vue2/vue3) GitHub 源码﻿
实现更多功能，请参考 ChatEngine API 文档：
﻿ChatEngine API 手册﻿
﻿ChatEngine Lite npm﻿
联系我们
如遇任何问题，可联系 官网售后 反馈，享有专业工程师的支持，解决您的难题。

参数	类型	说明
SDKAppID	Number	SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在即时通信 IM 控制台创建新应用，获取 SDKAppID 。说明： SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID	String	用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。
userSig	String	用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。说明：开发环境：快速跑通 Demo，可以通过即时通信 IM 控制台获取 UserSig。生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，正确的 UserSig 签发方式请参见服务端生成 UserSig。

运行平台	集成方案	文档链接
移动端应用 (App)	请集成 uni-app (客户端) TUICallKit。	音视频通话（客户端）。
H5 环境	请集成 uni-app (H5) TUICallKit。	音视频通话（H5）。

uni-app

本页目录：

环境准备与前提条件

支持平台

环境要求

下载并导入组件

步骤1：创建项目

步骤2：下载 TUIKit 组件

步骤3：引入 TUIKit 组件

步骤4：配置 IM 应用信息

运行和测试

步骤1：运行项目

步骤2：发送您的第一条消息

更多高级特性（强烈推荐）

﻿仅集成聊天﻿

﻿消息推送﻿

﻿消息云端搜索﻿

音视频通话 TUICallKit 插件

﻿智能客服﻿

云端审核

常见问题

1. 集成 TUIKit 时，在 pages.json 中默认没有配置 tabBar，项目中如何实现 tabBar 功能？

2. Debug 文件的作用？

3. uniapp 打包 App 中 Chat 的实例是 web 实例还是 native 实例？

4. Conversation 中 groupProfile 或 userProfile 信息不全是为什么，如何获取？

参考信息

联系我们

仅集成聊天

消息推送

消息云端搜索

智能客服