479 lines
10 KiB
Markdown
479 lines
10 KiB
Markdown
# 收到来电但界面未显示 - 诊断指南
|
||
|
||
## 📊 日志分析
|
||
|
||
根据你提供的日志，我们可以确认：
|
||
|
||
### ✅ 成功的部分
|
||
|
||
1. **初始化成功**
|
||
```
|
||
=== TUICallKit 初始化完成，等待来电 ===
|
||
```
|
||
|
||
2. **收到来电信号**
|
||
```
|
||
[receiveNewInvitation] [newInvite: resume-c2c-new-message]
|
||
Step handle-c2c-new-message started
|
||
```
|
||
|
||
3. **消息处理完成**
|
||
```
|
||
Step emit-c2c-message-event completed
|
||
Step create-or-update-conversation-by-message completed
|
||
```
|
||
|
||
### ⚠️ 发现的问题
|
||
|
||
日志中有一个错误：
|
||
```
|
||
TypeError: _asyncToGenerator(...).apply is not a function
|
||
```
|
||
|
||
这个错误可能影响了 TUICallKit 组件的正常显示。
|
||
|
||
## 🔍 可能的原因
|
||
|
||
### 1. 组件层级问题
|
||
TUICallKit 组件可能被其他元素遮挡了。
|
||
|
||
### 2. 样式问题
|
||
TUICallKit 组件可能没有正确的样式，导致不可见。
|
||
|
||
### 3. 兼容性问题
|
||
可能存在 uni-app 版本或 Vue 版本的兼容性问题。
|
||
|
||
### 4. 组件状态问题
|
||
TUICallKit 组件可能没有正确响应来电状态。
|
||
|
||
## 🛠️ 解决方案
|
||
|
||
### 方案 1：调整组件层级和样式
|
||
|
||
修改 `call.vue` 的模板部分：
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page-container">
|
||
<!-- TUICallKit 组件 - 确保在最上层 -->
|
||
<view class="call-kit-wrapper" v-if="isLogin">
|
||
<TUICallKit></TUICallKit>
|
||
</view>
|
||
|
||
<!-- 登录界面 -->
|
||
<view class="loginBox" :class="{ 'hidden': showingCall }">
|
||
<input
|
||
class="input-box"
|
||
v-model="patientId"
|
||
:placeholder="!isLogin ? '请输入患者ID（数字）' : '输入医生ID或完整userId（如：doctor_1）'"
|
||
placeholder-style="color:#BBBBBB;"
|
||
/>
|
||
<view class="login">
|
||
<button
|
||
class="loginBtn"
|
||
@click="!isLogin ? loginHandler() : callHandler()"
|
||
:disabled="loading"
|
||
>
|
||
{{ loading ? '加载中...' : (!isLogin ? "登录" : "呼叫") }}
|
||
</button>
|
||
</view>
|
||
<view v-if="isLogin" class="status-info">
|
||
<text>当前登录: {{ currentUserId }}</text>
|
||
<text class="tip">提示：呼叫医生请输入医生ID（如：1）或完整ID（如：doctor_1）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
.page-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.call-kit-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 9999;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.loginBox {
|
||
margin-top: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.loginBox.hidden {
|
||
display: none;
|
||
}
|
||
|
||
/* 其他样式保持不变 */
|
||
</style>
|
||
```
|
||
|
||
### 方案 2：使用 TUIStore 监听状态
|
||
|
||
添加状态监听来确认组件是否正确响应：
|
||
|
||
```vue
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted } from "vue";
|
||
import { TUICallKitAPI, TUIStore, StoreName, NAME, CallStatus } from "../src/index";
|
||
import TUICallKit from "../src/Components/TUICallKit";
|
||
|
||
let patientId = ref("2");
|
||
let currentUserId = ref("");
|
||
let isLogin = ref(false);
|
||
let loading = ref(false);
|
||
let showingCall = ref(false); // 新增：标记是否正在通话
|
||
|
||
// 监听通话状态
|
||
onMounted(() => {
|
||
// 监听通话状态变化
|
||
TUIStore.watch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: (newStatus) => {
|
||
console.log('=== 通话状态变化 ===', newStatus);
|
||
|
||
if (newStatus !== CallStatus.IDLE) {
|
||
showingCall.value = true;
|
||
console.log('显示通话界面');
|
||
} else {
|
||
showingCall.value = false;
|
||
console.log('隐藏通话界面');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
// 取消监听
|
||
TUIStore.unwatch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: () => {}
|
||
});
|
||
});
|
||
|
||
// 其他代码保持不变...
|
||
</script>
|
||
```
|
||
|
||
### 方案 3：检查页面配置
|
||
|
||
确保 `pages.json` 中的配置正确：
|
||
|
||
```json
|
||
{
|
||
"pages": [
|
||
{
|
||
"path": "pages/call",
|
||
"style": {
|
||
"navigationBarTitleText": "视频通话",
|
||
"enablePullDownRefresh": false,
|
||
"disableScroll": true
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 方案 4：强制刷新组件
|
||
|
||
在收到来电时强制刷新组件：
|
||
|
||
```javascript
|
||
const loginHandler = async () => {
|
||
// ... 现有代码 ...
|
||
|
||
isLogin.value = true;
|
||
|
||
// 强制刷新组件
|
||
await nextTick();
|
||
|
||
console.log('=== TUICallKit 组件已挂载 ===');
|
||
|
||
// ... 其他代码 ...
|
||
};
|
||
```
|
||
|
||
## 🧪 调试步骤
|
||
|
||
### 步骤 1：检查组件是否挂载
|
||
|
||
在控制台执行：
|
||
```javascript
|
||
console.log('isLogin:', isLogin.value);
|
||
console.log('TUICallKit 组件应该已挂载');
|
||
```
|
||
|
||
### 步骤 2：检查通话状态
|
||
|
||
添加日志查看通话状态：
|
||
```javascript
|
||
import { TUIStore, StoreName, NAME } from "../src/index";
|
||
|
||
console.log('当前通话状态:', TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
|
||
console.log('是否群组通话:', TUIStore.getData(StoreName.CALL, NAME.IS_GROUP));
|
||
console.log('通话角色:', TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
|
||
```
|
||
|
||
### 步骤 3：检查组件可见性
|
||
|
||
在微信开发者工具中：
|
||
1. 点击"调试器"
|
||
2. 选择"Wxml"标签
|
||
3. 查找 `TUICallKit` 组件
|
||
4. 检查其样式和位置
|
||
|
||
### 步骤 4：查看完整日志
|
||
|
||
在控制台查看是否有其他错误信息：
|
||
```javascript
|
||
// 查找包含 "error" 或 "Error" 的日志
|
||
// 查找包含 "TUICallKit" 的日志
|
||
```
|
||
|
||
## 📱 真机测试
|
||
|
||
开发者工具可能与真机表现不同，建议：
|
||
|
||
1. **使用真机调试**
|
||
- 微信开发者工具 → 预览 → 真机调试
|
||
- 查看真机上的表现
|
||
|
||
2. **查看真机日志**
|
||
- 使用 vConsole 或微信开发者工具的远程调试
|
||
- 查看真机控制台日志
|
||
|
||
3. **测试权限**
|
||
- 确保真机上已授予摄像头和麦克风权限
|
||
- 设置 → 微信 → 权限管理
|
||
|
||
## 🎯 快速验证
|
||
|
||
### 验证 1：组件是否挂载
|
||
|
||
在 `call.vue` 中添加：
|
||
```vue
|
||
<view class="call-kit-wrapper" v-if="isLogin">
|
||
<view class="debug-info">TUICallKit 组件区域</view>
|
||
<TUICallKit></TUICallKit>
|
||
</view>
|
||
|
||
<style>
|
||
.debug-info {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: red;
|
||
color: white;
|
||
padding: 10px;
|
||
z-index: 10000;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
如果看到红色的"TUICallKit 组件区域"，说明组件已挂载。
|
||
|
||
### 验证 2：状态是否变化
|
||
|
||
添加状态显示：
|
||
```vue
|
||
<view v-if="isLogin" class="status-debug">
|
||
<text>通话状态: {{ callStatus }}</text>
|
||
</view>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { TUIStore, StoreName, NAME } from "../src/index";
|
||
|
||
const callStatus = computed(() => {
|
||
return TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
|
||
});
|
||
</script>
|
||
```
|
||
|
||
### 验证 3：手动触发显示
|
||
|
||
添加一个测试按钮：
|
||
```vue
|
||
<button @click="testCallUI">测试通话界面</button>
|
||
|
||
<script setup>
|
||
const testCallUI = () => {
|
||
console.log('=== 测试通话界面 ===');
|
||
console.log('isLogin:', isLogin.value);
|
||
console.log('通话状态:', TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
|
||
|
||
// 强制刷新
|
||
isLogin.value = false;
|
||
setTimeout(() => {
|
||
isLogin.value = true;
|
||
}, 100);
|
||
};
|
||
</script>
|
||
```
|
||
|
||
## 💡 常见问题
|
||
|
||
### Q1: 组件挂载了但看不到
|
||
|
||
**A:** 可能是样式问题，尝试：
|
||
```css
|
||
.call-kit-wrapper {
|
||
position: fixed !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
width: 100vw !important;
|
||
height: 100vh !important;
|
||
z-index: 9999 !important;
|
||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||
}
|
||
```
|
||
|
||
### Q2: 日志显示收到来电但界面无反应
|
||
|
||
**A:** 可能是组件内部状态问题，尝试：
|
||
1. 重新登录
|
||
2. 清除缓存
|
||
3. 重启微信开发者工具
|
||
|
||
### Q3: 真机和开发者工具表现不同
|
||
|
||
**A:** 这是正常的，以真机为准：
|
||
1. 使用真机调试功能
|
||
2. 查看真机日志
|
||
3. 在真机上测试完整流程
|
||
|
||
## 🔧 推荐的完整代码
|
||
|
||
基于以上分析，这是推荐的完整代码结构：
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page-container">
|
||
<!-- TUICallKit 组件 -->
|
||
<view class="call-kit-wrapper" v-if="isLogin">
|
||
<TUICallKit></TUICallKit>
|
||
</view>
|
||
|
||
<!-- 登录界面 -->
|
||
<view class="loginBox">
|
||
<!-- 登录表单 -->
|
||
</view>
|
||
|
||
<!-- 调试信息（可选） -->
|
||
<view v-if="isLogin" class="debug-panel">
|
||
<text>登录状态: {{ isLogin }}</text>
|
||
<text>用户ID: {{ currentUserId }}</text>
|
||
<text>通话状态: {{ callStatus }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
|
||
import { TUICallKitAPI, TUIStore, StoreName, NAME, CallStatus } from "../src/index";
|
||
import TUICallKit from "../src/Components/TUICallKit";
|
||
|
||
// 状态
|
||
let patientId = ref("2");
|
||
let currentUserId = ref("");
|
||
let isLogin = ref(false);
|
||
let loading = ref(false);
|
||
|
||
// 计算属性 - 通话状态
|
||
const callStatus = computed(() => {
|
||
return TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS) || 'IDLE';
|
||
});
|
||
|
||
// 监听通话状态
|
||
onMounted(() => {
|
||
console.log('=== 页面已挂载 ===');
|
||
|
||
TUIStore.watch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: (newStatus) => {
|
||
console.log('=== 通话状态变化 ===', newStatus);
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
TUIStore.unwatch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: () => {}
|
||
});
|
||
});
|
||
|
||
// 登录处理
|
||
const loginHandler = async () => {
|
||
// ... 现有登录代码 ...
|
||
|
||
isLogin.value = true;
|
||
await nextTick();
|
||
|
||
console.log('=== TUICallKit 组件已挂载 ===');
|
||
console.log('当前通话状态:', callStatus.value);
|
||
};
|
||
|
||
// 其他代码...
|
||
</script>
|
||
|
||
<style>
|
||
.page-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.call-kit-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.debug-panel {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
z-index: 10000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* 其他样式... */
|
||
</style>
|
||
```
|
||
|
||
## 📞 下一步
|
||
|
||
1. **添加调试信息**：使用上面的调试代码
|
||
2. **查看状态变化**：确认通话状态是否正确变化
|
||
3. **检查组件显示**：确认 TUICallKit 组件是否可见
|
||
4. **真机测试**：在真机上测试完整流程
|
||
|
||
如果问题仍然存在，请提供：
|
||
1. 添加调试信息后的完整日志
|
||
2. Wxml 面板中 TUICallKit 组件的截图
|
||
3. 真机测试的结果
|
||
|
||
---
|
||
|
||
**最后更新：** 2024-03-04
|
||
**版本：** 1.0
|