即时通信 IM uni-app-智能客服-文档中心-腾讯云

效果展示
﻿
开发环境要求
HBuilderX （HBuilderX 版本 >= 3.8.4.20230531）或者升级到最新版本
Vue2 / Vue3
sass（sass-loader 版本 ≤ 10.1.1）
node（12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
npm（版本请与 node 版本匹配）
步骤1：创建项目
打开 HbuilderX，在菜单栏中选择 “文件-新建-项目”，创建一个名为 chat-example 的 uni-app 项目。
﻿
﻿
﻿
步骤2：下载 UI 组件
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
将客服插件源码复制到项目中：
mkdir -p ./TUIKit/tui-customer-service-plugin && rsync -av ./node_modules/@tencentcloud/tui-customer-service-plugin/ ./TUIKit/tui-customer-service-plugin
通过 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
需要将客服插件源码复制到项目中：
xcopy .\\node_modules\\@tencentcloud\\tui-customer-service-plugin .\\TUIKit\\tui-customer-service-plugin /i /e 
步骤3：引入 UI 组件
1. 工程配置
manifest.json 文件
vue.config.js（Vue3 项目可忽略）
在 manifest.json 文件的源码视图中开启小程序分包 subPackages 和关闭 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';
// #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, 
	   useUploadPlugin: true, // If you need to send rich media messages, please set to true.
	   framework: `vue${vueVersion}` // framework used vue2 / vue3
	 }).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"
    }
   },
    // 集成 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 个 userID 方便后续体验聊天功能。
﻿
userSig 信息，可单击  即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 userID，即可生成 userSig。
﻿
步骤5：启动项目
1. 使用 HBuilderX 启动该项目，单击 运行 > 运行到小程序模拟器 > 微信开发者工具。
﻿
﻿
﻿
2. 如果 HBuilderX 没有自动拉起微信开发者工具，请使用微信开发者工具手动打开编译后的项目。
使用微信开发者工具打开项目根目录下的 unpackage/dist/dev/mp-weixin 即可。
3. 打开项目后，在微信开发者工具 详情 > 本地设置 中勾选 不校验合法域名、web-view（业务域名）、TLS版本以及 HTTPS 证书。
步骤6: 发起您的第一条客服咨询
通过 TUIContact 中客服号，发起您的第一条客服咨询。
﻿
﻿
﻿
﻿
﻿
﻿
﻿
独立集成客服会话
配置 Chat 入口
注意：
生成 conversationID 所需要的 userID 为 客服虚拟号 ID。
﻿
您需要将以下内容复制到主包的 pages/index/index.vue 文件中。
<template>
  <button @click="openChat">OpenChat</button>
</template>
<script>
  export default {
    methods: {
      openChat() {
        // 1v1 chat: conversationID = `C2C${userID}`
        // group chat: conversationID = `GROUP${groupID}`
        const conversationID = 'C2C@customer_service_account';
        uni.navigateTo({
          url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`
        });
      }
    }
  }
</script>
﻿
更多高级特性
消息推送
说明：
TUIKit 中默认没有集成 TencentCloud-TIMPush 推送插件。TencentCloud-TIMPush 是腾讯云即时通信 IM Push 插件。目前推送支持小米、华为、荣耀、OPPO、vivo、魅族、APNs、一加、realme、iQOO 和 苹果等厂商通道。
如果您需要在 App 中集成离线推送能力，请参见 uni-app 推送 实现。
﻿
技术咨询
﻿点此进入IM社群，享有专业工程师的支持，解决您的难题。
﻿
uni-app

本页目录：

效果展示

开发环境要求

步骤1：创建项目

步骤2：下载 UI 组件

步骤3：引入 UI 组件

1. 工程配置

2. 集成 TUIKit

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

步骤4：获取 SDKAppID 、userID 、 userSig

步骤5：启动项目

步骤6: 发起您的第一条客服咨询

独立集成客服会话

配置 Chat 入口

更多高级特性

消息推送

技术咨询
