297 lines
7.6 KiB
Markdown
297 lines
7.6 KiB
Markdown
# 小程序端无法接听来电 - 修复总结
|
||
|
||
## 问题描述
|
||
Web 端（医生端）发起视频通话后，小程序端（患者端）无法接听，没有任何反应。
|
||
|
||
## 根本原因
|
||
1. **TUICallKit 组件挂载时机不当**：组件在登录前就已挂载，但事件监听未正确设置
|
||
2. **事件监听缺失**：初始化后没有设置来电事件监听
|
||
3. **缺少初始化等待时间**：初始化后立即设置监听可能导致监听失效
|
||
|
||
## 已实施的修复
|
||
|
||
### 修复 1：条件渲染 TUICallKit 组件
|
||
|
||
**修改文件：** `wx/TUICallKit/pages/call.vue`
|
||
|
||
**修改内容：**
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<template>
|
||
<view>
|
||
<TUICallKit></TUICallKit>
|
||
...
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 修改后 -->
|
||
<template>
|
||
<view>
|
||
<!-- 只在登录后才挂载 TUICallKit -->
|
||
<TUICallKit v-if="isLogin"></TUICallKit>
|
||
...
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
**原因：** 确保组件在登录成功后才挂载，避免未初始化状态下的问题。
|
||
|
||
### 修复 2：移除不支持的事件监听代码
|
||
|
||
**修改文件：** `wx/TUICallKit/pages/call.vue`
|
||
|
||
**修改内容：**
|
||
```javascript
|
||
// 初始化 TUICallKit
|
||
await TUICallKitAPI.init({
|
||
sdkAppID: Number(sdkAppId),
|
||
userID: userId,
|
||
userSig: userSig,
|
||
});
|
||
|
||
console.log('TUICallKit 初始化成功, userId:', userId);
|
||
|
||
// 等待初始化完成
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
// 小程序端使用 TUIStore 监听状态变化，而不是 .on() 方法
|
||
// TUICallKit 组件会自动处理来电显示
|
||
console.log('=== TUICallKit 初始化完成，等待来电 ===');
|
||
|
||
isLogin.value = true;
|
||
```
|
||
|
||
**原因：**
|
||
- 小程序端的 TUICallKit 不支持 `.on()` 方法
|
||
- TUICallKit 组件会自动处理来电显示和交互
|
||
- 不需要手动设置事件监听
|
||
|
||
### 修复 3：增强 userId 格式处理
|
||
|
||
**修改文件：** `wx/TUICallKit/pages/call.vue`
|
||
|
||
**修改内容：**
|
||
```javascript
|
||
const callHandler = async () => {
|
||
// ...
|
||
|
||
// 构建目标用户ID - 确保格式一致
|
||
let targetUserId = patientId.value;
|
||
if (/^\d+$/.test(patientId.value)) {
|
||
// 纯数字，添加 doctor_ 前缀（患者呼叫医生）
|
||
targetUserId = `doctor_${patientId.value}`;
|
||
}
|
||
|
||
console.log('准备呼叫用户:', targetUserId);
|
||
|
||
// 发起通话
|
||
await TUICallKitAPI.calls({
|
||
userIDList: [targetUserId],
|
||
type: 2,
|
||
});
|
||
|
||
// ...
|
||
};
|
||
```
|
||
|
||
**原因：** 自动处理 userId 格式，避免格式不匹配导致的问题。
|
||
|
||
### 修复 4：改进用户界面提示
|
||
|
||
**修改文件：** `wx/TUICallKit/pages/call.vue`
|
||
|
||
**修改内容：**
|
||
```vue
|
||
<input
|
||
class="input-box"
|
||
v-model="patientId"
|
||
:placeholder="!isLogin ? '请输入患者ID（数字）' : '输入医生ID或完整userId（如：doctor_1）'"
|
||
placeholder-style="color:#BBBBBB;"
|
||
/>
|
||
|
||
<view v-if="isLogin" class="status-info">
|
||
<text>当前登录: {{ currentUserId }}</text>
|
||
<text class="tip">提示：呼叫医生请输入医生ID（如：1）或完整ID（如：doctor_1）</text>
|
||
</view>
|
||
```
|
||
|
||
**原因：** 提供更清晰的用户指引，减少操作错误。
|
||
|
||
### 修复 5：增强日志输出
|
||
|
||
**修改文件：** `wx/TUICallKit/pages/call.vue`
|
||
|
||
**修改内容：**
|
||
```javascript
|
||
console.log('=== 小程序端登录信息 ===');
|
||
console.log('sdkAppId:', sdkAppId);
|
||
console.log('userId:', userId);
|
||
console.log('userSig 长度:', userSig?.length);
|
||
```
|
||
|
||
**原因：** 便于排查问题，快速定位错误。
|
||
|
||
## 测试验证
|
||
|
||
### 测试步骤
|
||
|
||
1. **小程序端登录**
|
||
```
|
||
输入患者ID：2
|
||
点击"登录"
|
||
确认显示："当前登录: patient_2"
|
||
确认控制台显示："=== 事件监听已设置 ==="
|
||
```
|
||
|
||
2. **Web 端发起呼叫**
|
||
```
|
||
打开患者详情页
|
||
点击"视频通话"按钮
|
||
确认控制台显示："最终使用的 targetUserId: patient_2"
|
||
```
|
||
|
||
3. **小程序端接听**
|
||
```
|
||
确认自动弹出通话界面
|
||
确认控制台显示："=== 收到来电 ==="
|
||
点击"接听"按钮
|
||
确认视频和音频正常
|
||
```
|
||
|
||
### 预期结果
|
||
|
||
**小程序端控制台：**
|
||
```
|
||
获取签名成功: { userId: "patient_2", sdkAppId: "1400xxxxxx", ... }
|
||
=== 小程序端登录信息 ===
|
||
sdkAppId: 1400xxxxxx
|
||
userId: patient_2
|
||
userSig 长度: xxx
|
||
TUICallKit 初始化成功, userId: patient_2
|
||
=== TUICallKit 初始化完成，等待来电 ===
|
||
登录成功
|
||
|
||
[收到来电时]
|
||
TUICallKit 组件会自动弹出来电界面
|
||
```
|
||
|
||
**Web 端控制台：**
|
||
```
|
||
=== 发起一对一通话 ===
|
||
后端返回的 patientUserId: patient_2
|
||
最终使用的 targetUserId: patient_2
|
||
通话已发起，目标用户: patient_2
|
||
>>> 正在呼叫
|
||
>>> 通话已接通
|
||
```
|
||
|
||
## 相关文档
|
||
|
||
1. **CANNOT_RECEIVE_CALL_FIX.md** - 详细的问题诊断与修复指南
|
||
2. **CALL_DEBUG_GUIDE.md** - 调试指南，包含常见问题和解决方案
|
||
3. **QUICK_FIX.md** - 快速修复指南
|
||
4. **TEST_GUIDE.md** - 完整的测试指南
|
||
5. **CALL_TROUBLESHOOTING_CHECKLIST.md** - 问题排查清单
|
||
|
||
## 注意事项
|
||
|
||
### 1. userId 格式必须一致
|
||
- Web 端使用 `patient_2` 呼叫
|
||
- 小程序端必须登录为 `patient_2`
|
||
- 格式不一致会导致"对方不在线"错误
|
||
|
||
### 2. SDKAppID 必须一致
|
||
- Web 端和小程序端必须使用同一个腾讯云应用
|
||
- 检查后端配置文件确保一致
|
||
|
||
### 3. 小程序必须在前台
|
||
- 小程序切换到后台可能无法接收来电
|
||
- 测试时确保小程序在前台运行
|
||
|
||
### 4. 权限必须授予
|
||
- 摄像头权限
|
||
- 麦克风权限
|
||
- 网络权限
|
||
|
||
### 5. 初始化需要时间
|
||
- 登录后等待 1 秒再进行其他操作
|
||
- 确保看到"事件监听已设置"日志
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 小程序端仍然无法接听怎么办？
|
||
|
||
**A:** 按以下顺序检查：
|
||
1. 确认小程序端已登录（显示"当前登录: patient_X"）
|
||
2. 确认控制台有"事件监听已设置"日志
|
||
3. 确认 userId 格式一致（Web 端和小程序端）
|
||
4. 确认 SDKAppID 一致
|
||
5. 尝试清除缓存重新登录
|
||
|
||
### Q2: 提示"对方不在线"怎么办？
|
||
|
||
**A:** 这是最常见的问题，原因是 userId 格式不匹配：
|
||
1. 检查 Web 端控制台：`targetUserId: patient_2`
|
||
2. 检查小程序端控制台：`userId: patient_2`
|
||
3. 确保两者完全一致
|
||
4. 如果不一致，检查后端接口返回的数据
|
||
|
||
### Q3: 小程序端没有"收到来电"日志怎么办？
|
||
|
||
**A:** 说明事件监听未生效：
|
||
1. 确认初始化成功
|
||
2. 确认有"事件监听已设置"日志
|
||
3. 尝试重新登录
|
||
4. 检查 TUICallKit 组件是否正确挂载
|
||
|
||
### Q4: 如何确认后端配置正确？
|
||
|
||
**A:** 检查以下几点：
|
||
1. 查看后端日志：`runtime/log/`
|
||
2. 确认有"小程序获取患者签名成功"日志
|
||
3. 确认有"确保患者IM账号存在"日志
|
||
4. 如果有错误日志，根据提示修复
|
||
|
||
### Q5: 真机测试和开发者工具表现不一致？
|
||
|
||
**A:** 这是正常的：
|
||
1. 优先以真机测试结果为准
|
||
2. 开发者工具可能有限制或 bug
|
||
3. 建议使用真机调试功能
|
||
4. 查看真机控制台日志
|
||
|
||
## 后续优化建议
|
||
|
||
### 1. 添加心跳检测
|
||
定期检查连接状态，确保在线状态准确。
|
||
|
||
### 2. 添加重连机制
|
||
网络中断后自动重连，提高稳定性。
|
||
|
||
### 3. 优化错误提示
|
||
根据不同错误码给出更具体的提示信息。
|
||
|
||
### 4. 添加通话质量监控
|
||
实时监控通话质量，出现问题时自动调整。
|
||
|
||
### 5. 添加通话记录
|
||
记录通话历史，便于后续查询和统计。
|
||
|
||
## 技术支持
|
||
|
||
如果按照本文档操作后仍然无法解决问题，请提供以下信息：
|
||
|
||
1. 小程序端完整控制台日志（截图）
|
||
2. Web 端完整控制台日志（截图）
|
||
3. 后端日志文件（`runtime/log/`）
|
||
4. 腾讯云 SDKAppID（可部分隐藏）
|
||
5. 测试环境信息（开发/生产，域名等）
|
||
6. 具体的错误提示信息
|
||
|
||
---
|
||
|
||
**修复日期：** 2024-03-04
|
||
**修复版本：** 2.0
|
||
**修复人员：** Kiro AI Assistant
|
||
**测试状态：** 待验证
|