即时通信 IM uni-app

概述
chat-uikit-uniapp （vue2/vue3）是一款基于腾讯云 Chat SDK 的 uniapp UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-uniapp 界面效果如下图所示：
说明：
TUIKit v2.2.0 起请按照本文所述步骤接入。
TUIKit v2.1.3 起支持通过 cli 脚手架工具创建的项目集成，集成指引请点击 uniapp vue2/vue3（cli 脚手架）查看。
﻿
打包 App 集成 uni-app 腾讯云推送服务（Push）支持在线推送和离线推送，开发 app 必备。效果如下：
﻿
﻿
﻿
消息云端搜索功能界面效果如下图所示：
﻿
﻿
﻿
前提条件
支持平台
Uniapp 打包 App
说明：
Uniapp 打包微信小程序请另外参考 uniapp 精简版。
环境准备
HBuilderX 升级到新版本
TypeScript / JavaScript （TUIKit 使用 ts 语言开发，支持在 js 或者 ts 项目中集成）
Vue2 / Vue3
sass（sass-loader 版本 ≤ 10.1.1）
Node.js v12 版本及以上
npm（版本请与 node 版本匹配）
操作步骤
您可以参考视频教程来快速跑通：
﻿
也可以参考下文了解具体步骤。
步骤1：创建项目
打开 HBuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 chat-example 的 uni-app 项目。
﻿
﻿
﻿
步骤2：下载 TUIKit 组件
HBuilderX 创建项目时默认不会创建 package.json 文件，请在项目根目录下执行以下命令创建 package.json 文件：
npm init -y
下载 TUIKit 并拷贝源码至项目中：
macOS 端
Windows 端
通过 NPM 方式下载 TUIKit 组件：
npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./TUIKit
通过 NPM 方式下载 TUIKit 组件：
npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
为了方便您对 UI 进行扩展，请在项目的根目录下执行以下命令，将 TUIKit 组件复制到项目中：
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-uniapp .\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-uniapp\\excluded-list.txt
TUIKit 默认支持 客服插件，需要将客服插件源码复制到项目中（请不要跳过本步骤）。
xcopy .\\node_modules\\@tencentcloud\\tui-customer-service-plugin .\\TUIKit\\tui-customer-service-plugin /i /e 
步骤3：引入 TUIKit 组件
1. 工程配置
说明：
为了尊重版权，IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前，请您替换为自己设计或拥有版权的其他表情包。请注意，下图所示的默认小黄脸表情包版权属于腾讯云，您可以通过升级至 IM 企业版套餐 免费使用该表情包。
﻿
﻿
﻿
manifest.json 文件
vue.config.js（Vue3 项目可忽略）
在 manifest.json 文件的源码视图中手动关闭 H5 treeShaking 选项。
// weixin miniProgram
"mp-weixin" : {
    "appid" : "",
    "optimization" : {
        "subPackages" : true
    }
},
// H5: close treeshaking to solve the problem of uni[methond]() is not a function 
"h5" : {
    "optimization" : {
        "treeShaking" : {
            "enable" : false
        }
    }
},
注意：
小程序默认使用分包集成，打包小程序时 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 文件
main.js（Vue3 项目可忽略）
<script lang="ts">
import { TUILogin } from '@tencentcloud/tui-core-lite';
import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite';
﻿
// #ifdef APP-PLUS || H5
import { TUIChatKit } from './TUIKit';
TUIChatKit.init();
// #endif
﻿
let vueVersion = 2;
// #ifdef VUE3
vueVersion = 3;
// #endif
﻿
// Required information
// You can get userSig from TencentCloud chat console for Testing TUIKit.
// Deploy production environment please get it from your server.
// View https://cloud.tencent.com/document/product/269/32688
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}` // framework used vue2 / vue3
	})
    .then(() => {
      TUIChatEngine.isReady();
    })
    .catch(() => {});
  }
};
</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"
  }
}
如果您是 Vue2 项目，请在 main.js 中引入组合式API，防止环境变量 isPC 等无法使用。
// #ifndef VUE3
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
// #endif
3. 在项目中配置 TUIConversation 和 TUIContact 的入口
请将以下内容复制到 pages/index/index.vue 文件中。
<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>
步骤4：获取 SDKAppID、userID、 userSig
获取 SDKAppID、userID、userSig 信息后填写到 App.vue 中对应的字段上。
uni.$SDKAppID = 0; // Your SDKAppID
uni.$userID = ''; // Your userID
uni.$userSig = ''; // Your userSig
SDKAppID 信息，可通过 即时通信 IM 控制台 获取:
﻿
﻿
﻿
userID 信息，可单击  即时通信 IM 控制台 > 账号管理，切换至目标应用所在账号，创建 2~3 个 userID 方便后续体验聊天功能。
﻿
﻿
﻿
userSig 信息，可单击  即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 userID，即可生成 userSig。
﻿
﻿
﻿
步骤5：启动项目
使用 HBuilderX 启动该项目，单击菜单栏中的：运行 > 运行到手机或模拟器 > 运行到“指定”基座。
﻿
步骤6：发送您的第一条消息
单击 打开会话列表 按钮，在搜索栏输入 步骤4 中创建的 userID，选中后单击完成，发送您的第一条消息。
﻿
更多高级特性（强烈推荐）
﻿智能客服﻿
说明：
进入智能客服控制台，选择应用后，通过领取试用（每个应用都可领取2次、每次有效期7天的免费试用）或者直接购买，开通智能客服。如果您没有可选择的应用，可参见 创建应用 步骤操作，再为新建应用开通智能客服。
单独购买智能客服时，仅支持用户和客服号收发消息，账号数和 DAU 无上限。如需 C2C 聊天、群聊等功能，请加购 IM 套餐包。
集成请参考 用户端 SDK 轻量接入。
﻿
﻿仅集成聊天﻿
如果您按照本文步骤集成 TUIKit 后，需要单独使用 TUIChat 能力，按照以下示例代码用 uni.navigateTo 进行跳转即可。
// 1v1 chat: conversationID = `C2C${userID}`
// group chat: conversationID = `GROUP${groupID}`
const conversationID = '';
uni.navigateTo({ url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`});
﻿消息推送﻿
说明：
如果您的 app 需要推送功能，推荐您接入 uni-app 腾讯云推送服务（Push），支持 iOS 和 Android 推送，同时适配各大厂商推送。对 FCM 也有完善的支持，出海必备。
﻿
﻿消息云端搜索﻿
注意：
@tencentcloud/chat-uikit-uniapp ≥ 2.0.6 默认支持，只需要进入 控制台 > 插件市场 > 云端搜索 ，单击免费试用或购买插件即可使用消息云端搜索功能。
﻿
﻿
﻿
音视频通话 TUICallKit 插件
说明：
TUIKit 中默认没有集成 TUICallKit 音视频组件，TUICallKit 主要负责语音、视频通话。
如果您需要集成通话功能，可参见以下文档实现。
打包到 App 请参见： 音视频通话（客户端）。
打包到小程序请参见：音视频通话（小程序）。
打包到 H5 请参见：音视频通话（H5）。
客户端通话示意图：
﻿
﻿
﻿
小程序通话示意图：
﻿
﻿
﻿
H5 通话示意图：
﻿
﻿
﻿
云端审核
在消息发送、资料修改场景中，很有可能会扩散不合适的内容，特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容，不仅严重损害了用户们的身心健康，更很有可能违法并导致业务被监管部门查封。
即时通信 IM 支持云端审核（反垃圾信息）功能，可针对不安全、不适宜的内容进行自动识别、处理，为您的产品体验和业务安全保驾护航。
﻿云端审核：在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容，支持针对不同场景的不同内容分别配置审核策略，并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景，只需在 IM 控制台打开功能开关，即可直接使用。
常见问题
1. 小程序如果需要上线或者部署正式环境怎么办？
请在 微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名 中进行域名配置，域名配置方法请参见：小程序 socket 合法域名。
2. 更多问题请参见：uni-app 相关问题。
参考信息
TUIKit GitHub 源码：
﻿chat-uikit-uniapp (Vue2/Vue3) GitHub 源码﻿
实现更多功能，请参见 ChatEngine API 文档：
﻿ChatEngine API 手册﻿
﻿ChatEngine npm﻿
体验反馈：
您在文档接入过程中是否遇到困难？接入过程是否显得过于复杂？无论是建议、疑惑还是吐槽，都欢迎在这里向我们反馈。希望各位开发者能在闲暇时花费1分钟填写 TUIKit for Uniapp 体验反馈。我们将根据您的反馈优化TUIKit，以提升您的使用体验。
﻿
﻿
uni-app

本页目录：

概述

前提条件

支持平台

环境准备

操作步骤

步骤1：创建项目

步骤2：下载 TUIKit 组件

步骤3：引入 TUIKit 组件

1. 工程配置

2. 集成 TUIKit

3. 在项目中配置 TUIConversation 和 TUIContact 的入口

步骤4：获取 SDKAppID、userID、 userSig

步骤5：启动项目

步骤6：发送您的第一条消息

更多高级特性（强烈推荐）

﻿智能客服﻿

﻿仅集成聊天﻿

﻿消息推送﻿

﻿消息云端搜索﻿

音视频通话 TUICallKit 插件

云端审核

常见问题

参考信息

智能客服

仅集成聊天

消息推送

消息云端搜索
