腾讯云即时通信IM小程序_AI解决方案_同尘科技

开发环境要求

微信开发者工具JavaScriptnode（12.13.0 ≤ node版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）npm（版本请与 node 版本匹配）

TUIKit 源码集成

步骤1：创建项目

在微信开发者工具上创建一个小程序项目，选择不使用模板。

步骤2：下载 TUIKit 组件

微信开发者工具创建的小程序不会默认创建 package.json 文件，因此您需要先创建 package.json 文件。新建终端，如下：输入：

npm init

然后通过 npm 方式下载 TUIKit 组件， 为了方便您后续的拓展，建议您将 TUIKit 组件复制到自己的小程序目录下:macOS 端Windows 端

npm i @tencentcloud/chat-uikit-wechat

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

npm i @tencentcloud/chat-uikit-wechat

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

成功后目录结构如图所示：构建 npm：微信开发者工具-工具-选择构建 npm：构建 npm 后目录如下（新增 miniprogram_npm 文件夹）：注意 您构建 npm 时，若出现如下图所示提示，请点击确定，该提示信息不会影响到组件的正常使用。

步骤3：引入 TUIKit 组件

方式一： 主包引入 （适用于业务逻辑简单的小程序）

在 page 页面引用 TUIKit 组件，为此您需要分别修改 index.wxml 、index.js 和 index.json。wxml 文件js 文件json 文件

config 的参数如下表所示：




import TencentCloudChat from '@tencentcloud/chat';import TIMUploadPlugin from 'tim-upload-plugin';import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';import { genTestUserSig }  from '../../TUIKit/debug/GenerateTestUserSig';
Page({    data: {        config: {            userID: '', //User ID            SDKAPPID: 0, // Your SDKAppID            SECRETKEY: '', // Your secretKey            EXPIRETIME: 604800,        }    },
    onLoad() {        const userSig = genTestUserSig(this.data.config).userSig         wx.$TUIKit = TencentCloudChat.create({            SDKAppID: this.data.config.SDKAPPID        })        wx.$chat_SDKAppID = this.data.config.SDKAPPID;        wx.$chat_userID = this.data.config.userID;        wx.$chat_userSig = userSig;        wx.TencentCloudChat = TencentCloudChat;        wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });        wx.$TUIKit.registerPlugin({ 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin });        wx.$TUIKit.login({            userID: this.data.config.userID,            userSig        });        wx.setStorage({            key: 'currentUserID',            data: [],        });        wx.$TUIKit.on(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);    },    onUnload() {        wx.$TUIKit.off(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);    },    onSDKReady() {        const TUIKit = this.selectComponent('#TUIKit');        TUIKit.init();    }  });



{  "usingComponents": {    "TUIKit": "../../TUIKit/index"  },    "navigationStyle": "custom"}

方式二：分包引入 （适用于业务逻辑复杂，按需载入的小程序）

小程序分包有如下好处：规避所有逻辑代码放主包，导致主包文件体积超限问题支持按需载入，降低小程序载入耗时和页面渲染耗时支持更加复杂的功能分包流程：1. 在自己项目里创建分包，本文以 TUI-CustomerService 为例。和 pages 同级创建 TUI-CustomerService 文件夹，并在文件夹内部创建 pages 文件夹并且其下创建 index 页面。创建后的目录结构：2. 在 app.json 文件注册分包。

{  "pages": [ "pages/index/index"  ],  "subPackages": [ {   "root": "TUI-CustomerService",   "name": "TUI-CustomerService",   "pages": [     "pages/index"   ],   "independent": false }  ],  "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black"  },  "style": "v2",  "sitemapLocation": "sitemap.json"}

3. 将 TUIKit 文件夹复制到分包目录下。成功后的目录结构：4. 将 TUIKit 文件夹下的 debug 文件夹复制到主包。5. 在分包内引用 TUIKit组件，为此需要分别修改分包内部 index.wxml 、index.js 、index.json 文件，以及 app.js 文件。wxml 文件js 文件json 文件app.js 文件

config 的参数如下表所示：




Page({
// 其他代码
  onLoad() {    const TUIKit = this.selectComponent('#TUIKit');    TUIKit.init();  },});



  {  "usingComponents": {    "TUIKit": "../TUIKit/index"  },  "navigationStyle": "custom"  }



import TencentCloudChat from '@tencentcloud/chat';import TIMUploadPlugin from 'tim-upload-plugin';import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';import { genTestUserSig } from './debug/GenerateTestUserSig';App({  onLaunch: function () {    wx.$TUIKit = TencentCloudChat.create({      SDKAppID: this.globalData.config.SDKAPPID,    });    const userSig = genTestUserSig(this.globalData.config).userSig     wx.$chat_SDKAppID = this.globalData.config.SDKAPPID;    wx.TencentCloudChat = TencentCloudChat;    wx.$chat_userID = this.globalData.config.userID;    wx.$chat_userSig = userSig;    wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });    wx.$TUIKit.registerPlugin({ 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin });    wx.$TUIKit.login({      userID: this.globalData.config.userID,      userSig  });    // 监听系统级事件    wx.$TUIKit.on(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);  },  onUnload() {    wx.$TUIKit.off(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);  },  globalData: {    config: {      userID: '', // User ID      SECRETKEY: '', // Your secretKey      SDKAPPID: 0, // Your SDKAppID      EXPIRETIME: 604800,    },  },  onSDKReady(event) {    // 监听到此事件后可调用 SDK 发送消息等 API，使用 SDK 的各项功能。  }});

6. 按需载入分包，您需要修改主包 pages 下的 index.wxml 、index.js。wxml 文件js 文件

  载入腾讯云 IM 分包



Page({  handleJump() {    wx.navigateTo({      url: '../../TUI-CustomerService/pages/index',    })  }})

步骤4： 获取 SDKAppID 、SECRETKEY 与 userID

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

步骤5：编译小程序

1. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。
2. 单击清缓存 > 全部清除。避免开发者工具的缓存造成渲染异常。3. 单击编译。

步骤6：发送您的第一条消息

注意 如果您在集成 TUIKit 之后还需要支持单人/多人音视频通话功能，请参见 使用音视频通话。

常见问题

1. 什么是 UserSig？

UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。

2. 如何生成 UserSig？

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

3. 小程序如果需要上线或者部署正式环境怎么办？

请在微信公众平台 > 开发 > 开发管理 > 开发设置 > 服务器域名中进行域名配置：从v2.11.2起 SDK 支持了 WebSocket，WebSocket 版本须添加以下域名到 socket 合法域名：

将以下域名添加到 request 合法域名：

将以下域名添加到 downloadFile 合法域名：

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

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

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

阿里云解决方案也看看？： 点击对比阿里云的解决方案