Files
zyt/MINIPROGRAM_SETUP_GUIDE.md
T
2026-03-04 15:32:30 +08:00

6.1 KiB
Raw Blame History

小程序端配置指南

问题原因

小程序端之前使用的是本地生成的测试签名GenerateTestUserSig),这导致:

  1. 小程序端和Web端使用了不同的 SDKAppID
  2. 小程序端的 UserSig 可能已过期
  3. 小程序端没有从后端获取统一的签名

解决方案

已修改 wx/TUICallKit/pages/call.vue,改为从后端获取签名。

配置步骤

步骤1: 修改后端API地址

wx/TUICallKit/pages/call.vue 中,找到这一行:

url: 'https://your-domain.com/api/getPatientSignature',  // 替换为你的后端地址

替换为你的实际后端地址,例如:

url: 'https://your-domain.com/api/getPatientSignature',
// 或者
url: 'http://localhost:8000/api/getPatientSignature',

步骤2: 创建后端接口

需要在后端创建一个供小程序调用的接口:

// server/app/api/controller/TcmController.php

/**
 * @notes 获取患者签名(供小程序调用)
 */
public function getPatientSignature()
{
    $patientId = $this->request->get('patient_id');
    
    if (!$patientId) {
        return $this->fail('患者ID不能为空');
    }
    
    // 调用逻辑层
    $result = \app\adminapi\logic\tcm\DiagnosisLogic::getPatientSignature($patientId);
    
    if ($result === false) {
        return $this->fail(\app\adminapi\logic\tcm\DiagnosisLogic::getError());
    }
    
    return $this->data($result);
}

步骤3: 添加后端逻辑

DiagnosisLogic.php 中添加方法:

/**
 * @notes 获取患者签名(供小程序调用)
 * @param int $patientId
 * @return array|bool
 */
public static function getPatientSignature(int $patientId)
{
    try {
        // 获取配置
        $config = self::getTrtcConfig();
        
        if (!$config) {
            self::setError('请先配置腾讯云TRTC参数');
            return false;
        }
        
        // 患者userId
        $patientUserId = 'patient_' . $patientId;
        
        // 生成患者的 UserSig
        $userSig = self::generateUserSig(
            $config['sdkAppId'], 
            $config['secretKey'], 
            $patientUserId
        );
        
        if (!$userSig) {
            self::setError('生成签名失败');
            return false;
        }
        
        // 确保患者账号已导入IM
        self::ensurePatientImAccount($patientId, $patientUserId);
        
        return [
            'sdkAppId' => (int)$config['sdkAppId'],
            'userId' => $patientUserId,
            'userSig' => $userSig,
            'expireTime' => 86400
        ];
    } catch (\Exception $e) {
        self::setError($e->getMessage());
        return false;
    }
}

步骤4: 配置路由

在路由文件中添加:

// server/route/api.php

Route::get('getPatientSignature', 'tcm/getPatientSignature');

步骤5: 测试小程序端

  1. 打开微信开发者工具
  2. 打开小程序项目
  3. 进入通话页面
  4. 输入患者ID: 2
  5. 点击"登录"
  6. 查看控制台日志,应该看到:
    获取签名成功: { sdkAppId: xxx, userId: 'patient_2', userSig: 'xxx' }
    TUICallKit 初始化成功, userId: patient_2
    

步骤6: 测试Web端呼叫小程序

  1. 确保小程序端已登录(患者ID: 2
  2. 在Web端医生后台,找到患者ID为2的诊单
  3. 点击"视频通话"按钮
  4. 小程序端应该收到来电通知

使用说明

小程序端登录

  1. 输入患者ID(数字,如:2
  2. 点击"登录"按钮
  3. 等待初始化完成
  4. 显示"当前登录: patient_2"

小程序端发起通话

  1. 登录后,输入要呼叫的用户ID(如:doctor_1
  2. 点击"呼叫"按钮
  3. 发起视频通话

Web端呼叫小程序

  1. 确保小程序端已登录
  2. 在Web端点击"视频通话"
  3. 小程序端会收到来电

关键点

1. userId 格式统一

  • 患者: patient_{id}
  • 医生: doctor_{id}

2. SDKAppID 必须一致

Web端和小程序端必须使用相同的 SDKAppID。

3. 从后端获取签名

不要使用本地生成的测试签名,必须从后端获取。

4. 保持在线状态

小程序在后台时可能会断开连接,需要在 onShow 时重新登录。

调试技巧

查看小程序端日志

在微信开发者工具的控制台中查看:

console.log('获取签名成功:', signatureData)
console.log('TUICallKit 初始化成功, userId:', userId)

查看Web端日志

在浏览器控制台中查看:

=== 发起一对一通话 ===
后端返回的 patientUserId: patient_2
最终使用的 targetUserId: patient_2
通话已发起,目标用户: patient_2

常见错误

错误1: 获取签名失败

  • 检查后端API地址是否正确
  • 检查网络连接
  • 检查后端接口是否正常

错误2: 初始化失败

  • 检查 SDKAppID 是否正确
  • 检查 UserSig 是否有效
  • 检查网络连接

错误3: 收不到来电

  • 检查小程序端是否已登录
  • 检查 userId 格式是否一致
  • 检查小程序是否在前台运行

完整流程

小程序端接收来电流程

  1. 小程序启动
  2. 输入患者ID(如:2
  3. 点击登录
  4. 从后端获取签名(userId: patient_2
  5. 初始化 TUICallKit
  6. 保持在线状态
  7. Web端发起通话(目标: patient_2
  8. 小程序端收到来电
  9. 接听或拒绝

Web端发起通话流程

  1. 医生登录后台
  2. 找到患者诊单(patient_id: 2
  3. 点击"视频通话"
  4. 从后端获取签名(patientUserId: patient_2
  5. 初始化 TUICallKit
  6. 发起通话(目标: patient_2
  7. 等待小程序端接听

注意事项

  1. 小程序端必须先登录才能接收来电
  2. userId 格式必须一致:都使用 patient_{id} 格式
  3. SDKAppID 必须相同Web端和小程序端使用同一个
  4. 从后端获取签名:不要使用本地测试签名
  5. 保持在线状态:小程序在后台时可能断开连接

下一步

  1. 修改小程序端的后端API地址
  2. 创建后端接口 getPatientSignature
  3. 测试小程序端登录
  4. 测试Web端呼叫小程序
  5. 测试小程序端呼叫Web端