腾讯云即时通信IM快速入门(uniapp vue2/vue3)_AI解决方案_同尘科技

即时通信 IM 1年前 (2023-12-22) 浏览 243

关于 chat-uikit-uniapp

chat-uikit-uniapp (vue2 /vue3)是基于腾讯云 Chat SDK 的一款 uniapp UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件,您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-uniapp 界面效果如下图所示:

支持平台

AndroidiOS微信小程序H5

开发环境要求

HBuilderX (HBuilderX 版本 >= 3.8.4.20230531)或者升级到新版本Vue2 / Vue3sass(sass-loader 版本 ≤ 10.1.1)node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)npm(版本请与 node 版本匹配)

TUIKit 源码集成

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

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



步骤2:下载并引入 TUIKit

1.工程配置

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

npm init -y

在根目录下创建 vue.config.js (vue3 项目请忽略此步骤)

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');  },};

manifest.json 源码中开启分包配置

// 小程序特有相关"mp-weixin" : {    "appid" : "xxx",    // 开启分包配置    "optimization" : {        "subPackages" : true    },    "lazyCodeLoading": "requiredComponents"},// H5 特有相关 :关闭 treeshaking 是为了规避 uni[methond]() is not a function 的问题"h5" : {    "optimization" : {        "treeShaking" : {            "enable" : false        }    }},

2.下载 TUIKit 组件

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

npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
mkdir -p ./TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-uniapp/ ./TUIKit

从 v1.2.9 版本起,uikit 默认支持客服插件,客服插件需要源码集成。版本 ≥ 2.0.02.0.0 > 版本 ≥ 1.2.9

mkdir -p ./TUIKit/tui-customer-service-plugin && rsync -av ./node_modules/@tencentcloud/tui-customer-service-plugin/ ./TUIKit/tui-customer-service-plugin
mkdir -p ./tui-customer-service-plugin && rsync -av ./node_modules/@tencentcloud/tui-customer-service-plugin/ ./tui-customer-service-plugin



npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-uniapp\excluded-list.txt

从 v1.2.9 版本起,uikit 默认支持客服插件,客服插件需要源码集成。版本 ≥ 2.0.02.0.0 > 版本 ≥ 1.2.9

xcopy .\node_modules\@tencentcloud\tui-customer-service-plugin .\TUIKit\tui-customer-service-plugin /i /e 
xcopy .\node_modules\@tencentcloud\tui-customer-service-plugin .\tui-customer-service-plugin /i /e 



3.集成 TUIKit 组件

注意:进行集成时,请严格按照以下四个步骤进行集成。如果您希望打包小程序,请不要跳过“小程序分包首页”的配置。main.js 文件pages.json 文件App.vue 文件小程序分包首页请注意,Vue2环境下要使用Vue.use(VueCompositionAPI) ,防止环境变量isPC等无法使用。

// 引入主包依赖import TencentCloudChat  from "@tencentcloud/chat";import TUICore from "@tencentcloud/tui-core";
import App from './App';
// #ifndef VUE3import Vue from 'vue'import './uni.promisify.adaptor'import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({ ...App})app.$mount()// #endif
// #ifdef VUE3import { createSSRApp } from 'vue'export function createApp() { const app = createSSRApp(App) return { app }}// #endif
{ "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"    }   }  ] }], "preloadRule": {  "TUIKit/components/TUIConversation/index": {   "network": "all",   "packages": ["TUIKit"]  } }, "globalStyle": {  "navigationBarTextStyle": "black",  "navigationBarTitleText": "uni-app",  "navigationBarBackgroundColor": "#F8F8F8",  "backgroundColor": "#F8F8F8" }}
// #ifdef APP-PLUS || H5import { TUIChatKit, genTestUserSig } from "./TUIKit";import { vueVersion } from "./TUIKit/adapter-vue";import { TUILogin } from "@tencentcloud/tui-core";// #endif// 必填信息const config = {  userID: "test-user1", //User ID  SDKAppID: 0, // Your SDKAppID  secretKey: "", // Your secretKey};uni.$chat_userID = config.userID;uni.$chat_SDKAppID = config.SDKAppID;uni.$chat_secretKey = config.secretKey;
// #ifdef APP-PLUS || H5uni.$chat_userSig = genTestUserSig(config).userSig;// TUIChatKit 初始化TUIChatKit.init();// #endifexport default { onLaunch: function () { // #ifdef APP-PLUS || H5 // TUICore login TUILogin.login({ SDKAppID: uni.$chat_SDKAppID, userID: uni.$chat_userID, // UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。 // 该方法仅适合本地跑通 Demo 和功能调试,详情请参见 https://cloud.tencent.com/document/product/269/32688 userSig: uni.$chat_userSig, // 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 true useUploadPlugin: true, // 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航 // 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139 // 如果您已购买内容审核服务,开启此功能请设置为 true useProfanityFilterPlugin: false, framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3 }); // #endif }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') }};/*每个页面公共css */uni-page-body,html,body,page { width: 100% !important; height: 100% !important; overflow: hidden;}

