微信小程序快速集成腾讯IM

因为我们的项目使用的是原生的小程序开发，类似融云 环信 网易云信都是uniapp版本的，腾讯IM有个原生的带UI的，所以最后选择腾讯IM

腾讯IM文档 https://cloud.tencent.com/document/product/269/68376

1. 考虑到主包空间有限，IM的UI框架比较大，建一个packageIM的分包，在app.json里subPackages增加

 {
      "root": "packageIM",
      "name": "packageIM",
      "pages": [
        "pages/im_customer/index"
      ]
}

2. 在分包packageIM下新建package.json，然后安装， 构建 npm：微信开发者工具-工具-选择构建 npm

npm init 

npm i @tencentcloud/chat-uikit-wechat

在project.config.json文件配置分包的npm

"packNpmManually": true,
"packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      },
      {
        "packageJsonPath": "./packageIM/package.json",
        "miniprogramNpmDistDir": "./packageIM/"
      },
      {
        "packageJsonPath": "./packageCommunity/package.json",
        "miniprogramNpmDistDir": "./packageCommunity/"
      }
],

3. 将 TUIKit 文件夹复制到分包目录下，成功后的目录结构：

   
   image.png

4. 分别在wxml、index.json、index.js里写

<view>
    <TUIKit config="{{config}}" conversationID='{{conversationID}}' id="TUIKit"></TUIKit>
</view>

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

// packageIM/pages/im_customer/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    conversationID: '',
    user_id: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      user_id: options.user_id,
      conversationID: 'C2C' + options.user_id
    })
    const TUIKit = this.selectComponent('#TUIKit');
    TUIKit.init();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

5. IM登录方法，这边需要后台配合绑定一下userid，具体的逻辑看你们自己的业务

import TIMUploadPlugin from 'tim-upload-plugin';
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin';


IMLogin() {
    const userInfo = getApp().globalData.userInfo;
    console.log('IM:登录', userInfo)
    const userSig = userInfo.userSig;
    const userId = userInfo.userId;
    const SDKAppID = getApp().globalData.config.appInfo.IMAppID;
    if (userId && userSig) {
      // IM 处理
      wx.$TUIKit = TencentCloudChat.create({
        SDKAppID: SDKAppID,
      });
      wx.$chat_SDKAppID = SDKAppID;
      wx.TencentCloudChat = TencentCloudChat;
      wx.$chat_userID = userId;
      wx.$chat_userSig = userSig;
      wx.$TUIKit.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
      wx.$TUIKit.registerPlugin({ 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin });
      wx.$TUIKit.login({
        userID: userId,
        userSig
      });
      // 监听系统级事件
      wx.$TUIKit.on(wx.TencentCloudChat.EVENT.SDK_READY, this.onSDKReady,this);
    }
  },

onSDKReady(event) {
    // 监听到此事件后可调用 SDK 发送消息等 API，使用 SDK 的各项功能。
    console.log('IM:监听到event事件',event)
  },

6. 最后的效果如下

   
   IMG_9170.PNG