Web & H5

最近更新时间:2023-09-11 17:12:42

我的收藏

开发环境要求

Vue3
TypeScript
sass(sass-loader 版本 <= 10.1.1)

TUIKit 源码集成

步骤1:创建项目

使用 vue-cli 创建项目, 配置Vue3 + TypeScript +sass。



步骤2:下载 TUIKit 组件

GitHub 下载 TUIKit源码。复制 TUIKit 文件夹放置到自己到工程的 src 文件夹中,例如:




步骤3:生成 UserSig

1. GitHub 下载 GenerateTestUserSig 工具包,并复制到项目中,例如:



2. 设置 GenerateTestUserSig 文件中的相关参数,其中 SDKAppID 和密钥等信息,可通过 腾讯云视立方控制台 > 项目管理 获取,单击目标项目右侧项目配置,进入配置页面。



3. 在基本信息区域,单击显示密钥,复制并保存密钥信息至 GenerateTestUserSig 文件。


注意:
本文提到的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

步骤4:下载 TUIKit 组件依赖

cd src/TUIKit
npm i --legacy-peer-deps

步骤5:引入 TUIKit 组件

在 main.ts 中,引入 TUIKit,并注册到 vue 项目实例中:
import { createApp } from 'vue'
import App from './App.vue'
import { TUICore, TUIComponents } from "./TUIKit";
import { genTestUserSig } from "../debug";
const config = {
SDKAppID: 0, // Replace 0 with the SDKAppID of your IM application when connecting. Value type: Number
};
// init TUIKit
const TUIKit = TUICore.init(config);
// TUIKit add TUIComponents
TUIKit.use(TUIComponents);
const userID = 'xxxx'; // User ID
const userInfo = {
userID: userID,
userSig: genTestUserSig(userID).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
};
// login TUIKit
TUIKit.login(userInfo);
// register
createApp(App).use(TUIKit).mount('#app')
注意:
SDKAppID 需与 GenerateTestUserSig 文件中 SDKAppID 一致。

步骤6:调用 TUIKit 组件

在需要展示的页面,调用 TUIKit 的组件即可使用。 例如:在 App.vue页 面中,使用 TUIConversation、TUIChat 搭建聊天界面。
<template>
<div class="home-TUIKit-main">
<div class="conversation">
<TUIConversation />
</div>
<div class="chat">
<TUIChat>
<h1>欢迎使用腾讯云即时通信IM</h1>
</TUIChat>
</div>
</div>
</template>

<style scoped>
.home-TUIKit-main {
display: flex;
height: 800px;
}
.conversation {
min-width: 285px;
flex: 0 0 24%;
border-right: 1px solid #f4f5f9;
}
.chat {
flex: 1;
height: 100%;
position: relative;
}
</style>

步骤7:启动项目

npm run serve

常见问题

1. 如何生成 UserSig?

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

2. 提示 Module not found: Error: Can't resolve 'sass-loader'?

IM TUIKit web 样式依赖 sass,需在项目全局安装 sass 和 sass-loader。
其中 sass-loader 的版本<=10.1.1。
npm install sass sass-loader@10.1.1 --save-dev