TUICallKit小程序全局监听实践

官网版本已发布

npm 地址 https://www.npmjs.com/package/@tencentcloud/call-uikit-wechat
接入文档地址 https://cloud.tencent.com/developer/article/2206425

以下不必看了

实现原理：

通话界面为单独的页面，里面使用 TUICallKit，收到邀请后，跳转到通话页面

1. 通话界面为一个单独的页面，里面引入 TUICallKit。在 app.json 中配置通话界面页面。
2. 在 app.js 中监听 TSignaling 事件。
3. 收到邀请信息则跳转到通话界面，通话结束后，返回到原来的页面。

Step1，app.js添加全局监听

新建 app-tuicallkit-delegate.js

import { TUICallEngine } from "./components/TUICallKit/TUICallEngine/tuicall-engine-wx";
var AppTUICallKitDelegate = {
  TYPE_INVITE: "invite",
  TYPE_CALL: "call",
  init({tim,sdkAppId,userId,userSig}) {
    //创建TUICallEngine
    wx.$TUICallEngine = TUICallEngine.createInstance({
      tim: tim,
      sdkAppID: sdkAppId,
    });
    //添加INVITED监听
    this.addTUICallEngineEvent();
    //初始化TUICallEngine
    wx.$TUICallEngine.init({
      userID: userId,
      userSig: userSig,
    })
  },
  addTUICallEngineEvent() {
    wx.$TUICallEngine.on('INVITED', this.handleNewInvitationReceived, this);
  },
  removeTUICallEngineEvent() {
    wx.$TUICallEngine.off('INVITED', this.handleNewInvitationReceived, this);
  },
  /**
   * 监听新的邀请
   */
  handleNewInvitationReceived(event) {
    this.removeTUICallEngineEvent();
    this.navigateTo(this.TYPE_INVITE, event);
  },
  /**
   * 监听主动拨打
   */
  handleNewCall(event) {
    this.removeTUICallEngineEvent();
    this.navigateTo(this.TYPE_CALL, event);
  },
  navigateTo(type, event) {
    wx.navigateTo({
      url: '/pages/calling/calling?type=' + type + '&event=' + JSON.stringify(event),
    })
  }
}
export default AppTUICallKitDelegate

app.js

...省略
import AppTuicallkitDelegate from './app-tuicallkit-delegate';
App({
  onLaunch: function () {
    ...省略
    AppTuicallkitDelegate.init({
      tim: tim,
      userId: this.globalData.config.userID,
      sdkAppId: this.globalData.config.SDKAPPID,
      userSig: userSig,
    });
  },
  ...省略
});

​

Step2，新增一个独立页面calling，并在app.json注册

calling.js

import AppTuicallkitDelegate from '../../app-tuicallkit-delegate';
// pages/calling/calling.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        config: {
            userID: '',
            userSig: '',
            type: 1,
            tim: wx.$TUIKit,
        },
        number: 0
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(option) {
        this.init(option)
    },
    init(option) {
        const {
            config
        } = this.data;
        config.userID = wx.$chat_userID;
        config.userSig = wx.$chat_userSig;
        config.tim = wx.$TUIKit;
        this.setData({
            config,
        }, async () => {
            //初始化TUICallKit
            this.TUICallKit = this.selectComponent('#TUICallKit');
            this.TUICallKit.init({type:option.type,event:JSON.parse(option.event)});
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        if (this.TUICallKit) {
            this.TUICallKit.destroyed();
        }
        setTimeout(() => {
          AppTuicallkitDelegate.addTUICallEngineEvent();
        }, 1);
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
    },
    /**
     * 通话结束时，关闭此页面
     */
    callEnd() {
        wx.navigateBack();
    },
})

calling.json

{
  "usingComponents": {
    "TUICallKit": "/components/TUICallKit/TUICallKit/TUICallKit"
  }
}

calling.wxml

<!--pages/calling/calling.wxml-->
<TUICallKit class="calling" id="TUICallKit" config="{{config}}" bind:callEnd="callEnd"  bind:sendMessage="sendMessage"></TUICallKit>

app.json

{
  "pages": [
    "pages/calling/calling"
  ]
  ...其他省略
}

Step3，修改部分TUICallKit源码

TUICallKit.js 主要是删除和TUICallEngine有关的内容，以及对reset函数的修改。

import AppTUICallKitDelegate from '../../../app-tuicallkit-delegate.js';
..省略
Component({
  ..省略
  methods: {
    ..省略
      // 数据重置
    reset(init) {
      ..省略
      if(!init){
        this.triggerEvent("callEnd");
      }
    },
    
    // 初始化TRTCCalling
    async init({type,event}) {
      this._addTSignalingEvent();
      // const res = await wx.$TUICallEngine.init({
      //   userID: this.data.config.userID,
      //   userSig: this.data.config.userSig,
      // });
      if(type == AppTUICallKitDelegate.TYPE_INVITE){
        this.handleNewInvitationReceived(event)
      }else if(type==AppTUICallKitDelegate.TYPE_CALL){
          if (event.detail.groupID) {
              this.groupCall(event.detail);
          } else {
              this.call(event.detail);
          }
      }
      return 0;
    },
    // 销毁 TUICallEngine
    destroyed() {
      this._removeTSignalingEvent();
      // TUICallEngine.destroyInstance();
    },
  },
  /**
   * 生命周期方法
   */
  lifetimes: {
   ..省略
    ready() {
      // wx.$TUICallEngine = TUICallEngine.createInstance({
      //   tim: wx.$TUIKit,
      //   sdkAppID: wx.$chat_SDKAppID,
      // });
      this.reset(true);
    },
   ..省略
  },
..省略
});

tuicall-engine-wx.js 删除如下代码，注意最后一个逗号。

（原因是因为在init后添加监听会报错，而且报的错是需要after init再添加监听，但其实需要before init添加监听，囧，这部分希望研发大佬看一下报的错对不，暂时不清楚删除会有什么影响）

Tt.getInstance().getAlert().checkSync(new lt({api:"on",attributes:{eventCode:t,handler:e,context:i},initReady:this._initReady})),

Step4 主动拨打

import { TUICallEngine } from "./components/TUICallKit/TUICallEngine/tuicall-engine-wx";
AppTuicallkitDelegate.handleNewCall(event);

Demo：https://github.com/601367322/TUICallKit-miniprogram-demo~~