【跟AI老师学Pywebview】#1 开始上手

作者：AllinToyou | 2024-03-07 16:08:02

踩

pywebview

安装库

pip install pywebview
1

第一个应用：Hello, Pywebview!

1. 编写Html文件

在你的项目文件夹中，创建一个名为index.html的文件，然后添加以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pywebview Example</title>
  </head>
  <body>
    <h1>Hello, Pywebview!</h1>
    <p>This is a simple desktop application using Pywebview.</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

这将是程序的主界面。

2. 创建一个Python文件

在项目文件夹中，创建一个名为main.py的Python文件，然后添加以下内容：

import webview

def main():
    webview.create_window('Pywebview Example', 'index.html', width=800, height=600)
    webview.start()

if __name__ == '__main__':
    main()

1
2
3
4
5
6
7
8
9

这个脚本中，我们首先导入webview模块。接下来，我们定义一个名为main的函数，该函数将创建一个Pywebview窗口。webview.create_window()函数接受三个参数：窗口标题、HTML文件路径（在这里是index.html）以及窗口的宽度和高度。
最后，我们调用webview.start()来启动Pywebview的主循环。

3. Run！

增加功能：前后端通信

接下来，我们将学习如何使用Pywebview实现Python后端与前端的通信。

1. 更新`index.html`文件

为了演示与后端通信，我们将在index.html中添加一个按钮和一个显示消息的元素。将以下内容添加到<body>标签内：

<button onclick="getMessageFromBackend()">Get Message</button>
<p id="message"></p>

<script>
    async function getMessageFromBackend() {
        const message = await window.pywebview.api.getMessage();
        document.getElementById('message').innerText = message;
    }
</script>
1
2
3
4
5
6
7
8
9

这里，我们创建了一个按钮，当点击时，将调用getMessageFromBackend()函数。这个函数通过window.pywebview.api.getMessage()调用Python后端的getMessage()函数并获取返回的消息。然后，将这个消息显示在一个<p>元素中。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/206438