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),})}}exportdefault 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.jsPage({/**
     * 页面的初始数据
     */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()=>{//初始化TUICallKitthis.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");}},// 初始化TRTCCallingasyncinit({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)}elseif(type==AppTUICallKitDelegate.TYPE_CALL){if(event.detail.groupID){this.groupCall(event.detail);}else{this.call(event.detail);}}return0;},// 销毁 TUICallEnginedestroyed(){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(newlt({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~~