注意:小程序默认分包集成,需要在 TUIKit 首启动页面完成 login。如果您不需要打包小程序(如仅构建H5),可忽略”小程序分包首页“的配置内容。示例:分包 TUIKit 首启动页面为 TUIConversation 页面

步骤1: 在 TUIKit/components/TUIConversation 文件夹下创建 subPackage-init.ts 文件
import { TUIChatKit, genTestUserSig } from "../../index.ts";import { vueVersion, onMounted } from "../../adapter-vue";import { TUILogin } from "@tencentcloud/tui-core";
// TUIChatKit 初始化TUIChatKit.init();uni.$chat_userSig = genTestUserSig({ userID: uni.$chat_userID, SDKAppID: uni.$chat_SDKAppID, secretKey: uni.$chat_secretKey}).userSig;
// login TUILogin.login({ SDKAppID: uni.$chat_SDKAppID, userID: uni.$chat_userID, // UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。 // 该方法仅适合本地跑通 Demo 和功能调试,详情请参见 https://cloud.tencent.com/document/product/269/32688 userSig: uni.$chat_userSig, // 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 true useUploadPlugin: true, // 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航 // 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139 // 如果您已购买内容审核服务,开启此功能请设置为 true useProfanityFilterPlugin: false, framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3}).then(() => { uni.showToast({ title: "login success" });});
步骤2: 在 TUIKit/components/TUIConversation/index.vue 中导入
// #ifdef MP-WEIXINimport "./subPackage-init.ts";// #endif

如图所示:

4. 在项目主包页面中打开 TUIKit

示例:在 pages/index 文件夹下创建 index.vue 文件

  

打开 TUIKit 会话

打开 TUIKit 联系人

export default {methods: { // 打开 TUIKit 会话列表 openConversation() { uni.navigateTo({ url: "/TUIKit/components/TUIConversation/index", }); }, // 打开 TUIKit 联系人 openContact() { uni.navigateTo({ url: "/TUIKit/components/TUIContact/index", }); }, },};.index { height: 100%; display: flex; flex-direction: column; align-items: center; &-button { width: 180px; padding: 10px 40px; color: #fff; background-color: #006eff; font-size: 16px; margin-top: 65px; border-radius: 30px; text-align: center; }}

步骤3:获取 SDKAppID 、SECRETKEY

1. 设置 App.vue 文件示例代码中的相关参数 SDKAppID、SECRETKEY 以及 userID ,其中 SDKAppID 和密钥等信息,可通过 即时通信 IM 控制台 获取,单击目标应用卡片,进入应用的基础配置页面。以获取目标应用 tim-demo 为例:

步骤4:发送您的第一条消息

1. 获取 userID 信息,可通过 即时通信 IM 控制台 进行创建和获取,单击目标应用卡片,进入应用的账号管理页面,即可创建账号并获取 userID。以获取 userID : test-user2 为例:2. 搜索 userID: test-user2 ,发起会话。

强烈建议:开通内容审核功能

在消息发送、资料修改场景中,很有可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,更很有可能违法并导致业务被监管部门查封。即时通信 IM 支持内容审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。可以通过以下两种内容审核方式来实现:本地审核功能:在客户端本地检测在单聊、群聊、资料场景中由即时通信 SDK 发送的文本内容,支持对已配置的敏感词进行拦截或者替换处理。此功能通过在 IM 控制台开启服务并配置词库的方式实现。云端审核功能:在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容,支持针对不同场景的不同内容分别配置审核策略,并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景,只需在 IM 控制台打开功能开关,即可直接使用。

更多高级特性

音视频通话 TUICallKit 插件

说明:TUIKit 中默认没有集成 TUICallKit 音视频组件,TUICallKit 主要负责语音、视频通话。如果您需要集成通话功能,可参考以下文档实现。打包到 APP 请参考: 音视频通话(客户端)打包到小程序请参考:音视频通话(小程序)打包到 H5 请参考官:音视频通话(H5)客户端通话示意图
小程序通话示意图
H5 通话示意图

TUIOfflinePush 离线推送插件

说明TUIKit 中默认没有集成 TUIOfflinePush 离线推送插件。TUIOfflinePush 是腾讯云即时通信 IM Push 插件。目前离线推送支持 Android 和 iOS 平台,设备有:华为、小米、OPPO、vivo、魅族 和 苹果手机。如果您需要在 APP 中集成离线推送能力,请参见 uni-app 离线推送 实现。

独立集成 TUIChat 组件:可参考 独立集成 TUIChat 组件 方案



常见问题

请参见 uniapp 常见问题

参考文档

UIKit (vue2 / vue3)相关:chat-uikit-uniapp (vue2/vue3) github 源码chat-uikit-uniapp npm 快速接入ChatEngine 相关:ChatEngine API 手册ChatEngine npm

技术咨询

点此进入 IM 社群,享有专业工程师的支持,解决您的难题。

对即时通讯IM解决方案有疑惑?想了解解决方案收费? 联系解决方案专家

腾讯云限时活动1折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?