linda-chat-uikit-uniapp-vue2

关于 chat-uikit-uniapp（vue2）

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

(“TUIContact关系链功能”及“音视频通话功能”暂未开放，敬请期待)

chat-uikit-uniapp 支持平台

• Android
• iOS
• 微信小程序
• H5

开发环境要求

• HBuilderX
• Vue2
• TypeScript
• sass（sass-loader 版本 ≤ 10.1.1）
• node（12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（版本请与 node 版本匹配）

TUIKit 源码集成

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

步骤1：创建项目 （已有项目可忽略）

注意

请在项目 mianfest.json > 基础配置里边确认 Vue 版本选择。

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

npm init -y

步骤2：下载并引入 TUIKit

通过 npm 方式下载 TUIKit 并集成组件。

在 App.vue 页面引用 TUIKit 组件，为此您需要修改以下文件。

1.【npm 下载】

为了方便您后续的拓展，建议您将 TUIKit 组件复制到自己工程的 pages 目录下，在自己的项目目录下执行以下命令：

# macOS
npm i @tencentcloud/chat-uikit-uniapp-vue2

mkdir -p ./TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-uniapp-vue2/ ./TUIKit

# windows
npm i @tencentcloud/chat-uikit-uniapp-vue2

xcopy .\node_modules\@tencentcloud\chat-uikit-uniapp-vue2 .\TUIKit /i /e

2. 【main.js 文件】

import App from "./App";
// #ifndef VUE3
import Vue from "vue";
import VueCompositionAPI from "@vue/composition-api";
import unifyPromiseVue2 from "./TUIKit/utils/unifyPromiseVue2";
Vue.config.productionTip = false;
App.mpType = "app";
Vue.use(VueCompositionAPI);
unifyPromiseVue2();
const app = new Vue({
  ...App,
});
app.$mount();
// #endif

注意

HBuilderX （HBuilderX 版本 >= 3.8.4.20230531）会默认创建 uni.promisify.adaptor ,可忽略引入

3.【App.vue 文件】

<script lang="ts">
import { TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";
// 必填信息
const config = {
  userID: "", //User ID
  SDKAppID: 0, // Your SDKAppID
  secretKey: "", // Your secretKey
};
const userSig = genTestUserSig(config).userSig;
uni.$chat_SDKAppID = config.SDKAppID;
uni.$chat_userID = config.userID;
uni.$chat_userSig = userSig;

// TUIChatKit 初始化
TUIChatKit.init();

export default {
  onLaunch: function () {
   // 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: "vue2", // 当前开发使用框架 vue2 / vue3
    });
  },
 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.【pages.json 文件】

{
  "pages": [
    {
      "path": "TUIKit/components/TUIConversation/index",
      "style": {
        "navigationBarTitleText": "云通信 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/index",
      "style": {
        "navigationBarTitleText": "云通信 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIChat/video-play"
    },
    {
      "path": "TUIKit/components/TUIContact/index",
      "style": {
        "navigationBarTitleText": "云通信 IM"
      }
    },
    {
      "path": "TUIKit/components/TUIGroup/manage-group/index",
      "style": {
        "navigationBarTitleText": "群管理"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "TUIKit/components/TUIConversation/index",
        "text": "消息"
      },
      {
        "pagePath": "TUIKit/components/TUIContact/index",
        "text": "通讯录"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
}

5.【在根目录下创建 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');
  },
};

步骤3：获取 SDKAppID 、密钥与 userID

设置 App.vue 文件示例代码中的相关参数 SDKAppID、secretKey 以及 userID ，其中 SDKAppID 和密钥等信息，可通过 即时通信 IM 控制台 获取，单击目标应用卡片，进入应用的基础配置页面。例如： userID 信息，可通过 即时通信 IM 控制台 进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，即可创建账号并获取 userID。例如：

步骤4：运行效果

注意

请在项目 mianfest.json > 微信小程序配置,勾选以下选项

参考文档

• 常见问题(uniapp)
• 快速入门（uniapp / vue3）
• 快速入门（Web & H5）
• 快速入门（小程序）
• chat-uikit-uniapp （vue2/ vue3） github 源码
• chat-uikit-uniapp 日志

技术咨询

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