108 lines
3.3 KiB
HTML
108 lines
3.3 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> |