开发环境要求
HBuilderX (HBuilderX 版本 >= 3.8.4.20230531)或者升级到最新版本
Vue2 / Vue3
sass(sass-loader 版本 ≤ 10.1.1)
node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
npm(版本请与 node 版本匹配)
TUIKit 源码集成
通过以下步骤发送您的第一条消息。
步骤1:创建项目 (已有项目可忽略)


步骤2:下载并引入 TUIKit
1.工程配置
HBuilder 不会默认创建 package.json 文件,因此您需要先创建 package.json 文件。请执行以下命令:
npm init -y
在根目录下创建 vue.config.js (vue3 项目请忽略此步骤)
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');},};
在
manifest.json
源码中开启分包配置/* 小程序特有相关 */"mp-weixin" : {"appid" : "xxx",/* 开启分包配置 */"optimization" : {"subPackages" : true},},/* H5 特有相关 :关闭 treeshaking 是为了规避 uni[methond]() is not a function 的问题 */"h5" : {"optimization" : {"treeShaking" : {"enable" : false,},},}
2.下载 TUIKit 组件
为了方便您后续的拓展,建议您将 TUIKit 组件复制到自己工程的 pages 目录下,在自己的项目目录下执行以下命令:
npm i @tencentcloud/chat-uikit-uniapp
npm i unplugin-vue2-script-setup
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
npm i unplugin-vue2-script-setup
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-uniapp .\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-uniapp\\excluded-list.txt
3.集成 TUIKit 组件
// 引入主包依赖import TencentCloudChat from "@tencentcloud/chat";import TUICore from "@tencentcloud/tui-core";import App from './App';// #ifndef VUE3import Vue from 'vue'import './uni.promisify.adaptor'import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App})app.$mount()// #endif// #ifdef VUE3import { createSSRApp } from 'vue'export function createApp() {const app = createSSRApp(App)return {app}}// #endif
{"pages": [{"path": "pages/index/index" // 您的项目首页}],"subPackages": [{"root": "TUIKit","pages": [{"path": "components/TUIConversation/index","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIChat/index","style": {"navigationBarTitleText": "腾讯云 IM"}},// 集成 chat 组件,必须配置该路径: 视频播放{"path": "components/TUIChat/video-play"},{"path": "components/TUIContact/index","style": {"navigationBarTitleText": "腾讯云 IM"}},{"path": "components/TUIGroup/index","style": {"navigationBarTitleText": "腾讯云 IM"}}]}],"preloadRule": {"TUIKit/components/TUIConversation/index": {"network": "all","packages": ["TUIKit"]}},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}
<script lang="ts">// #ifdef APP-PLUS || H5import { TUIChatKit, genTestUserSig } from "./TUIKit";import { vueVersion } from "./TUIKit/adapter-vue";import { TUILogin } from "@tencentcloud/tui-core";// #endif// 必填信息const config = {userID: "test-user1", //User IDSDKAppID: 0, // Your SDKAppIDsecretKey: "", // Your secretKey};uni.$chat_userID = config.userID;uni.$chat_SDKAppID = config.SDKAppID;uni.$chat_secretKey = config.secretKey;// #ifdef APP-PLUS || H5uni.$chat_userSig = genTestUserSig(config).userSig;// TUIChatKit 初始化TUIChatKit.init();// #endifexport default {onLaunch: function () {// #ifdef APP-PLUS || H5// TUICore loginTUILogin.login({SDKAppID: uni.$chat_SDKAppID,userID: uni.$chat_userID,// UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。// 该方法仅适合本地跑通 Demo 和功能调试,详情请参见 https://cloud.tencent.com/document/product/269/32688userSig: uni.$chat_userSig,// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 trueuseUploadPlugin: true,// 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航// 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139// 如果您已购买内容审核服务,开启此功能请设置为 trueuseProfanityFilterPlugin: false,framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3});// #endif},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}};</script><style>/*每个页面公共css */uni-page-body,html,body,page {width: 100% !important;height: 100% !important;overflow: hidden;}</style>
注意:
小程序默认分包集成,需要在 TUIKit 首启动页面完成 login。
如果您不需要打包小程序,可忽略此配置页面。
示例: 分包 TUIKit 首启动页面为 TUIConversation 页面
步骤1: 在 TUIKit/components/TUIConversation 文件夹下创建 subPackage-init.ts 文件
import { TUIChatKit, genTestUserSig } from "../../index.ts";import { vueVersion, onMounted } from "../../adapter-vue";import { TUILogin } from "@tencentcloud/tui-core";// TUIChatKit 初始化TUIChatKit.init();uni.$chat_userSig = genTestUserSig({userID: uni.$chat_userID,SDKAppID: uni.$chat_SDKAppID,secretKey: uni.$chat_secretKey}).userSig;// loginTUILogin.login({SDKAppID: uni.$chat_SDKAppID,userID: uni.$chat_userID,// UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。// 该方法仅适合本地跑通 Demo 和功能调试,详情请参见 https://cloud.tencent.com/document/product/269/32688userSig: uni.$chat_userSig,// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 trueuseUploadPlugin: true,// 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航// 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139// 如果您已购买内容审核服务,开启此功能请设置为 trueuseProfanityFilterPlugin: false,framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3}).then(() => {uni.showToast({title: "login success"});});
步骤2: 在 TUIKit/components/TUIConversation/index.vue 中导入
// #ifdef MP-WEIXINimport "./subPackage-init.ts";// #endif
如图所示:


4. 在项目主包页面中,打开 TUIKit
示例:在 pages/index 文件夹下创建 index.vue 文件:
<template><div class="index"><p class="index-button" @click="openConversation">打开 TUIKit 会话</p></div></template><script>export default {methods: {// 打开 TUIKit 启动页openConversation() {uni.navigateTo({url: "/TUIKit/components/TUIConversation/index",});}},};</script><style lang="scss" scoped>.index {display: flex;flex-direction: column;align-items: center;height: 100%;&-button {width: 180px;padding: 10px 40px;background-color: #006eff;color: #ffffff;font-size: 16px;margin-top: 65px;border-radius: 30px;text-align: center;}}</style>
步骤3:获取 SDKAppID 、SECRETKEY
设置 App.vue 文件示例代码中的相关参数 SDKAppID、SECRETKEY 以及 userID ,其中 SDKAppID 和密钥等信息,可通过 即时通信 IM 控制台 获取,单击目标应用卡片,进入应用的基础配置页面获取。
例如,获取 tim-demo 的 SDKAppID 和密钥信息如下图:


步骤4:发送您的第一条消息
1. 获取 userID 信息,可通过 即时通信 IM 控制台 进行创建和获取,单击目标应用卡片,进入应用的账号管理页面,即可创建账号并获取 userID。
例如,获取 userID : test-user2 位置如下图:


2. 搜索 userID: test-user2 ,发起会话。


强烈建议:开通内容审核功能
在消息发送、资料修改场景中,很有可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,更很有可能违法并导致业务被监管部门查封。
即时通信 IM 支持内容审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。可以通过以下两种内容审核方式来实现:
本地审核功能:在客户端本地检测在单聊、群聊、资料场景中由即时通信 SDK 发送的文本内容,支持对已配置的敏感词进行拦截或者替换处理。此功能通过在 IM 控制台开启服务并配置词库的方式实现。
云端审核功能:在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容,支持针对不同场景的不同内容分别配置审核策略,并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景,只需在 IM 控制台打开功能开关,即可直接使用。
更多高级特性
音视频通话 TUICallKit 插件
说明:
TUIKit 中默认没有集成 TUICallKit 音视频组件,TUICallKit 主要负责语音、视频通话。
如果您需要集成通话功能,可参考以下文档实现。
打包到 APP 请参考: 音视频通话(客户端)
打包到小程序请参考:音视频通话(小程序)
打包到 H5 请参考官:音视频通话(H5)
客户端通话示意图


小程序通话示意图


H5 通话示意图


TUIOfflinePush 离线推送插件
说明
TUIKit 中默认没有集成 TUIOfflinePush 离线推送插件。TUIOfflinePush 是腾讯云即时通信 IM Push 插件。目前离线推送支持 Android 和 iOS 平台,设备有:华为、小米、OPPO、vivo、魅族 和 苹果手机。


独立集成 TUIChat 组件:可参考 独立集成 TUIChat 组件 方案


常见问题
参考文档
UIKit (vue2 / vue3)相关:
ChatEngine 相关:
技术咨询