适用场景
小程序平台下，私信聊天（1V1）以及音视频通话（需集成 TUICallKit），如房产中介咨询、电商在线客服、保险远程定损等。
TUIChat 私信功能介绍
TUIChat 主要负责消息界面的展示。您还可以利用它直接发送不同类型的消息、对消息长按删除/复制/撤回等。界面效果如下图所示：
消息界面 | 发送多种类型消息 |
 |  |
消息删除/撤回/复制 | 1v1通话（TUICallkit） |
 |  |
开发环境要求
微信开发者工具
JavaScript
node（node.js ≥ 16.0.0）
npm（版本请与 node 版本匹配）
集成 TUIChat 组件
说明：
@tencentcloud/chat-uikit-wechat 的 v1.1.4 及其以上版本支持仅集成聊天。
@tencentcloud/chat-uikit-wechat 使用 WebView 渲染，暂不支持 Skyline 渲染。
步骤1：创建项目
1. 创建项目，在微信开发者工具上创建一个不使用模板的小程序项目，选择。如图所示：
2. 配置渲染模式，在 app.json 中设置
renderer 为 webview。如图所示：{"pages": ["pages/index/index"],"window": {"navigationBarTextStyle": "black","navigationStyle": "custom"},"style": "v2","renderer": "webview"}
步骤2：下载 TUIKit 组件
1. 创建 package.josn，微信开发者工具创建的小程序项目默认没有 package.json，因此您需要先创建 package.json 文件，如图所示：
npm init -y
2. 通过 npm 方式下载 TUIKit 组件， 并复制到自己的小程序目录下，目录结构如图所示：
npm i @tencentcloud/chat-uikit-wechat
mkdir -p ./TUIKit && cp -r node_modules/@tencentcloud/chat-uikit-wechat/ ./TUIKit
npm i @tencentcloud/chat-uikit-wechat
xcopy node_modules\\@tencentcloud\\chat-uikit-wechat .\\TUIKit /i /e
3. 构建 npm：单击工具 > 构建 npm，构建成功会新增 miniprogram_npm 文件夹，如图所示：
步骤3：引入 TUIChat 组件
创建 chat 页面，并引入 TUIKit 组件，为此您需要分别修改 index.wxml 、index.js 和 index.json。
在 pages/chat/index.json 中引入 TUIKit 组件，如图所示：
{"usingComponents": {"TUIKit": "../../TUIKit/index"},"navigationStyle": "custom"}
在 pages/chat/index.wxml 中使用 TUIKit 组件，如图所示：
<view><TUIKit config="{{config}}" conversationID="{{conversationID}}" id="TUIKit"></TUIKit></view>
config 的参数如下表所示：
参数 | 类型 | 是否必填 | 含义 |
userID | String | 是 | 当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_） |
SDKAPPID | Number | 是 | 即时通信 IM 应用的 SDKAppID |
SECRETKEY | String | 是 | |
EXPIRETIME | Number | 否 | userSig 过期时间 |
在 pages/chat/index.js 中配置 TUIKit 参数、初始化 Chat、启用 TUIKit，如图所示：
import TencentCloudChat from '@tencentcloud/chat';import TIMUploadPlugin from 'tim-upload-plugin';import { genTestUserSig } from '../../TUIKit/debug/GenerateTestUserSig';Page({data: {config: {userID: '', // User IDSDKAPPID: 0, // Your SDKAppIDSECRETKEY: '',EXPIRETIME: 604800,},conversationID: '',},onLoad(options) {this.setData({conversationID: options.conversationID});const userSig = genTestUserSig(this.data.config).userSig;wx.$TUIKit = TencentCloudChat.create({SDKAppID: this.data.config.SDKAPPID});wx.$chat_SDKAppID = this.data.config.SDKAPPID;wx.$chat_userID = this.data.config.userID;wx.$chat_userSig = userSig;wx.TencentCloudChat = TencentCloudChat;wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });wx.$TUIKit.login({userID: this.data.config.userID,userSig});wx.setStorage({key: 'currentUserID',data: [],});wx.$TUIKit.on(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);},onUnload() {wx.$TUIKit.logout();wx.$TUIKit.off(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);},onSDKReady() {const TUIKit = this.selectComponent('#TUIKit');TUIKit.init();}});
步骤4： 获取 SDKAppID 、SECRETKEY 与 userID
步骤5：传入 conversationID，打开会话进行聊天
说明：
conversationID：会话 ID。会话 ID 组成方式：
C2C${userID}（单聊）
GROUP${groupID}（群聊）
在 index 页面，添加以下代码，单击 button 即可发起聊天。
在 pages/index/index.wxml 中设置载入 Chat 的入口，如图所示：
<button type="primary" bindtap="handleShowChat">发起聊天</button>
在 pages/index/index.js 中设置载入 Chat 的方法，并配置需要载入 Chat 的会话 ID，如图所示：
Page({// 发起聊天方法handleShowChat() {// 跳转到单聊wx.navigateTo({url: `../chat/index?conversationID=C2C${userID}`,})}})
步骤6：编译小程序
1. 本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。
2. 单击清缓存 > 全部清除。避免开发者工具的缓存造成渲染异常。
3. 单击编译。
具体实现如图所示：
步骤7：发送您的第一条消息
注意:
更多高级特性
客服插件
强烈建议：开通内容审核功能
在消息发送、资料修改场景中，很有可能会扩散不合适的内容，特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容，不仅严重损害了用户们的身心健康，更很有可能违法并导致业务被监管部门查封。
技术咨询
