微信小程序之腾讯IM群聊接入

794 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第21天,点击查看活动详情

前言

最近一直在开发小程序的群聊系统,该功能是没有聊天列表和好友关系,点击对应的群聊(该功能不是联系人界面)直接跳转到群聊内聊天。

腾讯云IM接入

  • 聊天界面 我这直接采用官网内的含UI快速集成方案,这样就不用咱们自己写界面能省下不少时间 image.png

下载它的源代码并且进入到文件夹,最后设置上SDKAPPIDSECRETKEYSDKAPPID需要从它的控制台上申请,密钥需要后端来进行设置,这样做的目的类似于token的验证

image.png

TUI-CustomeService整个文件夹拷贝到自己的项目中,这整个文件夹全部都包括了(不然为什么叫快速集成方案)

  • 分包和TIM依赖引入
  1. 分包 在app.json内的subPackages中写入分包规则,rootname,pages,指明聊天文件的路径和名称,在pages内需要分别引入单聊、群聊、视频聊天的路径不能一概包括。请参考文档!
 "subPackages": [
    {
      "root": "",
      "name": "",
      "pages": [
        "pages:xxx",
      ],
      "independent": false
    }
  ],
  1. 依赖引入 在app.js内需要引入TIM聊天依赖,TIMUploadPluginSDK依赖、logger记录器类似于日志的输出
import TIM from './utils/tim-wx.js'
import TIMUploadPlugin from './utils/tim-upload-plugin'
import logger from './utils/logger'
import { SDKAPPID } from './utils/GenerateTestUserSig'

思路:从app.js中引入一是为了可以先创建TIM聊天(没有做进入到某个页面再创建)和进行全局调用,而是可以监听全部的事件整个从头到尾的过程,具体如下:(我这写的是我用到的)

wx.$TUIKit = TIM.create({
  SDKAppID:SDKAPPID
})
wx.$TUIKit.registerPlugin({
  'tim-upload-plugin': TIMUploadPlugin
})

监听系统级事件,几乎所有的都能监听到(自行添加),创建、退出等

wx.$TUIKitTIM = TIM
wx.$TUIKitEvent = TIM.EVENT
wx.$TUIKitVersion = TIM.VERSION
wx.$TUIKitTypes = TIM.TYPES
wx.$TUIKit.on(wx.$TUIKitEvent.SDK_NOT_READY, ()=>{})
wx.$TUIKit.on(wx.$TUIKitEvent.KICKED_OUT, ()=>{})
  • 跳转到聊天界面
  1. 获取群聊的ID和获取所有的会话 在刚进入到所有群组界面的时候,获取它的会话列表和ID,注意!getConversationList 接口需要 SDK 处于 ready 状态后才能调用。
wx.$TUIKit.on(wx.$TUIKitEvent.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated, this);
wx.$TUIKit.getConversationList().then((imResponse) => {
  logger.log(`| TUI-conversation | getConversationList | getConversationList-length: ${imResponse.data.conversationList.length}`);
  this.setData({
    conversationList: imResponse.data.conversationList,
  });
})
  1. 跳转 点击跳转后,需要配置跳转到聊天界面所需要的群聊ID,和未读的数量,获取会话列表(以表示会话列表是最新的),注意!必须要为JSON格式,而且是必传项!
  handleRoute() {
    conversationInfomation = {
      conversationID: conversationID,
      unreadCount: 0
    };
    const url = `/TUI-CustomerService/pages/TUI-Chat/chat?conversationInfomation=${JSON.stringify(conversationInfomation)}`;
    wx.navigateTo({
      url,
    });
  },

未读数量我这设置为0,原因是不需要看未读数量如果进入后用户看到想知道在此之前聊了什么,必经会往上翻聊天记录~

参考资料

小程序快速集成方案