ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity
Files
master
zyt/wx/TUICallKit/CALL_RECEIVED_BUT_NO_UI.md
T
Your Name ab77f5488d 新增功能
2026-03-04 15:32:30 +08:00

10 KiB
Raw Permalink Blame History

收到来电但界面未显示 - 诊断指南

📊 日志分析

根据你提供的日志，我们可以确认：

✅ 成功的部分

  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 的模板部分：

<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 监听状态

添加状态监听来确认组件是否正确响应：

<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 中的配置正确：

{
  "pages": [
    {
      "path": "pages/call",
      "style": {
        "navigationBarTitleText": "视频通话",
        "enablePullDownRefresh": false,
        "disableScroll": true
      }
    }
  ]
}

方案 4：强制刷新组件

在收到来电时强制刷新组件：

const loginHandler = async () => {
  // ... 现有代码 ...
  
  isLogin.value = true;
  
  // 强制刷新组件
  await nextTick();
  
  console.log('=== TUICallKit 组件已挂载 ===');
  
  // ... 其他代码 ...
};

🧪 调试步骤

步骤 1：检查组件是否挂载

在控制台执行：

console.log('isLogin:', isLogin.value);
console.log('TUICallKit 组件应该已挂载');

步骤 2：检查通话状态

添加日志查看通话状态：

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：查看完整日志

在控制台查看是否有其他错误信息：

// 查找包含 "error" 或 "Error" 的日志
// 查找包含 "TUICallKit" 的日志

📱 真机测试

开发者工具可能与真机表现不同，建议：

  1. 使用真机调试

    • 微信开发者工具 → 预览 → 真机调试
    • 查看真机上的表现

  2. 查看真机日志

    • 使用 vConsole 或微信开发者工具的远程调试
    • 查看真机控制台日志

  3. 测试权限

    • 确保真机上已授予摄像头和麦克风权限
    • 设置 → 微信 → 权限管理

🎯 快速验证

验证 1：组件是否挂载

在 call.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：状态是否变化

添加状态显示：

<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：手动触发显示

添加一个测试按钮：

<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: 可能是样式问题，尝试：

.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. 在真机上测试完整流程

🔧 推荐的完整代码

基于以上分析，这是推荐的完整代码结构：

<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

Reference in New Issue View Git Blame Copy Permalink