本文介绍如何快速跑通 IM Demo 来体验消息发送和视频通话功能。
聊天页面 | 语音通话 | 视频通话 |
 |  |  |
关键概念
针对用户不同场景的诉求和体积要求，我们推出了多个版本的 UI 组件 ，您可以根据实际业务需求选择集成最适合的版本。
功能区分 | 聊天组件（精简版） | 聊天组件（标准版） |
登录&登出 | ✓ | ✓ |
用户资料与管理 | ✓ | ✓ |
消息列表 | ✓ | ✓ |
文本&自定义消息 | ✓ | ✓ |
图片&视频消息 | - | ✓ |
历史消息 | - | ✓ |
会话列表 | - | ✓ |
未读消息计数 | - | ✓ |
体积大小 | 0.2 MB | 0.51 MB |
前提条件
开通服务
开发环境要求
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：获取 Demo
1. 打开终端，克隆仓库。
2. 安装依赖。
cd ./Miniprogram/basic-vue3
cd ./Miniprogram/basic-vue2
npm install
3. 拷贝源码。
xcopy node_modules\\tuikit-atomicx-uniapp-wx .\\TUIKit /i /excopy node_modules\\@trtc\\call-engine-lite-wx\\RTCCallEngine.wasm.br .\\static
mkdir -p ./TUIKit && cp -r node_modules/tuikit-atomicx-uniapp-wx/ ./TUIKit && cp node_modules/@trtc/call-engine-lite-wx/RTCCallEngine.wasm.br ./static
步骤2：配置 Demo
打开 debug/GenerateTestUserSig-es.js 文件，将开通服务时获取到对应的 SDKAppID 和 SDKSecretKey 填入其中。
步骤3：跑通 Demo
1. HBuilder 中导入项目。
2. 运行到微信开发者工具，勾选运行时是否压缩代码。
发送第一条消息
注意：
尽量避免使您的 userId 被设置成“1”、“123”、“111”等简单字符串。
拨打第一通电话（可选）
开通音视频服务
配置微信开放平台
开通企业类小程序：
在小程序控制台开启实时音视频接口：
小程序推拉流标签使用权限暂时只开放给有限类目，具体支持类目参见该地址。
符合类目要求的小程序，需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。
在小程序控制台配置域名
将以下域名添加到 socket 合法域名：
域名 | 说明 | 是否必须 |
wss://${SDKAppID}w4c.my-imcloud.com | v3.4.6起，SDK 支持独立域名，可更好地保障服务稳定性。 例如您的 SDKAppID 是 1400xxxxxx，则独立域名为： wss://1400xxxxxxw4c.my-imcloud.com | 必须 |
wss://wss.im.qcloud.com | Web IM 业务域名 | 必须 |
wss://wss.tim.qq.com | Web IM 业务域名 | 必须 |
wss://wssv6.im.qcloud.com | Web IM 业务域名 | 必须 |
将以下域名添加到 request 合法域名：
域名 | 说明 | 是否必须 |
https://web.sdk.qcloud.com | Web IM 业务域名 | 必须 |
https://boce-cdn.my-imcloud.com | Web IM 业务域名 | 必须 |
https://api.im.qcloud.com | Web IM 业务域名 | 必须 |
https://events.im.qcloud.com | Web IM 业务域名 | 必须 |
https://webim.tim.qq.com | Web IM 业务域名 | 必须 |
https://wss.im.qcloud.com | Web IM 业务域名 | 必须 |
https://wss.tim.qq.com | Web IM 业务域名 | 必须 |
将以下域名添加到 uploadFile 合法域名：
域名 | 说明 | 是否必须 |
https://${SDKAppID}-cn.rich.my-imcloud.com | 从 2024年9月10日起，新增应用默认分配 COS 独立域名。 例如您的 SDKAppID 是 1400xxxxxx，则 COS 独立域名为： https://1400xxxxxx-cn.rich.my-imcloud.com | 必须 |
https://cn.rich.my-imcloud.com | 文件上传域名 | 必须 |
https://cn.imrich.qcloud.com | 文件上传域名 | 必须 |
https://cos.ap-shanghai.myqcloud.com | 文件上传域名 | 必须 |
https://cos.ap-shanghai.tencentcos.cn | 文件上传域名 | 必须 |
https://cos.ap-guangzhou.myqcloud.com | 文件上传域名 | 必须 |
将以下域名添加到 downloadFile 合法域名：
域名 | 说明 | 是否必须 |
https://${SDKAppID}-cn.rich.my-imcloud.com | 从 2024年9月10日起，新增应用默认分配 COS 独立域名。 例如您的 SDKAppID 是 1400xxxxxx，则 COS 独立域名为： https://1400xxxxxx-cn.rich.my-imcloud.com | 必须 |
https://cn.rich.my-imcloud.com | 文件下载域名 | 必须 |
https://cn.imrich.qcloud.com | 文件下载域名 | 必须 |
https://cos.ap-shanghai.myqcloud.com | 文件下载域名 | 必须 |
https://cos.ap-shanghai.tencentcos.cn | 文件下载域名 | 必须 |
https://cos.ap-guangzhou.myqcloud.com | 文件下载域名 | 必须 |
常见问题
如何移除音视频通话功能
移除
static/RTCCallEngine.wasm.br 文件。移除 TUIKit/index.ts 中的模块导出
移除 TUIKit/components/MessageInput/MessageInput.vue 中的通话按钮
移除在 pages.json 中为音视频通话添加的全局页面监听配置。
// {// "path": "TUIKit/components/CallView/CallView",// "style": {// "navigationBarTitleText": "uni-app"// }// }
Debug 脚本的作用
出于体积和安全双重因素考虑，请在发布前删除项目目录下
/TUIKit/debug 文件夹。在开发阶段为了方便开发，项目提供生成本地 UserSig 的脚本文件存放于TUIKit/debug文件夹中，但这并不安全，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。因此，请在项目发布前删除 Debug 脚本，使用后台生成 UserSig，具体原因和操作步骤请参考文档：生成 UserSig。
