luoqiang
7a5273dc56
新增项目基础结构与配置，集成 Vue3、Vite、TypeScript、ESLint 等开发环境。实现主页面、样式、图标组件，封装 http 请求，支持 WebView2 与普通浏览器统一 API 调用，便于与 C# 后端通信。完善类型声明与开发文档。
63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>跨端测试</title>
|
|
</head>
|
|
<body>
|
|
<h1>WebView2 自定义协议演示</h1>
|
|
<button id="getUserBtn">获取用户信息</button>
|
|
<button id="processBtn">处理数据</button>
|
|
<button id="wBtn">天气数据</button>
|
|
<pre id="output"></pre>
|
|
|
|
<script src="./api.js"></script>
|
|
<script>
|
|
const output = document.getElementById('output');
|
|
|
|
document.getElementById('getUserBtn').onclick = async () => {
|
|
try {
|
|
const result = await window.api.getUser();
|
|
output.textContent = JSON.stringify(result, null, 2);
|
|
} catch (err) {
|
|
output.textContent = `错误: ${err.message}`;
|
|
}
|
|
};
|
|
|
|
document.getElementById('processBtn').onclick = async () => {
|
|
try {
|
|
const result = await window.api.processData('hello world');
|
|
output.textContent = JSON.stringify(result, null, 2);
|
|
} catch (err) {
|
|
output.textContent = `错误: ${err.message}`;
|
|
}
|
|
};
|
|
|
|
document.getElementById('wBtn').onclick = async () => {
|
|
try {
|
|
const result = await window.api.wData('hello world');
|
|
output.textContent = JSON.stringify(result, null, 2);
|
|
} catch (err) {
|
|
output.textContent = `错误: ${err.message}`;
|
|
}
|
|
};
|
|
|
|
const detectIsWebView2 = () => window.isWebView2 === true || typeof window.invokeCSharpAction === 'function';
|
|
|
|
const renderEnvironment = () => {
|
|
const isWV2 = detectIsWebView2();
|
|
const existing = document.getElementById('envTip');
|
|
if (existing) {
|
|
existing.textContent = `当前环境: ${isWV2 ? 'WebView2 (自定义协议)' : '普通浏览器 (HTTP API)'}`;
|
|
return;
|
|
}
|
|
|
|
document.body.insertAdjacentHTML('beforeend', `<p id="envTip">当前环境: ${isWV2 ? 'WebView2 (自定义协议)' : '普通浏览器 (HTTP API)'}</p>`);
|
|
};
|
|
|
|
renderEnvironment();
|
|
setTimeout(renderEnvironment, 300);
|
|
</script>
|
|
</body>
|
|
</html>
|