272 lines
9.6 KiB
HTML
272 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>APP Bridge Test</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.test-container {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
.test-section {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 5px;
|
||
}
|
||
.test-section h3 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
button {
|
||
background: #007AFF;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin: 5px;
|
||
}
|
||
button:hover {
|
||
background: #005bb5;
|
||
}
|
||
.result {
|
||
background: #f0f0f0;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
margin-top: 10px;
|
||
white-space: pre-wrap;
|
||
font-family: monospace;
|
||
}
|
||
.status {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
margin: 5px;
|
||
font-weight: bold;
|
||
}
|
||
.status.success { background: #d4edda; color: #155724; }
|
||
.status.error { background: #f8d7da; color: #721c24; }
|
||
.status.warning { background: #fff3cd; color: #856404; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="test-container">
|
||
<h1>APP Bridge 通信测试</h1>
|
||
|
||
<div class="test-section">
|
||
<h3>环境检测</h3>
|
||
<div>
|
||
<span class="status" id="env-status">检测中...</span>
|
||
<span id="env-details"></span>
|
||
</div>
|
||
<div class="result" id="env-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>APP对象检测</h3>
|
||
<button onclick="checkAppObject()">检测APP对象</button>
|
||
<div class="result" id="app-object-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>模拟APP调用</h3>
|
||
<button onclick="simulateAppCall()">模拟Android APP</button>
|
||
<button onclick="simulateIOSCall()">模拟iOS APP</button>
|
||
<button onclick="simulateWebCall()">模拟Web环境</button>
|
||
<div class="result" id="simulate-result"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h3>连接APP测试</h3>
|
||
<button onclick="testAppConnection()">测试连接</button>
|
||
<div class="result" id="connection-result"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 检测环境
|
||
function detectEnvironment() {
|
||
const userAgent = navigator.userAgent;
|
||
const isIOS = /iPad|iPhone|iPod/.test(userAgent);
|
||
const isAndroid = /Android/.test(userAgent);
|
||
const hasAppObject = !!(window.app);
|
||
const hasWebkitObject = !!(window.webkit && window.webkit.messageHandlers);
|
||
|
||
const envStatus = document.getElementById('env-status');
|
||
const envDetails = document.getElementById('env-details');
|
||
const envResult = document.getElementById('env-result');
|
||
|
||
let status = 'warning';
|
||
let details = '未知环境';
|
||
|
||
if (isIOS) {
|
||
details = 'iOS 环境';
|
||
status = hasWebkitObject ? 'success' : 'error';
|
||
} else if (isAndroid) {
|
||
details = 'Android 环境';
|
||
status = hasAppObject ? 'success' : 'error';
|
||
} else {
|
||
details = 'Web/桌面环境';
|
||
status = 'warning';
|
||
}
|
||
|
||
envStatus.className = `status ${status}`;
|
||
envStatus.textContent = status === 'success' ? '✓ 支持' : status === 'error' ? '✗ 不支持' : '⚠ 警告';
|
||
envDetails.textContent = details;
|
||
|
||
envResult.textContent = JSON.stringify({
|
||
userAgent: userAgent,
|
||
isIOS: isIOS,
|
||
isAndroid: isAndroid,
|
||
hasAppObject: hasAppObject,
|
||
hasWebkitObject: hasWebkitObject
|
||
}, null, 2);
|
||
}
|
||
|
||
// 检测APP对象
|
||
function checkAppObject() {
|
||
const result = document.getElementById('app-object-result');
|
||
const appInfo = {};
|
||
|
||
if (window.app) {
|
||
appInfo.app = {
|
||
exists: true,
|
||
methods: Object.getOwnPropertyNames(window.app)
|
||
};
|
||
|
||
if (typeof window.app.getAccessOrigin === 'function') {
|
||
try {
|
||
appInfo.app.getAccessOriginResult = 'Function available';
|
||
} catch (e) {
|
||
appInfo.app.getAccessOriginResult = 'Error: ' + e.message;
|
||
}
|
||
}
|
||
} else {
|
||
appInfo.app = { exists: false };
|
||
}
|
||
|
||
if (window.webkit && window.webkit.messageHandlers) {
|
||
appInfo.webkit = {
|
||
exists: true,
|
||
messageHandlers: Object.keys(window.webkit.messageHandlers)
|
||
};
|
||
} else {
|
||
appInfo.webkit = { exists: false };
|
||
}
|
||
|
||
result.textContent = JSON.stringify(appInfo, null, 2);
|
||
}
|
||
|
||
// 模拟APP调用
|
||
function simulateAppCall() {
|
||
const mockData = JSON.stringify({
|
||
'Authorization': 'Bearer MOCK_TOKEN_12345',
|
||
'Req-Lang': 'en-US',
|
||
'Req-App-Intel': 'version=2.1.0;build=100;channel=official;Req-Imei=mock_imei_12345',
|
||
'Req-Sys-Origin': 'origin=android;child=phone'
|
||
});
|
||
|
||
// 创建模拟APP对象
|
||
window.app = {
|
||
getAccessOrigin: function() {
|
||
return mockData;
|
||
}
|
||
};
|
||
|
||
document.getElementById('simulate-result').textContent =
|
||
'Android APP对象已模拟创建\n' +
|
||
'Mock数据: ' + mockData;
|
||
}
|
||
|
||
function simulateIOSCall() {
|
||
const mockData = JSON.stringify({
|
||
'Authorization': 'Bearer MOCK_IOS_TOKEN_67890',
|
||
'Req-Lang': 'zh-CN',
|
||
'Req-App-Intel': 'version=2.1.0;build=100;channel=appstore;Req-Imei=mock_ios_imei',
|
||
'Req-Sys-Origin': 'origin=ios;child=iphone'
|
||
});
|
||
|
||
// 创建模拟WebKit对象
|
||
window.webkit = {
|
||
messageHandlers: {
|
||
getAccessOrigin: {
|
||
postMessage: function(message) {
|
||
// 模拟异步回调
|
||
setTimeout(() => {
|
||
if (window.renderData) {
|
||
window.renderData(mockData);
|
||
}
|
||
}, 100);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
document.getElementById('simulate-result').textContent =
|
||
'iOS WebKit对象已模拟创建\n' +
|
||
'Mock数据: ' + mockData;
|
||
}
|
||
|
||
function simulateWebCall() {
|
||
// 清除模拟对象
|
||
delete window.app;
|
||
delete window.webkit;
|
||
|
||
document.getElementById('simulate-result').textContent =
|
||
'Web环境已模拟（无APP对象）';
|
||
}
|
||
|
||
// 测试APP连接
|
||
function testAppConnection() {
|
||
const result = document.getElementById('connection-result');
|
||
result.textContent = '正在测试连接...\n';
|
||
|
||
// 导入并测试APP桥接模块
|
||
import('/src/utils/appBridge.js').then(bridge => {
|
||
result.textContent += '✓ APP桥接模块加载成功\n';
|
||
|
||
const isInApp = bridge.isInApp();
|
||
result.textContent += `APP环境检测: ${isInApp}\n`;
|
||
|
||
// 测试连接
|
||
bridge.connectApplication((access) => {
|
||
result.textContent += '✓ 收到APP回调\n';
|
||
result.textContent += `原始数据: ${access}\n`;
|
||
|
||
const parseResult = bridge.parseAccessOrigin(access);
|
||
if (parseResult.success) {
|
||
result.textContent += '✓ 数据解析成功\n';
|
||
|
||
const headerInfo = bridge.parseHeader(parseResult.data);
|
||
result.textContent += '✓ 头部信息解析成功\n';
|
||
result.textContent += `解析结果: ${JSON.stringify(headerInfo, null, 2)}\n`;
|
||
|
||
bridge.setHttpHeaders(headerInfo);
|
||
result.textContent += '✓ HTTP头部设置完成\n';
|
||
} else {
|
||
result.textContent += `✗ 数据解析失败: ${parseResult.error}\n`;
|
||
}
|
||
});
|
||
|
||
}).catch(error => {
|
||
result.textContent += `✗ 模块加载失败: ${error.message}\n`;
|
||
console.error('Error loading app bridge:', error);
|
||
});
|
||
}
|
||
|
||
// 页面加载时自动检测环境
|
||
document.addEventListener('DOMContentLoaded', detectEnvironment);
|
||
</script>
|
||
</body>
|
||
</html>
|