# 小程序端无法接听来电 - 问题诊断与修复 ## 问题现象 Web 端发起视频通话后,小程序端没有任何反应,无法接听来电。 ## 根本原因分析 ### 1. TUICallKit 组件未正确挂载 **问题:** 小程序端的 TUICallKit 组件在登录前就已经挂载,但可能没有正确初始化监听。 **修复:** - 改为登录后才挂载 TUICallKit 组件 - 确保组件在登录状态下一直保持挂载 ### 2. 事件监听未正确设置 **问题:** 初始化后没有设置来电事件监听,导致收到来电时没有响应。 **修复:** - 在初始化成功后立即设置事件监听 - 添加详细的日志输出 ### 3. IM 账号可能未导入 **问题:** 患者账号可能没有成功导入到腾讯云 IM 系统。 **修复:** - 后端在生成签名时自动导入账号 - 添加日志记录导入结果 ## 已实施的修复 ### 修复 1:条件渲染 TUICallKit 组件 ```vue ``` ### 修复 2:完善事件监听 ```javascript // 初始化成功后设置事件监听 await TUICallKitAPI.init({ sdkAppID: Number(sdkAppId), userID: userId, userSig: userSig, }); // 等待初始化完成 await new Promise(resolve => setTimeout(resolve, 1000)); // 设置所有必要的事件监听 TUICallKitAPI.on('onCallReceived', (data) => { console.log('=== 收到来电 ===', data); uni.showToast({ title: '收到来电', icon: 'none' }); }); TUICallKitAPI.on('onCallCancelled', (data) => { console.log('=== 来电已取消 ===', data); }); TUICallKitAPI.on('onCallEnd', (data) => { console.log('=== 通话已结束 ===', data); }); TUICallKitAPI.on('onUserVideoAvailable', (data) => { console.log('=== 用户视频状态变化 ===', data); }); TUICallKitAPI.on('onUserAudioAvailable', (data) => { console.log('=== 用户音频状态变化 ===', data); }); console.log('=== 事件监听已设置 ==='); ``` ### 修复 3:增强日志输出 在关键步骤添加详细日志: - 登录信息 - 初始化状态 - 事件监听设置 - 来电接收 ## 测试步骤 ### 步骤 1:清除缓存重新测试 1. 微信开发者工具:点击"清缓存" → "全部清除" 2. 真机测试:删除小程序后重新打开 ### 步骤 2:小程序端登录 1. 输入患者ID:`2` 2. 点击"登录" 3. 查看控制台输出: ``` 获取签名成功: { userId: "patient_2", sdkAppId: "1400xxxxxx", ... } === 小程序端登录信息 === sdkAppId: 1400xxxxxx userId: patient_2 userSig 长度: xxx TUICallKit 初始化成功, userId: patient_2 === 事件监听已设置 === ``` 4. 确认界面显示: - "当前登录: patient_2" - 输入框提示变为"输入医生ID或完整userId" ### 步骤 3:Web 端发起呼叫 1. Web 端打开患者详情页 2. 点击"视频通话"按钮 3. 查看浏览器控制台: ``` === 发起一对一通话 === 后端返回的 patientUserId: patient_2 最终使用的 targetUserId: patient_2 通话已发起,目标用户: patient_2 ``` ### 步骤 4:小程序端应该收到来电 小程序端控制台应该输出: ``` === 收到来电 === { inviter: "doctor_1", inviteeList: ["patient_2"], callType: 2, ... } ``` 同时: - 弹出 Toast 提示"收到来电" - TUICallKit 界面自动显示 - 显示"接听"和"拒绝"按钮 ## 如果仍然无法接听 ### 检查点 1:确认 IM 账号已导入 查看后端日志(`runtime/log/`): ``` 小程序获取患者签名成功 - patient_id: 2, user_id: patient_2 确保患者IM账号存在 - patient_id: 2, user_id: patient_2, nick: 张三 ``` 如果看到"导入患者IM账号失败",说明 IM 账号导入有问题。 ### 检查点 2:确认 SDKAppID 一致 对比 Web 端和小程序端的 SDKAppID: ```javascript // Web 端 console.log('Web 端 SDKAppID:', res.sdkAppId) // 小程序端 console.log('小程序端 SDKAppID:', sdkAppId) ``` 必须完全一致! ### 检查点 3:确认 userId 格式一致 对比呼叫目标和登录用户: ```javascript // Web 端呼叫 console.log('最终使用的 targetUserId:', targetUserId) // 应该是 patient_2 // 小程序端登录 console.log('userId:', userId) // 应该是 patient_2 ``` 必须完全一致! ### 检查点 4:确认网络连接 小程序端应该能连接到腾讯云服务器: ```javascript // 检查 WebSocket 连接 console.log('IM SDK 连接状态:', TUICallKitAPI.getConnectionStatus()) ``` 如果返回 `DISCONNECTED`,说明网络连接有问题。 ### 检查点 5:确认权限已授予 小程序需要以下权限: - 摄像头权限 - 麦克风权限 - 网络权限 在小程序设置中检查: 设置 → 权限管理 → 允许摄像头和麦克风 ## 常见错误及解决方案 ### 错误 1:控制台没有"收到来电"日志 **原因:** - 事件监听未正确设置 - TUICallKit 组件未挂载 - IM 连接断开 **解决:** 1. 确认登录后 `isLogin.value = true` 2. 确认控制台有"事件监听已设置"日志 3. 重新登录小程序 ### 错误 2:提示"对方不在线" **原因:** - userId 格式不匹配 - 小程序端未登录 - IM 账号未导入 **解决:** 1. 检查 userId 格式是否一致 2. 确认小程序端已登录 3. 查看后端日志确认账号已导入 ### 错误 3:小程序闪退或卡死 **原因:** - 内存不足 - 组件初始化失败 - 权限未授予 **解决:** 1. 重启微信 2. 清除小程序缓存 3. 授予所有必要权限 ## 调试技巧 ### 技巧 1:使用真机调试 开发者工具可能与真机表现不同,建议: 1. 使用真机调试功能 2. 查看真机控制台日志 3. 测试实际通话效果 ### 技巧 2:双向测试 不仅测试 Web → 小程序,也测试小程序 → Web: **小程序呼叫 Web:** 1. 小程序端登录为 `patient_2` 2. 输入 `1` 或 `doctor_1` 3. 点击"呼叫" 4. Web 端应该收到来电 ### 技巧 3:查看腾讯云控制台 登录腾讯云控制台: 1. 进入"即时通信 IM" 2. 查看"用户管理" 3. 确认 `patient_2` 和 `doctor_1` 都已导入 4. 查看"实时监控"了解通话状态 ### 技巧 4:抓包分析 使用微信开发者工具的网络面板: 1. 切换到 Network 标签 2. 筛选 WebSocket 连接 3. 查看信令消息 4. 确认收到 INVITE 消息 ## 成功标志 当一切正常时,你应该看到: ### 小程序端控制台 ``` 获取签名成功: { userId: "patient_2", ... } === 小程序端登录信息 === sdkAppId: 1400xxxxxx userId: patient_2 TUICallKit 初始化成功, userId: patient_2 === 事件监听已设置 === 登录成功 [Web 端发起呼叫后] === 收到来电 === { inviter: "doctor_1", inviteeList: ["patient_2"], callType: 2 } ``` ### 小程序界面 - 自动弹出通话界面 - 显示来电者信息 - 显示"接听"和"拒绝"按钮 - 可以正常接听通话 ## 后端日志检查 查看 `server/runtime/log/` 目录下的日志文件: ### 成功的日志示例 ``` [info] 小程序获取患者签名成功 - patient_id: 2, user_id: patient_2 [info] 确保患者IM账号存在 - patient_id: 2, user_id: patient_2, nick: 张三 [info] 医生获取通话签名成功 - admin_id: 1, patient_id: 2 ``` ### 失败的日志示例 ``` [error] 获取患者签名失败 - patient_id: 2, error: xxx [warning] 导入患者IM账号失败 - patient_id: 2, error: xxx ``` 如果看到错误日志,需要检查: 1. 腾讯云配置是否正确 2. SDKAppID 和 SecretKey 是否有效 3. 网络连接是否正常 ## 终极解决方案 如果以上所有方法都无效,尝试以下步骤: ### 1. 完全重置 ```bash # 小程序端 1. 删除小程序 2. 清除微信缓存 3. 重启微信 4. 重新打开小程序 # Web 端 1. 清除浏览器缓存 2. 退出登录 3. 重新登录 4. 刷新页面 ``` ### 2. 检查腾讯云配置 ```php // server/config/trtc.php return [ 'sdkAppId' => '1400xxxxxx', // 确保正确 'secretKey' => 'xxxxxxxx', // 确保正确 'expireTime' => 86400 ]; ``` ### 3. 手动导入 IM 账号 使用腾讯云控制台手动导入: 1. 登录腾讯云控制台 2. 进入"即时通信 IM" 3. 用户管理 → 导入用户 4. 导入 `patient_2` 和 `doctor_1` ### 4. 联系技术支持 提供以下信息: 1. 小程序端完整控制台日志 2. Web 端完整控制台日志 3. 后端日志文件 4. 腾讯云 SDKAppID 5. 测试环境信息 --- **最后更新:** 2024-03-04 **版本:** 2.0