|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="zh-CN"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Web App 诊断 - 增强版</title> |
| 7 | + <script src="https://telegram.org/js/telegram-web-app.js"></script> |
| 8 | + <style> |
| 9 | + * { margin: 0; padding: 0; box-sizing: border-box; } |
| 10 | + body { background: #0a0a0f; color: #0f0; font-family: monospace; padding: 10px; font-size: 11px; } |
| 11 | + h2 { color: #00ff88; margin: 15px 0 8px; font-size: 14px; } |
| 12 | + pre { background: #1a1a2e; padding: 8px; border-radius: 6px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-wrap: break-word; } |
| 13 | + .btn { background: #00ff88; color: #000; border: none; padding: 10px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; margin: 8px 0; width: 100%; } |
| 14 | + .btn:disabled { opacity: 0.5; } |
| 15 | + .success { color: #00ff88; border: 1px solid #00ff88; } |
| 16 | + .error { color: #ff4444; border: 1px solid #ff4444; } |
| 17 | + .log { max-height: 200px; overflow-y: auto; } |
| 18 | + </style> |
| 19 | +</head> |
| 20 | +<body> |
| 21 | + <h1>🔍 增强诊断版</h1> |
| 22 | + |
| 23 | + <h2>1️⃣ 环境检测</h2> |
| 24 | + <pre id="env"></pre> |
| 25 | + |
| 26 | + <h2>2️⃣ 测试 sendData</h2> |
| 27 | + <button class="btn" id="testBtn" onclick="testSendData()">🧪 发送测试数据</button> |
| 28 | + <pre id="testResult"></pre> |
| 29 | + |
| 30 | + <h2>3️⃣ 操作日志</h2> |
| 31 | + <pre class="log" id="log"></pre> |
| 32 | + |
| 33 | + <script> |
| 34 | + const tg = window.Telegram.WebApp; |
| 35 | + const logEl = document.getElementById('log'); |
| 36 | + let logs = []; |
| 37 | + |
| 38 | + function log(msg, type = 'info') { |
| 39 | + const time = new Date().toLocaleTimeString(); |
| 40 | + const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️'; |
| 41 | + logs.unshift(`[${time}] ${prefix} ${msg}`); |
| 42 | + logEl.textContent = logs.join('\n'); |
| 43 | + console.log('[WebApp]', msg); |
| 44 | + } |
| 45 | + |
| 46 | + // 初始化 |
| 47 | + log('页面加载开始'); |
| 48 | + tg.ready(); |
| 49 | + log('tg.ready() 调用完成'); |
| 50 | + tg.expand(); |
| 51 | + log('tg.expand() 调用完成'); |
| 52 | + |
| 53 | + // 环境信息 |
| 54 | + const env = { |
| 55 | + isInTelegram: !!tg.initDataUnsafe?.user, |
| 56 | + userId: tg.initDataUnsafe?.user?.id, |
| 57 | + username: tg.initDataUnsafe?.user?.username, |
| 58 | + sdkVersion: tg.version, |
| 59 | + hasSendData: typeof tg.sendData === 'function', |
| 60 | + platform: tg.platform, |
| 61 | + colorScheme: tg.colorScheme |
| 62 | + }; |
| 63 | + document.getElementById('env').textContent = JSON.stringify(env, null, 2); |
| 64 | + log(`环境检测完成:isInTelegram=${env.isInTelegram}`); |
| 65 | + |
| 66 | + // 测试 sendData |
| 67 | + async function testSendData() { |
| 68 | + const btn = document.getElementById('testBtn'); |
| 69 | + const resultEl = document.getElementById('testResult'); |
| 70 | + |
| 71 | + btn.disabled = true; |
| 72 | + btn.textContent = '发送中...'; |
| 73 | + log('开始发送测试数据...'); |
| 74 | + |
| 75 | + const testData = { |
| 76 | + type: 'diagnostic_test', |
| 77 | + timestamp: Date.now(), |
| 78 | + env: env |
| 79 | + }; |
| 80 | + |
| 81 | + try { |
| 82 | + // 检查是否在 Telegram 内 |
| 83 | + if (!env.isInTelegram) { |
| 84 | + throw new Error('不在 Telegram 环境中 - 无法使用 sendData'); |
| 85 | + } |
| 86 | + |
| 87 | + // 检查 sendData 是否存在 |
| 88 | + if (!tg.sendData) { |
| 89 | + throw new Error('tg.sendData 方法不存在'); |
| 90 | + } |
| 91 | + |
| 92 | + // 调用 sendData |
| 93 | + log('调用 tg.sendData()...'); |
| 94 | + const jsonData = JSON.stringify(testData); |
| 95 | + log(`数据大小:${jsonData.length} 字节`); |
| 96 | + |
| 97 | + tg.sendData(jsonData); |
| 98 | + log('sendData 调用成功 - 无异常抛出'); |
| 99 | + |
| 100 | + resultEl.className = 'success'; |
| 101 | + resultEl.textContent = '✅ sendData 调用成功!\n\n数据已发送到 Bot。\n如果 Bot 没收到,可能是:\n1. Bot 权限问题\n2. Telegram 服务器延迟\n3. Web App 链接问题'; |
| 102 | + |
| 103 | + // 2 秒后关闭 |
| 104 | + setTimeout(() => { |
| 105 | + log('关闭 Web App...'); |
| 106 | + tg.close(); |
| 107 | + }, 2000); |
| 108 | + |
| 109 | + } catch (e) { |
| 110 | + log(`发送失败:${e.message}`, 'error'); |
| 111 | + resultEl.className = 'error'; |
| 112 | + resultEl.textContent = `❌ 发送失败\n\n错误:${e.message}\n堆栈:${e.stack}\n\n建议:\n1. 确认在 Telegram 内打开\n2. 更新 Telegram 到最新版\n3. 重启 Telegram App`; |
| 113 | + btn.disabled = false; |
| 114 | + btn.textContent = '🧪 重试'; |
| 115 | + } |
| 116 | + } |
| 117 | + |
| 118 | + // 设置 MainButton |
| 119 | + if (env.isInTelegram) { |
| 120 | + tg.MainButton.setText('发送测试数据'); |
| 121 | + tg.MainButton.setParams({ color: '#00ff88', text_color: '#000000' }); |
| 122 | + tg.MainButton.show(); |
| 123 | + tg.MainButton.onClick(() => testSendData()); |
| 124 | + log('MainButton 已配置'); |
| 125 | + } |
| 126 | + |
| 127 | + log('页面初始化完成'); |
| 128 | + </script> |
| 129 | +</body> |
| 130 | +</html> |
0 commit comments