无 UI 集成方案

服务端 API

诚邀爱技术、爱分享的你,成为文档内容共建者> HOT
文档中心 > 即时通信 IM > 快速入门 > 快速入门(uni-app)

关于 chat-uikit-uniapp

chat-uikit-uniapp 是基于腾讯云 IM SDK 的一款 uniapp UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
chat-uikit-uniapp 界面效果如下图所示:

chat-uikit-uniapp 支持平台

  • Android
  • iOS
  • 微信小程序
  • H5

开发环境要求

  • HBuilderX
  • Vue 3
  • TypeScript
  • sass(sass-loader 版本 ≤ 10.1.1)
  • node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
  • npm(版本请与 node 版本匹配)
注意:

如果您需要集成 vue2 TUIKit,请参见 vue2 TUIKit 源码集成

TUIKit 源码集成

通过以下步骤发送您的第一条消息。

步骤1:创建项目 (已有项目可忽略)

注意:

请在项目 mianfest.json > 基础配置里边确认 Vue 版本选择。

HBuilder 不会默认创建 package.json 文件,因此您需要先创建 package.json 文件。请执行以下命令:

npm init -y

步骤2:下载并引入 TUIKit

通过 npm 方式下载 TUIKit 并集成组件。 chat-uikit-uniapp github 源码集成

注意:

uni-app 打包到小程序涉及到体积问题,因此我们提供了以下两种集成方案:

  • 打包 APP 或者 H5 端推荐方案一,主包集成
  • TUIKit 如果作为 tabbar 页面,推荐方案一,主包集成(主包体积 1M)
  • 客户线上环境,如果不需要本地换算 userSig ,可删除 debug 文件(节省 150kb)
  • 打包小程序端,有体积限制需求推荐方案二,分包集成(分包可节约 170kb)

方案一:主包集成

在 App.vue 页面引用 TUIKit 组件,为此您需要修改 App.vue 和 pages.json 文件。

为了方便您后续的拓展,建议您将 TUIKit 组件复制到自己工程的 pages 目录下,在自己的项目目录下执行以下命令:

# macOS
npm i @tencentcloud/chat-uikit-uniapp
mkdir -p ./pages/TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./pages/TUIKit
# windows
npm i @tencentcloud/chat-uikit-uniapp
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\pages\TUIKit /i /e

成功后目录结构如图所示:

方案二:分包集成

在 App.vue 页面引用 TUIKit 组件,为此您需要修改 App.vue 和 pages.json文件。

为了方便您后续的拓展,建议您将 TUIKit 组件复制到自己工程的根目录下,在自己的项目目录下执行以下命令:

# macOS
npm i @tencentcloud/chat-uikit-uniapp
mkdir -p ./TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./TUIKit && mv ./TUIKit/debug ./debug
# windows
npm i @tencentcloud/chat-uikit-uniapp
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\TUIKit /i /e 
move .\TUIKit\debug .\debug
成功后目录结构如图所示:

步骤4:获取 SDKAppID 、密钥与 userID

设置 App.vue 文件示例代码中的相关参数 SDKAppID、secretKey 以及 userID ,其中 SDKAppID 和密钥等信息,可通过 即时通信 IM 控制台 获取,单击目标应用卡片,进入应用的基础配置页面。例如:
image
userID 信息,可通过 即时通信 IM 控制台 进行创建和获取,单击目标应用卡片,进入应用的账号管理页面,即可创建账号并获取 userID。例如:
create user

步骤5:运行效果

注意:

如果您需要 github 下载集成,请参见 chat-uikit-uniapp github 源码

更多高级特性

音视频通话 TUICallKit 插件

说明:

TUIKit 中默认没有集成 TUICallKit 音视频组件。如果您需要集成通话功能,可参考以下文档实现。

TUICallKit 主要负责语音、视频通话。

客户端通话示意图:

小程序通话示意图

TUIOfflinePush 离线推送插件

说明:

TUIKit 中默认没有集成 TUIOfflinePush 离线推送插件。如果您需要在 APP 中集成离线推送能力,请参考官网文档 uni-app 离线推送 实现。

TUIOfflinePush 是腾讯云即时通信 IM Push 插件。目前离线推送支持 Android 和 iOS 平台,设备有:华为、小米、OPPO、vivo、魅族 和 苹果手机。
效果如下图所示:

常见问题

1. 什么是 UserSig?

UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。

2. 如何生成 UserSig?

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

注意:

本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。

3. 运行在小程序端:选择运行时压缩代码

4. 运行在小程序端出现异常报错

可能和微信开发者工具版本有关,请使用最新的开发者工具,以及确认稳定的调试基础库版本。

5. 小程序如果需要上线或者部署正式环境怎么办?

请在微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中进行域名配置:

从v2.11.2起 SDK 支持了 WebSocket,WebSocket 版本须添加以下域名到 socket 合法域名

域名 说明 是否必须
wss://wss.im.qcloud.com Web IM 业务域名 必须
wss://wss.tim.qq.com Web IM 业务域名 必须

将以下域名添加到 request 合法域名

域名 说明 是否必须
https://web.sdk.qcloud.com Web IM 业务域名 必须
https://webim.tim.qq.com Web IM 业务域名 必须
https://api.im.qcloud.com Web IM 业务域名 必须

将以下域名添加到 uploadFile 合法域名

域名 说明 是否必须
https://cos.ap-shanghai.myqcloud.com 文件上传域名 必须
https://cos.ap-shanghai.tencentcos.cn 文件上传域名 必须
https://cos.ap-guangzhou.myqcloud.com 文件上传域名 必须

将以下域名添加到 downloadFile 合法域名

域名 说明 是否必须
https://cos.ap-shanghai.myqcloud.com 文件上传域名 必须
https://cos.ap-shanghai.tencentcos.cn 文件上传域名 必须
https://cos.ap-guangzhou.myqcloud.com 文件上传域名 必须

参考文档

技术咨询

了解更多详情您可 QQ 咨询:309869925技术交流群

目录