112 lines
3.2 KiB
HTML
112 lines
3.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>PyWebView 双向通信</title>
|
||
<style>
|
||
body {
|
||
padding: 20px;
|
||
font-family: Arial;
|
||
}
|
||
|
||
.container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 16px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#log {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
height: 300px;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<h2>Python ↔ JS 双向通信</h2>
|
||
|
||
<!-- JS 调用 Python 函数（同步） -->
|
||
<div>
|
||
<input type="text" id="nameInput" placeholder="输入姓名" />
|
||
<button onclick="callPythonSync()">调用 Python 同步函数</button>
|
||
</div>
|
||
|
||
<!-- JS 调用 Python 异步函数 -->
|
||
<div>
|
||
<input
|
||
type="number"
|
||
id="durationInput"
|
||
placeholder="异步任务耗时（秒）"
|
||
value="2"
|
||
/>
|
||
<button onclick="callPythonAsync()">调用 Python 异步函数</button>
|
||
</div>
|
||
|
||
<!-- 关闭窗口 -->
|
||
<button onclick="callPythonCloseWindow()">关闭窗口</button>
|
||
|
||
<!-- 日志显示区域 -->
|
||
<div id="log"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// ---------------------- 1. JS 调用 Python 函数 ----------------------
|
||
// 同步调用
|
||
async function callPythonSync() {
|
||
const name = document.getElementById("nameInput").value || "匿名用户";
|
||
try {
|
||
// 核心：通过 window.pywebview.api 调用 Python 函数
|
||
const result = await window.pywebview.api.python_hello(name);
|
||
addLog(`[JS] 调用 Python 同步函数成功：${result}`);
|
||
} catch (e) {
|
||
addLog(`[JS] 调用 Python 同步函数失败：${e}`);
|
||
}
|
||
}
|
||
|
||
// 异步调用（Python 执行完后主动回调 JS）
|
||
async function callPythonAsync() {
|
||
const duration = document.getElementById("durationInput").value;
|
||
try {
|
||
const result = await window.pywebview.api.python_async_task(duration);
|
||
addLog(`[JS] 调用 Python 异步函数成功：${result}`);
|
||
} catch (e) {
|
||
addLog(`[JS] 调用 Python 异步函数失败：${e}`);
|
||
}
|
||
}
|
||
|
||
// 调用 Python 关闭窗口
|
||
async function callPythonCloseWindow() {
|
||
await window.pywebview.api.python_close_window();
|
||
}
|
||
|
||
// ---------------------- 2. 供 Python 调用的 JS 函数 ----------------------
|
||
function js_receive_python_msg(msg) {
|
||
addLog(`[JS] 收到 Python 消息：${msg}`);
|
||
}
|
||
|
||
// ---------------------- 辅助函数：添加日志 ----------------------
|
||
function addLog(text) {
|
||
const logDiv = document.getElementById("log");
|
||
const time = new Date().toLocaleTimeString();
|
||
logDiv.innerHTML += `[${time}] ${text}<br>`;
|
||
// 自动滚动到底部
|
||
logDiv.scrollTop = logDiv.scrollHeight;
|
||
}
|
||
|
||
// 页面加载完成后提示
|
||
window.onload = () => {
|
||
addLog("页面加载完成，可开始双向通信测试");
|
||
};
|
||
</script>
|
||
</body>
|
||
</html>
|