即时通信 IM uni-app 完整版（Vue3/Vue2）

TUIKit 是基于 IM SDK 的一款 UI 组件库，可通过 UI 组件快速实现聊天、会话、搜索、关系链、群组等功能。本文介绍如何快速集成 TUIKit 并实现核心功能。
完整版界面效果如下图所示：
﻿
关键概念
针对用户不同场景的诉求和体积要求，我们推出了多个版本的 UI 组件 ，您可以根据实际业务需求选择集成最适合的版本。
功能区分
聊天组件（精简版）
聊天组件（标准版）
聊天组件（完整版）
登录&登出
✓
✓
✓
用户资料与管理
✓
✓
✓
消息列表
✓
✓
✓
文本&自定义消息
✓
✓
✓
图片&视频消息
-
✓
✓
历史消息
-
✓
✓
会话列表
-
✓
✓
未读消息计数
-
✓
✓
语音&文件消息
-
-
✓
消息引用/撤回/转发
-
-
✓
消息已读回执
-
-
✓
群组功能
-
-
✓
联系人列表
-
-
✓
云端搜索
-
-
✓
体积大小
0.2 MB
0.51 MB
1.30 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 版本匹配）
创建项目 
HBuilderX
Cli 脚手架
1. 打开 HBuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 chat-example 的 uni-app 项目。
﻿
2. 在终端输入npm init -y，创建package.json文件。
npm init -y
1. 全局安装 vue-cli：
npm install -g @vue/cli
2. 通过 cli 创建项目：
Vue3（推荐）
创建 js 项目（推荐）
创建 ts 项目
npx degit dcloudio/uni-preset-vue#vite chat-example
npx degit dcloudio/uni-preset-vue#vite-ts chat-example
3. 创建完成后，切换到项目所在目录：
cd chat-example
下载并导入组件
步骤1：安装依赖
下载 TUIKit 并拷贝源码至项目中：
macOS 端
Windows 端
通过 npm 方式下载 TUIKit 组件：
# unplugin-vue2-script-setup 主要用于 vue2, 如果是 vue3 项目, 可不下载
npm i @tencentcloud/chat-uikit-wx-uniapp unplugin-vue2-script-setup
通过 npm 方式下载 TUIKit 组件：
# unplugin-vue2-script-setup 主要用于 vue2, 如果是 vue3 项目, 可不下载
npm i @tencentcloud/chat-uikit-wx-uniapp unplugin-vue2-script-setup
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
HbuilderX
Cli 脚手架
MacOS 端
Windows 端
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-wx-uniapp/ ./TUIKit
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp .\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp\\excluded-list.txt
MacOS 端
Windows 端
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-wx-uniapp/ ./src/TUIKit
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp .\\src\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp\\excluded-list.txt
步骤2：引入组件
1. 工程配置
在 manifest.json 文件的源码视图中开启小程序分包 subPackages。
manifest.json
vue.config.js（Vue3 项目忽略）
// weixin miniProgram
"mp-weixin" : {
    "appid" : "",
    "optimization" : {
        "subPackages" : true
    }
},
注意：
小程序默认使用分包集成，打包小程序时 manifest.json 不要配置 lazyCodeLoading 选项。
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
请将以下内容复制到项目对应的文件中。
App.vue 文件
pages.json 文件
index.vue
main.js（Vue3 项目可忽略）
<script lang="ts">
import { TUILogin } from '@tencentcloud/tui-core-lite';
import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite';
﻿
let vueVersion = 3;
﻿
// 填写步骤三获取到的鉴权信息
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}`
	 })
    .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": [
    {
      "path": "pages/index/index" // 您的项目首页
    }
  ],
  "subPackages": [
    {
      "root": "TUIKit",
      "pages": [
        {
          "path": "components/TUIConversation/index",
          "style": {
            "navigationBarTitleText": "腾讯云 IM"
          }
        },
        {
          "path": "components/TUIChat/index",
          "style": {
            "navigationBarTitleText": "腾讯云 IM",
            "app-plus": {
              "softinputMode": "adjustResize",
              "titleNView": {
                "buttons": [
                  {
                    "type": "menu"
                  }
                ]
              }
            },
            "h5": {
              "titleNView": {
                "buttons": []
              }
            }
          }
        },
        // 集成 chat 组件，必须配置该路径: 视频播放
        {
          "path": "components/TUIChat/video-play",
          "style": {
            "navigationBarTitleText": "腾讯云 IM"
          }
        },
        {
          "path": "components/TUIChat/web-view",
          "style": {
            "navigationBarTitleText": "腾讯云 IM"
          }
        },
        {
          "path": "components/TUIContact/index",
          "style": {
            "navigationBarTitleText": "腾讯云 IM"
          }
        },
        {
          "path": "components/TUIGroup/index",
          "style": {
            "navigationBarTitleText": "腾讯云 IM"
          }
        },
        {
          "path": "components/TUISearch/index",
          "style": {
            "navigationBarTitleText": "聊天记录"
          }
        }
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["TUIKit"]
    }
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}
<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>
如果您是 Vue2 项目，请在 main.js 中引入组合式API，防止环境变量 isPC 等无法使用。
// #ifndef VUE3
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
// #endif
步骤3：获取 SDKAppID、userID 和 userSig
参数
类型
说明
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：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。
﻿
userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
﻿
userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
﻿
运行和测试
步骤1：运行
HbuilderX
Cli 脚手架
﻿
1. 以编译开发模式的微信小程序为例（编译至其他平台请参考 package.json 文件中 scripts 脚本配置）：
npm run build:mp-weixin
2. 编译成功后，启动微信开发者工具导入 dist/build/mp-weixin 目录。
步骤2：发送第一条消息
﻿
 步骤3：增加音视频通话（可选）
功能
音视频通话组件
1v1 视频、音频通话
✓
群组通话（9人及以下）
✓
中途呼叫/加入三方通话
✓
自定义呼叫铃声
✓
呼叫/接听/拒绝/挂断
✓
1. 开通服务
如果您需要集成通话功能，可参见以下文档实现：音视频通话（小程序），通话界面如下图所示：
语音通话
视频通话
﻿
﻿
﻿
﻿
﻿
﻿
2. 配置小程序域名白名单
小程序域名白名单信息请参考：小程序域名白名单配置信息。
常见问题
Debug 文件的作用？
主要作用​​：在开发阶段，TUIKit 提供了 debug 文件夹中的本地 UserSig 生成脚本，用于方便开发和调试。
警告：（该方法仅适合本地跑通 Demo 和功能调试）
该方法中的 SECRETKEY 容易被反编译逆向破解。
一旦密钥泄露，攻击者可以盗用您的腾讯云流量。
​​仅适用于本地 Demo 运行和功能调试​​，绝对不能用于生产环境。
请在项目发布前删除 Debug 脚本，使用后台生成 UserSig，具体原因和操作步骤请参考文档：生成 UserSig。
uni-app 运行小程序中 Chat 的实例是 Web 实例还是 native 实例？
chat-uikit-uniapp 运行小程序中，其 Chat 实例是 ​​web 实例​​，而非 native 实例。
Conversation 中 groupProfile 或 userProfile 信息不全是为什么，如何获取？
原因：会话（Conversation）中携带的群组资料（groupProfile）或用户资料（userProfile）通常是简化版本，主要包含最核心的信息，例如基本的群名称、群头像或用户的昵称、头像等。这样设计的首要目的是为了​​提升性能和应用响应速度。
解决方案：
获取完整的群组资料​：通过 TUIGroupService.getGroupProfile 获取。
获取完整的用户资料​：通过 TUIUserService.getUserProfile 获取。
说明：
群组或用户的自定义字段的获取都需要在完整信息中获取。
更多问题请参见：uni-app 相关问题。
Vue2 & Vue3  缺少 sass 预处理器报错：Preprocessor dependency "sass" not found. Did you install it?
﻿
请按照以下步骤操作：
npm install sass --save-dev
Vue2 & Vue3 装饰器报错： Transforming JavaScript decorators to the configured target environment is not supported yet？
﻿
可在 tsconfig.json 中添加相关配置，示例：
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}
Vue2 项目报错 TS 编译器类型检查错误
﻿
main.js 中引入组合式 API。
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
安装 unplugin-vue2-script-setup 依赖。
npm i unplugin-vue2-script-setup
新建或修改项目根目录的 vue.config.js 文件。
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;
module.exports = {
  parallel: false,
  configureWebpack: {
    plugins: [
      ScriptSetup({}),
    ],
  },
  chainWebpack(config) {
    config.plugins.delete('fork-ts-checker'); // disable type check and let `vue-tsc` handles it
  },
};
如何适配通过 cli 创建 Vue2 的 JS 项目？
按照本文的步骤集成后，需要在项目的根目录下执行：
  vue add typescript
按照如下进行配置项进行选择（为了保证能同时支持原有 js 代码 与 TUICallKit 中 ts 代码，请您务必严格按照以下五个选项进行配置），安装完成后检查 App.vue文件代码并重新编译。
参考文档
实现更多功能，请参考 ChatEngine API 文档：
﻿ChatEngine API 手册﻿
﻿ChatEngine npm﻿
联系我们
如遇任何问题，可联系 官网售后 反馈，享有专业工程师的支持，解决您的难题。

uni-app 完整版（Vue3/Vue2）

本页目录：

关键概念

前提条件

创建项目

下载并导入组件

步骤1：安装依赖

步骤2：引入组件

1. 工程配置

2. 集成 TUIKit

步骤3：获取 SDKAppID、userID 和 userSig

运行和测试

步骤1：运行

步骤2：发送第一条消息

步骤3：增加音视频通话（可选）

1. 开通服务

2. 配置小程序域名白名单

常见问题

Debug 文件的作用？

uni-app 运行小程序中 Chat 的实例是 Web 实例还是 native 实例？

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

Vue2 & Vue3 缺少 sass 预处理器报错：Preprocessor dependency "sass" not found. Did you install it?

Vue2 & Vue3 装饰器报错： Transforming JavaScript decorators to the configured target environment is not supported yet？

Vue2 项目报错 TS 编译器类型检查错误

如何适配通过 cli 创建 `Vue2` 的 `JS` 项目？

参考文档

联系我们

功能区分	聊天组件（精简版）	聊天组件（标准版）	聊天组件（完整版）
登录&登出	✓	✓	✓
用户资料与管理	✓	✓	✓
消息列表	✓	✓	✓
文本&自定义消息	✓	✓	✓
图片&视频消息	-	✓	✓
历史消息	-	✓	✓
会话列表	-	✓	✓
未读消息计数	-	✓	✓
语音&文件消息	-	-	✓
消息引用/撤回/转发	-	-	✓
消息已读回执	-	-	✓
群组功能	-	-	✓
联系人列表	-	-	✓
云端搜索	-	-	✓
体积大小	0.2 MB	0.51 MB	1.30 MB

参数	类型	说明
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。

功能	音视频通话组件
1v1 视频、音频通话	✓
群组通话（9人及以下）	✓
中途呼叫/加入三方通话	✓
自定义呼叫铃声	✓
呼叫/接听/拒绝/挂断	✓