# 修改清单 - 小程序端无法接听来电修复 ## 修改的文件 ### 1. wx/TUICallKit/pages/call.vue ✅ **修改内容:** #### 修改 1:条件渲染 TUICallKit 组件 ```vue ``` #### 修改 2:更新输入框提示 ```vue ``` #### 修改 3:增强状态显示 ```vue 当前登录: {{ currentUserId }} 提示:呼叫医生请输入医生ID(如:1)或完整ID(如:doctor_1) ``` #### 修改 4:增强登录日志 ```javascript // 第 84-87 行 console.log('=== 小程序端登录信息 ==='); console.log('sdkAppId:', sdkAppId); console.log('userId:', userId); console.log('userSig 长度:', userSig?.length); ``` #### 修改 5:移除不支持的事件监听代码 ```javascript // 第 100-107 行 console.log('TUICallKit 初始化成功, userId:', userId); // 等待一下确保初始化完成 await new Promise(resolve => setTimeout(resolve, 1000)); // 小程序端使用 TUIStore 监听状态变化,而不是 .on() 方法 // TUICallKit 组件会自动处理来电显示 console.log('=== TUICallKit 初始化完成,等待来电 ==='); isLogin.value = true; ``` **重要说明:** - 小程序端不支持 `.on()` 方法 - TUICallKit 组件会自动处理来电 - 不需要手动设置事件监听 #### 修改 6:增强 userId 格式处理 ```javascript // 第 158-167 行 // 构建目标用户ID - 确保格式一致 let targetUserId = patientId.value; if (/^\d+$/.test(patientId.value)) { // 纯数字,添加 doctor_ 前缀(患者呼叫医生) targetUserId = `doctor_${patientId.value}`; } console.log('准备呼叫用户:', targetUserId); ``` #### 修改 7:增强样式 ```css /* 第 213-227 行 */ .status-info { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 5px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .status-info .tip { font-size: 12px; color: #999; text-align: center; line-height: 1.5; } ``` ## 新增的文档 ### 1. wx/TUICallKit/CANNOT_RECEIVE_CALL_FIX.md ✅ 详细的问题诊断与修复指南,包含: - 根本原因分析 - 已实施的修复 - 测试步骤 - 常见错误及解决方案 - 调试技巧 - 后端日志检查 ### 2. wx/TUICallKit/CALL_DEBUG_GUIDE.md ✅ 调试指南,包含: - 常见原因及解决方案 - 调试步骤 - 测试方案 - 后端接口检查 - 常用调试命令 - 问题排查清单 ### 3. wx/TUICallKit/QUICK_FIX.md ✅ 快速修复指南,包含: - 核心问题说明 - 立即检查步骤 - 快速修复步骤 - 常见错误及解决 - 验证清单 - 测试命令 ### 4. wx/TUICallKit/TEST_GUIDE.md ✅ 完整的测试指南,包含: - 测试前准备 - 5 个测试场景 - 常见问题排查 - 测试检查清单 - 测试报告模板 ### 5. wx/TUICallKit/FIX_SUMMARY.md ✅ 修复总结,包含: - 问题描述 - 根本原因 - 已实施的修复 - 测试验证 - 相关文档 - 注意事项 - 常见问题 ### 6. wx/TUICallKit/START_HERE.md ✅ 快速开始指南,包含: - 快速开始步骤 - 问题排查 - 文档导航 - 关键日志 - 配置检查 - 测试场景 ### 7. wx/TUICallKit/MINIAPP_API_DIFFERENCE.md ✅ 小程序端与 Web 端 API 差异说明,包含: - 核心差异说明 - 事件监听方式对比 - 正确的使用流程 - 常见错误及解决 - 完整示例代码 ### 8. CHANGES.md ✅ 问题排查清单,包含: - 8 个检查步骤 - 常见错误代码 - 后端接口检查 - 网络抓包分析 - 问题解决方案汇总 - 成功标志 ### 8. CHANGES.md ✅ 本文件,记录所有修改内容 ## 修改统计 - **修改文件数:** 1 - **新增文档数:** 8 - **代码修改行数:** 约 50 行 - **新增文档行数:** 约 2000 行 ## 核心修改点 ### 1. 组件挂载时机 ⭐⭐⭐ **问题:** TUICallKit 组件在登录前就已挂载 **修复:** 改为登录后才挂载(`v-if="isLogin"`) **影响:** 确保组件在正确的时机初始化 ### 2. 事件监听设置 ⭐⭐⭐ **问题:** 初始化后没有设置来电事件监听 **修复:** 添加完整的事件监听代码 **影响:** 能够正确接收和处理来电 ### 3. 初始化等待 ⭐⭐ **问题:** 初始化后立即设置监听可能失效 **修复:** 添加 1 秒等待时间 **影响:** 确保初始化完全完成 ### 4. userId 格式处理 ⭐⭐ **问题:** 输入纯数字时格式不匹配 **修复:** 自动添加前缀(`doctor_`) **影响:** 减少用户输入错误 ### 5. 日志增强 ⭐ **问题:** 缺少关键日志,难以调试 **修复:** 添加详细的日志输出 **影响:** 便于问题排查 ## 测试建议 ### 必须测试的场景 1. **Web → 小程序**(最重要) - 小程序端登录 - Web 端发起呼叫 - 小程序端接听 - 正常通话 - 挂断 2. **小程序 → Web** - 小程序端登录 - 小程序端发起呼叫 - Web 端接听 - 正常通话 - 挂断 3. **拒绝通话** - 发起呼叫 - 接收方拒绝 - 确认正常结束 4. **超时未接听** - 发起呼叫 - 等待 30 秒 - 确认自动挂断 ### 测试检查点 - [ ] 小程序能正常登录 - [ ] 控制台显示"事件监听已设置" - [ ] 能收到来电通知 - [ ] 能正常接听 - [ ] 视频和音频都正常 - [ ] 能正常挂断 - [ ] 能正常拒绝 - [ ] 超时能正常处理 ## 回滚方案 如果修改后出现问题,可以回滚到原始版本: ### 回滚步骤 1. 使用 Git 回滚: ```bash git checkout HEAD -- wx/TUICallKit/pages/call.vue ``` 2. 或者手动恢复: - 移除 `v-if="isLogin"` - 移除事件监听代码 - 移除初始化等待代码 ### 原始代码关键部分 ```vue await TUICallKitAPI.init({ sdkAppID: Number(sdkAppId), userID: userId, userSig: userSig, }); console.log('TUICallKit 初始化成功, userId:', userId); isLogin.value = true; ``` ## 注意事项 ### ⚠️ 重要提示 1. **清除缓存** - 修改后必须清除缓存 - 开发者工具和真机都要清除 2. **userId 格式** - 必须确保 Web 端和小程序端格式一致 - 推荐使用 `prefix_number` 格式 3. **SDKAppID** - 必须确保双方使用同一个 - 检查后端配置 4. **权限授予** - 摄像头权限 - 麦克风权限 - 网络权限 5. **小程序状态** - 必须在前台运行 - 切换到后台可能无法接收来电 ## 后续优化 ### 可以考虑的改进 1. **添加心跳检测** - 定期检查连接状态 - 确保在线状态准确 2. **添加重连机制** - 网络中断后自动重连 - 提高稳定性 3. **优化错误提示** - 根据错误码给出具体提示 - 提供解决建议 4. **添加通话质量监控** - 实时监控通话质量 - 自动调整参数 5. **添加通话记录** - 记录通话历史 - 便于查询和统计 ## 文档使用指南 ### 按问题类型查找 - **无法登录** → `START_HERE.md` → 问题排查 → 问题 1 - **无法接听** → `CANNOT_RECEIVE_CALL_FIX.md` → 测试步骤 - **对方不在线** → `QUICK_FIX.md` → 快速修复步骤 - **完整测试** → `TEST_GUIDE.md` → 测试场景 - **详细排查** → `CALL_TROUBLESHOOTING_CHECKLIST.md` → 检查清单 ### 按角色查找 - **开发人员** → `FIX_SUMMARY.md` + `CALL_DEBUG_GUIDE.md` - **测试人员** → `TEST_GUIDE.md` + `START_HERE.md` - **运维人员** → `CALL_TROUBLESHOOTING_CHECKLIST.md` - **用户** → `START_HERE.md` --- **修改日期:** 2024-03-04 **修改版本:** 2.0 **修改人员:** Kiro AI Assistant **测试状态:** 待验证 ### 1. wx/TUICallKit/MINIAPP_API_DIFFERENCE.md ✅ (新增) 小程序端与 Web 端 API 差异说明,包含: - 核心差异说明 - 事件监听方式对比(重要!) - 正确的使用流程 - 常见错误及解决 - 完整示例代码 - TUIStore 监听方式 ### 2. wx/TUICallKit/CANNOT_RECEIVE_CALL_FIX.md ✅ 详细的问题诊断与修复指南 ### 3. wx/TUICallKit/CALL_DEBUG_GUIDE.md ✅ 调试指南 ### 4. wx/TUICallKit/QUICK_FIX.md ✅ 快速修复指南 ### 5. wx/TUICallKit/TEST_GUIDE.md ✅ 完整的测试指南 ### 6. wx/TUICallKit/FIX_SUMMARY.md ✅ 修复总结 ### 7. wx/TUICallKit/START_HERE.md ✅ 快速开始指南 ### 8. CALL_TROUBLESHOOTING_CHECKLIST.md ✅ 问题排查清单 ### 9. CHANGES.md ✅ 本文件 ## 修改统计 - **修改文件数:** 1 - **新增文档数:** 9 - **代码修改行数:** 约 30 行 - **新增文档行数:** 约 2500 行 ## 核心修改点 ### 1. 组件挂载时机 ⭐⭐⭐ **问题:** TUICallKit 组件在登录前就已挂载 **修复:** 改为登录后才挂载(`v-if="isLogin"`) **影响:** 确保组件在正确的时机初始化 ### 2. 移除不支持的 API ⭐⭐⭐ **问题:** 使用了小程序端不支持的 `.on()` 方法 **修复:** 移除所有 `.on()` 调用,让组件自动处理 **影响:** 避免 "is not a function" 错误 ### 3. 初始化等待 ⭐⭐ **问题:** 初始化后立即操作可能失效 **修复:** 添加 1 秒等待时间 **影响:** 确保初始化完全完成 ### 4. userId 格式处理 ⭐⭐ **问题:** 输入纯数字时格式不匹配 **修复:** 自动添加前缀(`doctor_`) **影响:** 减少用户输入错误 ### 5. 日志增强 ⭐ **问题:** 缺少关键日志,难以调试 **修复:** 添加详细的日志输出 **影响:** 便于问题排查 ## 重要提示 ⚠️ ### 小程序端与 Web 端的关键差异 1. **事件监听方式不同** - ❌ Web 端:`TUICallKitServer.setCallback()` 或 `.on()` - ✅ 小程序端:TUICallKit 组件自动处理,或使用 TUIStore 2. **发起通话方法不同** - ❌ Web 端:`call({ userID, type })` - ✅ 小程序端:`calls({ userIDList, type })` 3. **组件行为不同** - Web 端:需要手动控制显示/隐藏 - 小程序端:组件自动处理来电显示 ### 必读文档 如果你遇到 API 相关的错误,请务必阅读: **wx/TUICallKit/MINIAPP_API_DIFFERENCE.md** 这个文档详细说明了小程序端和 Web 端的所有差异。 ## 测试建议 ### 必须测试的场景 1. **登录测试** - 输入患者ID - 点击登录 - 确认显示"=== TUICallKit 初始化完成,等待来电 ===" - 确认没有错误 2. **接听测试**(最重要) - 小程序端登录 - Web 端发起呼叫 - 小程序端应自动弹出来电界面 - 点击接听 - 确认视频和音频正常 3. **发起通话测试** - 小程序端登录 - 输入医生ID - 点击呼叫 - Web 端应收到来电 ### 测试检查点 - [ ] 小程序能正常登录 - [ ] 控制台没有 "is not a function" 错误 - [ ] 能收到来电通知 - [ ] 能正常接听 - [ ] 视频和音频都正常 - [ ] 能正常挂断 ## 回滚方案 如果修改后出现问题,可以回滚: ```bash git checkout HEAD -- wx/TUICallKit/pages/call.vue ``` ## 后续优化 ### 可以考虑的改进 1. **使用 TUIStore 监听状态** - 如果需要自定义来电处理 - 参考 MINIAPP_API_DIFFERENCE.md 2. **添加心跳检测** - 定期检查连接状态 3. **优化错误提示** - 根据错误码给出具体提示 ## 文档使用指南 ### 按问题类型查找 - **API 错误(is not a function)** → `MINIAPP_API_DIFFERENCE.md` - **无法登录** → `START_HERE.md` - **无法接听** → `CANNOT_RECEIVE_CALL_FIX.md` - **对方不在线** → `QUICK_FIX.md` - **完整测试** → `TEST_GUIDE.md` ### 按角色查找 - **开发人员** → `MINIAPP_API_DIFFERENCE.md` + `FIX_SUMMARY.md` - **测试人员** → `TEST_GUIDE.md` + `START_HERE.md` - **运维人员** → `CALL_TROUBLESHOOTING_CHECKLIST.md` --- **修改日期:** 2024-03-04 **修改版本:** 3.0(修复 API 错误) **修改人员:** Kiro AI Assistant **测试状态:** 待验证