【TUICallKit】小程序全局监听（分包方案）

原创

jonyttang

修改于 2023-09-07 11:14:14

3.7K3

修改于 2023-09-07 11:14:14

文章被收录于专栏：TUICallKitTUICallKit

分包流程

适用于业务逻辑复杂，按需载入的小程序

小程序分包有如下好处

规避所有逻辑代码放主包，导致主包文件体积超限问题
支持按需载入，降低小程序载入耗时和页面渲染耗时
支持更加复杂的功能

构建npm

npm i @tencentcloud/call-uikit-wechat@1.4.4

微信开发者工具 工具 > 构建 npm。构建 npm 后目录如下（多了 miniprogram_npm）：

1.下载 CallKit 分包组件

CallKit 分包组件下载地址

https://web.sdk.qcloud.com/trtc/miniapp/download/TUICallKit/subpackage/subpackage-call.zip

2.创建分包

将全局监听分包组件复制和 pages 同级目录下，本文以 subpackage-call 为例，成功后的目录结构：

3.注册分包

在 app.json 文件注册分包。

{
  "pages": [
    "pages/index/index"
  ],
  "subPackages": [
    {
      "root": "subpackage-call",
      "name": "subpackage-call",
      "pages": [
        "pages/globalCall/globalCall"
      ],
      "independent": false
    }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4. 实例化 callManager

1.在 app.js onLaunch 生命周期中实例化 callManager

require.async('./subpackage-call/TUICallKit/serve/callManager.js').then(res => {
      wx.CallManager = new res.CallManager();
    }).catch(({mod, errMsg}) => {
      console.error(`path: ${mod}, ${errMsg}`)
})

5 触发全局监听

  wx.CallManager.init({
      sdkAppID: 123456,                 // 替换为用户自己的 sdkAppID
      userID: '123',                    // 替换为用户自己的 userID
      userSig: 'xxxxxxx',               // 替换为用户自己的 userSig
      globalCallPagePath: 'subpackage-call/pages/globalCall/globalCall', // 替换为步骤一里注册的全局监听页面
  });

参数	类型	说明	是否必传
sdkAppID	String	IM 的应用 ID	是
userId	String	当前用户的 ID	是
userSig	String	鉴权的票据	是
globalCallPagePath	String	注册的全局监听页面	是
tim	ChatSDK	TIM 实例	否