0x0001：从“Hello World”到桌面应用，HTML 的奇妙旅程
你有没有想过，用 HTML、CSS 和 JavaScript 这些平时只在浏览器里折腾的玩意儿，居然能写出一个像模像样的桌面应用程序？听起来是不是有点天方夜谭？但今天，我要告诉你——这事儿不仅能实现，而且还能让你轻松上手！这就是我们今天的主角——Webview Python。
简单来说，Webview 是一个允许你通过 Web 技术（HTML、CSS、JavaScript）构建跨平台桌面应用的库。而当它与 Python 结合时，事情就变得有趣了：你可以用 Python 来管理逻辑和数据处理，同时利用 Web 技术来设计用户界面。这种组合不仅强大，还非常灵活。无论你是想快速搭建一个工具类小应用，还是开发一个复杂的桌面客户端，Webview 都能助你一臂之力。
那么问题来了，为什么我们要选择这种方式呢？答案很简单：效率和跨平台性。传统的桌面开发需要掌握不同平台的原生语言（比如 Windows 的 C# 或 macOS 的 Swift），而 Web 技术则完全打破了这种限制。只要你懂 HTML 和一点点 Python，就能迅速开发出一个运行在 Windows、macOS 和 Linux 上的应用程序。
为了让你更有动力接着往下看，我先给你举个例子：假设你需要写一个简单的文件查看器，传统方法可能要写一堆代码去适配不同系统的窗口组件，而使用 Webview，你只需要几行代码就能搞定界面甚至功能。接下来的内容，我会手把手教你如何用 Webview Python 快速上手桌面开发，还会分享一些实际场景中的应用案例。准备好你的键盘和脑洞，咱们一起进入这个神奇的世界吧！
0x0002：安装配置一步到位，环境变量玩转高级定制
既然已经吊足了你的胃口，那咱们就从第一步开始吧——安装 Webview Python。别担心，这并不复杂，只要你会用 pip，一切都会顺其自然。
安装基础包
首先，打开你的终端或命令行，输入以下命令：
pip install webview_python
没错，就是这么简单！等待几秒钟后，Webview 就会乖乖地躺在你的 Python 环境中了。如果你不确定是否安装成功，可以尝试运行下面这段代码来验证：
from webview.webview import Webview
webview = Webview()
webview.navigate("https://www.python.org")
webview.run()
如果顺利弹出了一个显示 Python 官网的小窗口，恭喜你，安装完成！
环境变量的秘密武器
不过，真正的高手从来不会止步于“基础款”。为了让 Webview 更加贴合你的需求，项目团队贴心地提供了几个环境变量，帮助你进行高级定制。以下是两个核心变量及其用途：
1.WEBVIEW_VERSION
功能：指定使用的 Webview 库版本。
默认值："0.9.0"
使用场景：如果你对某个特定版本情有独钟，或者需要兼容旧版项目，可以通过设置这个变量来锁定版本。例如：
export WEBVIEW_VERSION="0.8.5"
WEBVIEW_DOWNLOAD_BASE
2.HTTP/HTTPS URL
网络共享路径
本地文件路径
功能：自定义 Webview 库的下载路径。
默认值：GitHub Releases
使用场景：在企业内网环境下，直接访问 GitHub 可能不太现实。这时，你可以将 Webview 库提前下载并部署到内部服务器，然后通过该变量指向新的地址。支持的形式包括：
举个栗子，假如你有一个内部 HTTP 服务器存放 Webview 文件，可以这样设置：
// 堆代码 duidaima.com
export WEBVIEW_DOWNLOAD_BASE="http://internal-server.com/webview-libs"
需要注意的是，当你使用自定义路径时，必须确保目录结构与 GitHub Releases 保持一致。具体而言，应该按照如下方式组织文件：
WEBVIEW_DOWNLOAD_BASE/
├── 0.9.0/
│ ├── webview.dll # Windows x64
│ ├── WebView2Loader.dll # Windows x64
│ ├── libwebview.x86_64.so # Linux x64
│ ├── libwebview.aarch64.so # Linux ARM64
│ ├── libwebview.x86_64.dylib # macOS x64
│ └── libwebview.aarch64.dylib # macOS ARM64
└── other-versions/...
掌握了这些技巧，你就拥有了极大的灵活性。无论是离线环境还是特殊需求，都能轻松应对。
0x0003：代码实战篇——从静态页面到动态交互
光说不练假把式，现在轮到实操环节了！让我们从最基础的 HTML 页面加载开始，逐步深入到复杂的 Python-JavaScript 交互。
静态内容展示
首先是最简单的例子——直接嵌入一段 HTML 字符串作为应用的初始界面。以下代码展示了如何创建一个包含标题的网页：
from webview.webview import Webview
from urllib.parse import quote
html = """
<html>
<body>
<h1>Hello from Python Webview!</h1>
</body>
</html>
"""
webview = Webview()
webview.navigate(f"data:text/html,{quote(html)}")
webview.run()
执行这段代码后，你会看到一个带有“Hello from Python Webview!”标题的小窗口弹出。虽然看起来很朴素，但这可是迈向伟大事业的第一步！
加载本地文件
当然，真正实用的应用通常不会仅限于硬编码的 HTML。如果需要加载外部文件，比如一个精心设计的 HTML 模板，可以这样做：
import os
from webview.webview import Webview
webview = Webview()
current_dir = os.path.dirname(os.path.abspath(__file__))
html_path = os.path.join(current_dir, 'local.html')
webview.navigate(f"file://{html_path}")
webview.run()
这里的关键是通过 os 模块获取当前脚本所在目录，并拼接出目标 HTML 文件的完整路径。
调用远程资源
除了本地文件，你还可以加载远程 URL。例如，直接打开 Python 官网：
from webview.webview import Webview
webview = Webview()
webview.navigate("https://www.duidaima.com")
webview.run()
这种方式特别适合那些需要实时更新内容的应用场景，比如新闻聚合器或在线文档阅读器。
Python 与 JavaScript 的双向通信
最后，也是最酷的部分——Python 和 JavaScript 的无缝协作。借助 Webview 提供的绑定机制，你可以让两者自由交流。以下是一个完整的示例：
from webview.webview import Webview, Size, SizeHint
from urllib.parse import quote
def hello():
return "Hello from Python!"
def add(a, b):
return a + b
webview = Webview(debug=True)
webview.bind("hello", hello)
webview.bind("add", add)
html = """
<html>
<head>
<script>
async function callPython() {
const result = await hello();
document.getElementById('result').innerHTML = result;
}
async function callPythonWithArgs() {
const result = await add(40, 2);
document.getElementById('result').innerHTML = `Result: ${result}`;
}
</script>
</head>
<body>
<button onclick="callPython()">Call Python</button>
<button onclick="callPythonWithArgs()">Call Python with Args</button>
<div id="result"></div>
</body>
</html>
"""
webview.title = "Python-JavaScript Binding Demo"
webview.size = Size(640, 480, SizeHint.FIXED)
webview.navigate(f"data:text/html,{quote(html)}")
webview.run()
上述代码实现了两个按钮，分别调用了 Python 中的 hello 和 add 函数，并将结果展示在页面上。这种能力极大扩展了 Webview 的应用场景，从表单验证到数据分析，几乎无所不能。
0x0004：性能优化与异步操作的艺术
到了这个阶段，你可能已经跃跃欲试想要大展身手了。但在追求极致体验的路上，有两个重要话题不得不提：性能优化和异步操作。
异步函数的魅力
在实际开发中，很多任务（如网络请求、数据库查询等）都不可避免地存在延迟。如果直接阻塞主线程，用户体验会大打折扣。幸运的是，Webview 支持绑定异步 Python 函数，使得这些耗时操作可以在后台默默完成，同时前端依然流畅如初。
以下是一个模拟长时间运算的例子：
import asyncio
from webview.webview import Webview
async def delayed_message(message, delay=1):
await asyncio.sleep(delay)
return f"Async response after {delay}s: {message}"
webview = Webview(debug=True)
webview.bind("delayedMessage", delayed_message)
html = """
<html>
<body>
<button onclick="callAsyncPython()">Call Async Python</button>
<div id="result">Waiting for async response...</div>
<script>
async function callAsyncPython() {
try {
const result = await delayedMessage("Hello from async world!", 2);
document.getElementById('result').innerHTML = result;
} catch (err) {
document.getElementById('result').innerHTML = `Error: ${err}`;
}
}
</script>
</body>
</html>
"""
webview.navigate(f"data:text/html,{quote(html)}")
webview.run()
点击按钮后，消息会在两秒后出现，而期间界面完全不受影响。这种非阻塞的设计极大地提升了应用的响应速度。
进度报告增强用户体验
对于某些持续较久的任务，仅仅返回最终结果显然不够友好。为此，Webview 允许你在执行过程中向 JavaScript 发送进度更新，从而为用户提供更直观的反馈。例如：
async def process_with_progress(steps=5, step_time=1):
results = []
for i in range(1, steps + 1):
await asyncio.sleep(step_time)
progress = (i / steps) * 100
webview.eval(f"updateProgress({progress}, 'Processing: Step {i}/{steps}')")
results.append(f"Step {i} completed")
return {"status": "complete", "steps": steps, "results": results}
webview.bind("processWithProgress", process_with_progress)
配合相应的 HTML 和 CSS，你就能制作出漂亮的进度条效果。
0x0005：总结与展望——未来已来，只欠行动
通过这篇文章，我们从零开始了解了 Webview Python 的基本概念、安装配置、代码实战以及进阶技巧。相信你已经发现，用 HTML 和 Python 开发桌面应用并非遥不可及的梦想，而是触手可及的现实。目前，Webview 已经具备了许多令人兴奋的功能，如异步支持、双向通信、跨平台兼容等。然而，技术的发展永无止境。根据官方 Roadmap，未来还将添加更多炫酷特性，比如基于 Three.js 的 3D 渲染示例，甚至 MRI 成像原理演示。这意味着，无论你是初学者还是资深开发者，都有机会在这个领域找到属于自己的舞台。
所以，不要再犹豫了！拿起键盘，动手试试吧。也许下一款风靡全球的桌面应用，就出自你的手中！
闽公网安备 35020302035485号
