pywebview构建桌面应用新选择

技术 PRO 稿源：字节航海家 2024-12-08 14:10

pywebview 是一个轻量级的 Python 库，它允许开发者在桌面应用中使用原生的 Web 视图组件来展示 HTML、CSS 和 JavaScript 构建的 Web 页面。如果你有现成的前后端分离项目要打包为桌面应用，这个是最方便的。

一、安装 pywebview

安装 pywebview 非常简单，你可以使用 pip 命令进行安装：

pip install pywebview

在安装过程中，pywebview 会自动检测你的操作系统，并下载相应的依赖项。例如，在 Windows 系统上，它可能会依赖于 Microsoft Edge WebView2 运行时；在 macOS 上则会使用系统自带的 WebKit 框架；而在 Linux 系统中，它可能会基于 gtk-webkit2 或其他合适的 Web 引擎。

基本使用示例

下面是一个简单的 pywebview 示例代码，用于创建一个包含基本 Web 页面的桌面窗口：

import webviewdef load_html(): # 这里可以返回一个 HTML 字符串或者加载本地 HTML 文件的路径 html = """ <html> <body> <h1>欢迎使用 pywebview 示例应用</h1> <p>这是一个在桌面应用中嵌入 Web 内容的简单演示。</p> </body> </html> """ return htmlif __name__ == '__main__': # 创建一个窗口，并指定窗口标题和加载的 HTML 内容 window = webview.create_window('pywebview 演示', html=load_html()) webview.start()

二、与 JavaScript 交互

pywebview 的强大之处不仅在于能够展示 Web 页面，还在于它提供了方便的机制来实现 Python 代码与 JavaScript 代码之间的双向交互。这使得你可以在桌面应用中充分发挥 Web 技术的动态性和交互性，同时利用 Python 的后端处理能力。

例如，以下代码演示了如何在 Python 中调用 JavaScript 函数，并在 JavaScript 中调用 Python 函数：

import webviewdef python_function(): print("这是从 JavaScript 调用的 Python 函数")def load_html(): html = """ <html> <body> <h1>pywebview 交互示例</h1> <button onclick="callPythonFunction()">调用 Python 函数</button> <script> function callPythonFunction() { // 使用 pywebview 的 JavaScript API 调用 Python 函数 pywebview.api.python_function(); } </script> </body> </html> """ return htmlif __name__ == '__main__': api = { 'python_function': python_function } window = webview.create_window('pywebview 交互演示', html=load_html(), js_api=api) webview.start()

三、pywebview 与 Vue3 构建桌面应用

1、在 Vue3 中暴露方法给 Python

在 Vue3 应用中，可以使用 window.external 对象来暴露方法给 Python 调用。例如，在 App.vue 的 mounted 生命周期钩子中定义一个方法并暴露：

mounted() { window.external = { vueMethod: (data) => { console.log('Received data from Python:', data); // 在这里可以进行相应的处理，如更新 Vue 组件的状态 } };}

2、在 Python 中调用 Vue3 方法

在 Python 脚本中，可以通过 window.evaluate_js 方法来调用 Vue3 中暴露的方法。例如：

import webviewdef load_vue_app(): # 这里指定 Vue3 应用构建后 index.html 的路径 return 'path/to/my-vue-app/dist/index.html'def call_vue_method(): window.evaluate_js('window.external.vueMethod("Hello from Python")')if __name__ == '__main__': window = webview.create_window('My Vue3 Desktop App', html=load_vue_app()) webview.start(call_vue_method)

这样，当桌面应用启动时，Python 会调用 Vue3 中的 vueMethod 并传递数据。

四、优缺点

1、优点

简单易用：Pywebview 提供了一个非常简单的接口，用于在桌面应用程序中嵌入 Web 内容。开发者只需要几行代码就可以创建一个包含 Web 视图的窗口。

集成方便：可以很方便地与 Python 后端代码集成。开发者可以通过 Python 代码与 Web 视图中的 JavaScript 进行交互，实现数据的双向传递。

轻量级：与一些大型的跨平台应用开发框架相比，Pywebview 本身是一个相对轻量级的库。它没有太多复杂的依赖关系，安装和部署都比较方便。

2、缺点

功能有限：相对于一些成熟的桌面应用开发框架，Pywebview 的功能可能会受到一定的限制。

安全风险描述：由于它是嵌入 Web 内容，所以会面临与 Web 应用相同的安全风险，如跨站脚本攻击（XSS）、恶意脚本注入等。虽然可以采取一些安全措施，如对 Web 内容进行安全审查和过滤，但这增加了开发的复杂性。

更新维护问题：如果依赖的 Web 渲染引擎（如操作系统自带的浏览器引擎）出现问题或者需要更新，可能会影响应用的稳定性和兼容性。

0XU.CN