前言
项目需要给项目增加聊天功能,于是使用到腾讯的即时通信IM。以防忘记。。。。。本篇主要是uniapp项目 。。。。
vue3项目可以查看另一篇文章:
官方文档:
项目开发环境
IDE:HbuilderX
开发框架:uniapp,vue2,
项目创建及配置
步骤1:创建项目 (已有项目可忽略)
打开 HbuilderX,在菜单栏中选择 “文件-新建-项目”,创建一个 uni-app 项目。
步骤2:下载 TUIKit 组件
- 创建 package.json 文件
npm init -y
- 通过 npm 方式下载 TUIKit 组件:
npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup
- 将 TUIKit 组件复制到自己工程的 pages 目录下,请在自己的项目根目录下执行以下命令:
xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp .\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-uniapp\excluded-list.txt
- 从 v2.0.0 版本起,uikit 默认支持 客服插件,客服插件需要进行源码集成,请不要跳过本步骤。
xcopy .\node_modules\@tencentcloud\tui-customer-service-plugin .\TUIKit\tui-customer-service-plugin /i /e
步骤3:引入 TUIKit 组件
- 在根目录下创建 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
}
},
// H5 特有相关 :关闭 treeshaking 是为了规避 uni[methond]() is not a function 的问题
"h5" : {
"optimization" : {
"treeShaking" : {
"enable" : false
}
}
},
- 修改main.js文件
// 引入主包依赖
import TencentCloudChat from "@tencentcloud/chat";
import TUICore from "@tencentcloud/tui-core";
import App from './App';
// #ifndef VUE3
import Vue from 'vue';
import './uni.promisify.adaptor';
import VueCompositionAPI from "@vue/composition-api";
Vue.use(VueCompositionAPI);
Vue.config.productionTip = false;
App.mpType = 'app';
const app = new Vue({
...App,
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue';
export function createApp() {
const app = createSSRApp(App);
return {
app,
};
}
// #endif
-
修改pages.json文件
{
"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": {
"TUIKit/components/TUIConversation/index": {
"network": "all",
"packages": ["TUIKit"]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
-
修改App.vue文件
<script lang="ts">
// #ifdef APP-PLUS || H5
import { 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 || H5
uni.$chat_userSig = genTestUserSig(config).userSig;
// TUIChatKit 初始化
TUIChatKit.init();
// #endif
export 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')
}
};
</script>
<style>
/*每个页面公共css */
uni-page-body,
html,
body,
page {
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
</style>
如果需要打包小程序就根据官方文档中的要求修改(我的项目不需要单独打包小程序就忽略了)
步骤4:调用TUIKit组件
- 在 pages/index 文件夹下创建 index.vue 文件。
<template>
<div class="index">
<p class="index-button" @click="openConversation">打开 TUIKit 会话</p>
<p class="index-button" @click="openContact">打开 TUIKit 联系人</p>
</div>
</template>
<script>
export default {
methods: {
// 打开 TUIKit 会话列表
openConversation() {
uni.navigateTo({
url: "/TUIKit/components/TUIConversation/index",
});
},
// 打开 TUIKit 联系人
openContact() {
uni.navigateTo({
url: "/TUIKit/components/TUIContact/index",
});
},
},
};
</script>
<style lang="scss" scoped>
.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;
}
}
</style>
官方文档发起对话列表是全屏所以这里没有使用这个的页面,使用的是web&h5的接入方法。
- 安装支持 composition-api 以及 script setup 的相关依赖,以及 vue2.6 相关依赖。(我的项目使用的是vue2)
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
- 在 src/TUIKit/adapter-vue.ts 文件最后, 替换导出源:
// 初始写法
export * from "vue";
// 替换为
export * from "@vue/composition-api";
-
在需要展示的页面,调用 TUIKit 的组件即可使用。 例如:在 App.vue 页面中,使用 TUIConversation、TUIChat、TUIContact、TUISearch、TUIGroup、TUICallKit 快速搭建聊天界面(以下示例代码同时支持 Web 端与 H5 端)
<template>
<div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<div v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar">
<div
v-for="item of navbarList"
:key="item.id"
:class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"
@click="currentNavbar = item.id"
>
{{ item.label }}
</div>
</div>
<div class="TUIKit-main-container">
<div v-if="currentNavbar === 'conversation'" class="TUIKit-main">
<div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside">
<TUISearch searchType="global"></TUISearch>
<TUIConversation></TUIConversation>
</div>
<div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
<TUIChat>
<h1>欢迎使用腾讯云即时通信IM</h1>
</TUIChat>
<TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
<TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" />
</div>
<TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
<TUIContact displayType="selectFriend" />
</div>
<div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">
<TUIContact
displayType="contactList"
@switchConversation="currentNavbar = 'conversation'"
/>
</div>
<TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2.6";
import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
name: "App",
components: {
TUISearch,
TUIGroup,
TUIConversation,
TUIChat,
TUIContact,
TUICallKit,
},
data() {
return {
isH5: isH5,
currentConversationID: "",
currentNavbar: "conversation",
navbarList: [
{
id: "conversation",
label: "会话",
},
{
id: "contact",
label: "通讯录",
},
],
};
},
mounted: function () {
TUIStore.watch(StoreName.CONV, {
currentConversationID: (id: string) => {
this.currentConversationID = id;
},
});
},
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
</style>
步骤5:启动项目
npm run dev
最后,修改ui样式就参考官方文档叭