init
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
// api.js - 跨端统一 API 调用层
|
||||
|
||||
const isWebView2 = () => {
|
||||
return window.isWebView2 === true;
|
||||
};
|
||||
|
||||
const getBaseUrl = () => {
|
||||
if (isWebView2()) {
|
||||
return "app://api/";
|
||||
}
|
||||
|
||||
return "https://your-production-api.com/api/";
|
||||
};
|
||||
|
||||
async function callApi(endpoint, options = {}) {
|
||||
const url = getBaseUrl() + endpoint;
|
||||
const fetchOptions = {
|
||||
method: options.method || "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(options.headers || {})
|
||||
},
|
||||
...(options.body && { body: JSON.stringify(options.body) })
|
||||
};
|
||||
|
||||
const token = localStorage.getItem("authToken");
|
||||
if (token) {
|
||||
fetchOptions.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
const data = await response.json();
|
||||
console.log(data)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error(`API call failed: ${endpoint}`, err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
window.api = {
|
||||
getUser: () => callApi("getUser?t=1"),
|
||||
processData: (input) => callApi("processData", { method: "POST", body: { input } }),
|
||||
wData: (input) => callApi("wData", { method: "POST", body: { input } }),
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user