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

完整版界面效果如下：

一、关键概念

针对用户不同场景的诉求和体积要求，我们推出了多个版本的 UI 组件 ，你可以根据实际业务需求选择集成最适合的版本。

二、前提条件

·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 版本匹配）

三、创建项目

HBuilderXCli 脚手架1. 打开 HBuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 chat-example 的 uni-app 项目。2. 在终端输入 npm init -y，创建 package.json 文件。npm init -y1. 全局安装 vue-cli：npm install -g @vue/cli2. 通过 cli 创建项目：Vue3（推荐）创建 js 项目（推荐）创建 ts 项目npx degit dcloudio/uni-preset-vue#vite chat-examplenpx degit dcloudio/uni-preset-vue#vite-ts chat-example3. 创建完成后，切换到项目所在目录：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 组件复制到项目中：

HbuilderXCli 脚手架MacOS 端Windows 端mkdir -p ./TUIKit && rsync -av –exclude={'node_modules','package.json'} ./node_modules/@tencentcloud/chat-uikit-wx-uniapp/ ./TUIKitxcopy .\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp .\\TUIKit /i /eMacOS 端Windows 端mkdir -p ./src/TUIKit && rsync -av –exclude={'node_modules','package.json'} ./node_modules/@tencentcloud/chat-uikit-wx-uniapp/ ./src/TUIKitxcopy .\\node_modules\\@tencentcloud\\chat-uikit-wx-uniapp .\\src\\TUIKit /i /e

七、1. 工程配置

在 manifest.json 文件的源码视图中开启小程序分包 subPackages。

manifest.jsonvue.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.vuemain.js（Vue3 项目可忽略）<script lang="ts">import { TUILogin } from '@tencentcloud/tui-core-lite';import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite';let vueVersion = 3;wx.$globalCallPagePath = 'TUIKit/components/CallView/CallView';// 填写步骤三获取到的鉴权信息uni.$SDKAppID = 0; // Your SDKAppIDuni.$userID = ''; // Your userIDuni.$userSig = ''; // Your userSigexport 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 VUE3import VueCompositionAPI from '@vue/composition-api';Vue.use(VueCompositionAPI);// #endif

九、步骤3：获取 SDKAppID、userID 和 userSig

注意：这篇示例代码采用在即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见服务端生成 UserSig。

·SDKAppID：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。

·userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，你可以创建 2～3 个账号用于体验单聊、群聊的功能。

·userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig 生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。

十一、步骤1：运行

HbuilderXCli 脚手架1. 以编译开发模式的微信小程序为例（编译至其他平台请参考 package.json 文件中 scripts 脚本配置）：npm run build:mp-weixin2. 编译成功后，启动微信开发者工具导入 dist/build/mp-weixin 目录。

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

十四、1. 拷贝源码

在你的项目中执行下面的脚本，会自动将音视频通话逻辑拷贝到你的项目中（默认是分包集成）。

注意：说明：

注意：分包集成无法使用全局监听能力，如果你想使用全局监听能力，需要在主包使用音视频通话。你可以参考 接入音视频通话 自行往自己项目中进行集成。

node TUIKit/script/add-callview-page-subpackage.js

十五、2. 配置小程序域名白名单

小程序域名白名单信息请参考：小程序域名白名单配置信息。

十七、Debug 文件的作用？

主要作用：在开发阶段，TUIKit 提供了 debug 文件夹中的本地 UserSig 生成脚本，用于方便开发和调试。

注意：警告：（该方法仅适合本地跑通 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 相关问题。

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

请按照以下步骤操作：

npm install sass –save-dev

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

可在 tsconfig.json 中添加相关配置，示例：

{ "compilerOptions": { "experimentalDecorators": true }}

22、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 },};

23、参考文档

实现更多功能，请参考 ChatEngine API 文档：

·ChatEngine API 手册

·ChatEngine npm

24、联系我们

如遇任何问题，可联系 页面售后 反馈，享有专业工程师的支持，解决你的难题。