【即时通讯持续更新中】一篇文章让你实现面对面聊天

【即时通讯】一篇文章让你实现面对面聊天

官方文档地址：https://cloud.tencent.com/document/product/269/36887

本文主要概述使用小程序实现即时通讯功能

1.下载官方demo

下载地址：https://github.com/tencentyun/TIMSDK/tree/master/MiniProgram/IMSDK

2.将IM集成进你的项目

我们如果想在自己的项目中使用IM即时通讯的话，首先要把需要的文件引入项目中

1. debug 配置信息
2. pages 基本页面
3. static 图片、图标、js文件
4. TUI-CustomService 聊天页主文件夹
5. TUI-VideoCall 视频文件夹
6. utils 所需要的工具类
7. app.js 登陆、注册IM全局监听事件等

建议以上文件全量引入，后期可根据自己需求酌情删除

1. debug 配置

// 当前所在文件 ------  GenerateTestUserSig.js

// 这个文件不需要修改，直接引入即可
import LibGenerateTestUserSig from './lib-generate-test-usersig-es.min.js'

// 这里的 APPID 和 KEY 配置成自己的
// 你可以理解为只有 APPID 和 KEY 匹配，才是相同的聊天软件
const _SDKAPPID = 14512233;
const _SECRETKEY = '0d3b7a009b4d64';

// userSig 如果不正式上线，可使用IM自身方法生成
// APPID KEY userSig都是 IM 登陆必备参数，缺一不可

2. app.js 配置

// 这里有两个可选项 tim-wx-friendship.js tim-wx-sdk.js
// 前者比后者多了好友关系，且体积较大，可根据需求自行选择引入
import TIM from './static/tim-wx-friendship';

// IM文件上传插件，如未使用可不引入
import TIMUploadPlugin from './static/tim-upload-plugin';

// IM自定义输出文件
import logger from './utils/logger';
import Aegis from './static/aegis';

// 引入 debug 下的 SDKAPPID 并使用该 ID 登陆
import { SDKAPPID } from './debug/GenerateTestUserSig'

App({
  onLaunch() {
    // 调用初始化方法
    this.aegisInit()
    wx.aegis.reportEvent({
      name: 'time',
      ext1: 'first-run-time',
      ext2: 'imTuikitExternal',
      ext3: this.globalData.SDKAppID,
    });
    wx.setStorageSync('islogin', false);
    const { SDKAppID } = this.globalData;
    wx.setStorageSync(`TIM_${SDKAppID}_isTUIKit`, true);
    wx.$TUIKit = TIM.create({ SDKAppID: this.globalData.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, this.onSdkNotReady);
    wx.$TUIKit.on(wx.$TUIKitEvent.KICKED_OUT, this.onKickedOut);
    wx.$TUIKit.on(wx.$TUIKitEvent.ERROR, this.onTIMError);
    wx.$TUIKit.on(wx.$TUIKitEvent.NET_STATE_CHANGE, this.onNetStateChange);
    wx.$TUIKit.on(wx.$TUIKitEvent.SDK_RELOAD, this.onSDKReload);
    wx.$TUIKit.on(wx.$TUIKitEvent.SDK_READY, this.onSDKReady);

  onShow() {
    // 保持屏幕常亮
    wx.setKeepScreenOn({
      keepScreenOn: true,
    })
  },
  aegisInit() {
    wx.aegis = new Aegis({
      id: 'iHWefAYHDK', // 项目key
      reportApiSpeed: true, // 接口测速
      reportAssetSpeed: true, // 静态资源测速
      pagePerformance: true, // 开启页面测速
    });
  },
  // TODO:
  resetLoginData() {
    this.globalData.expiresIn = ''
    this.globalData.sessionID = ''
    this.globalData.userInfo = {
      userID: '',
      userSig: '',
      token: '',
      phone: '',
    };
    this.globalData.userProfile = null;
    logger.log(`| app |  resetLoginData | globalData: ${this.globalData}`);
  },
  globalData: {
    // userInfo: userID userSig token phone
    userInfo: null,
    isTUIKit: true,
    // 个人信息
    userProfile: null,
    headerHeight: 0,
    statusBarHeight: 0,
    SDKAppID: SDKAPPID,
  },
  onKickedOut() {
    wx.showToast({
      title: '您被踢下线',
      icon: 'error',
    })
    wx.navigateTo({
      url: './pages/TUI-Login/login',
    })
  },
})

app.json 配置

{
  "pages": [
    "pages/TUI-Login/login",
    "pages/TUI-Index/index",
    "pages/TUI-User-Center/mine/mine",
    "pages/TUI-User-Center/about/about",
    "pages/TUI-User-Center/personal/personal",
    "pages/TUI-User-Center/cancel/cancel",
    "pages/TUI-User-Center/webview/webview"
  ],
  "plugins": {
    "myPlugin": {
      "version": "1.0.3",
      "provider": "wxb302e0fc8ab232b4"
    }
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/TUI-Index/index",
        "text": "首页",
        "iconPath": "./static/images/homepage-normal.png",
        "selectedIconPath": "./static/images/homepage-hover.png"
      },
      {
        "pagePath": "pages/TUI-User-Center/mine/mine",
        "text": "我的",
        "iconPath": "./static/images/mine-normal.png",
        "selectedIconPath": "./static/images/mine-hover.png"
      }
    ]
  },
  "subPackages":[
    {
      "root":"TUI-CustomerService",
      "name": "TUI-CustomerService",
      "pages": [
         "pages/TUI-Conversation/conversation/conversation",
         "pages/TUI-Chat/chat",
         "pages/TUI-Conversation/create-conversation/create",
         "pages/TUI-Group/create-group/create",
         "pages/TUI-Group/join-group/join",
         "pages/TUI-Group/memberprofile-group/memberprofile"
      ],
      "independent": false
    },
    {
      "root": "TUI-VideoCall",
      "name": "TUI-VideoCall",
      "pages": [
        "pages/TUI-VideoCall/callkit-index/index",
        "pages/TUI-VideoCall/callkit-room/room"
      ]
    }
  ],
  "preloadRule": {
    "pages/TUI-Index/index" :{  
      "network": "all",
      "packages": [
        "TUI-CustomerService"
      ]
    }
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "TUIKit",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

最后：配置完成后根据小程序路径跳转响应页面即可,持续更新中。。。