uniapp使用腾讯即时通信IM

猫与夏天i

于 2024-03-07 16:03:45 发布

阅读量1.1k

点赞数 15

分类专栏： # vue项目使用腾讯im 文章标签： uni-app 小程序 javascript 前端 web vue

本文链接：https://blog.csdn.net/weixin_45671325/article/details/134004419

版权

vue项目使用腾讯im 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前言

项目需要给项目增加聊天功能，于是使用到腾讯的即时通信IM。以防忘记。。。。。本篇主要是uniapp项目。。。。

vue3项目可以查看另一篇文章：

官方文档：

即时通信 IM 快速入门（uniapp vue2/vue3）-快速入门-文档中心-腾讯云 (tencent.com)https://cloud.tencent.com/document/product/269/64506

项目开发环境

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>