在Python使用 Eel 创建 HTML 用户界面(1)

📌 相关文章

📜 在Python使用 Eel 创建 HTML 用户界面(1)

📅 最后修改于: 2023-12-03 14:51:21.744000 🧑 作者: Mango

在Python使用 Eel 创建 HTML 用户界面

简介

Eel 是一个用于在Python中创建基于Web的用户界面的库。它借助 Chromium 浏览器（内置Electron）提供了强大的功能，使开发者可以使用HTML、CSS和JavaScript构建直观且具有响应性的用户界面。

本篇介绍将帮助程序员了解如何使用Eel库来创建HTML用户界面，并将涵盖以下内容：

安装Eel
创建基本的HTML用户界面
使用Python与HTML交互
在界面中调用Python函数
打包应用程序

安装Eel

要使用Eel，首先需要安装它。可以使用以下命令在Python环境中安装 Eel：

pip install Eel

创建基本的HTML用户界面

在使用Eel创建用户界面之前，需要创建一个HTML文件作为界面的基础。以下是一个简单的例子：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Eel Example</title>
    <script src="/eel.js"></script>
</head>
<body>
    <button onclick="sendMessage()">发送消息到Python</button>
    <script>
        function sendMessage() {
            eel.receiveMessage("Hello from HTML!");
        }
    </script>
</body>
</html>

需要注意的是，需要在HTML中引入eel.js文件，这个文件可以从Eel官方Github仓库中获得。

使用Python与HTML交互

一旦界面的基础文件创建完毕，就可以在Python代码中使用Eel与HTML交互了。以下是一个示例代码：

import eel

@eel.expose
def receiveMessage(message):
    print(f"来自HTML的信息：{message}")

eel.init('web')  # 指定界面文件所在的目录

# 打开界面
eel.start('index.html', size=(600, 400))

在上述示例代码中，使用@eel.expose装饰器将Python函数receiveMessage暴露给HTML界面调用。当HTML中的JavaScript代码调用eel.receiveMessage()时，会触发Python中的receiveMessage函数，并将传递的消息作为参数。

在界面中调用Python函数

除了JavaScript调用Python函数外，还可以在HTML界面中直接调用Python函数。以下是一个示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Eel Example</title>
    <script src="/eel.js"></script>
</head>
<body>
    <button onclick="pythonFunction()">在Python中调用函数</button>
    <script>
        function pythonFunction() {
            eel.pyFunction();
        }
    </script>
</body>
</html>

import eel

@eel.expose
def pyFunction():
    print("在Python中调用了函数")

eel.init('web')  # 指定界面文件所在的目录

# 打开界面
eel.start('index.html', size=(600, 400))

在上述示例代码中，HTML界面中的JavaScript函数pythonFunction调用了Python中的pyFunction函数。

打包应用程序

使用Eel创建的应用程序可以打包为独立的可执行文件，方便在没有Python环境的计算机中运行。可以使用pyinstaller等工具进行打包。以下是一个示例命令行：

pyinstaller --clean --onefile --noconsole script.py

以上命令将script.py文件打包为单个可执行文件。

结论

使用Eel可以轻松创建具有交互功能的用户界面，并且无需学习其他复杂的GUI库。通过与Python的无缝集成，您可以充分利用Python的强大功能，并在用户界面中与其交互。赶快尝试一下吧！

希望以上介绍对您有帮助，详细的Eel文档可以参考Eel官方文档。