Eel 开源项目使用教程

2024-08-15 04:38:08作者：尤辰城Agatha

Eel

使用 Eel 创建简单的 Electron 类似的离线 HTML/JS 图形界面应用变得轻而易举。这个小巧的 Python 库让你能从 Python 调用 JS，反之亦然，同时充分利用 Python 的功能和库。无需繁琐的代码，只需专注于你的 GUI。特别适合制作内部分发的小型工具，结合 Python 的计算库与 JS 的可视化库，让开发更高效。安装简单，快速上手，轻松实现 Python 和网页技术的无缝对接。立即加入 Eel 社区，探索更多可能！

1. 项目的目录结构及介绍

Eel 项目的目录结构相对简单，主要包含以下几个部分：

Eel/
├── examples/
│   ├── hello/
│   ├── multiple_pages/
│   ├── persistence/
│   ├── react_example/
│   ├── simple/
│   └── web_worker/
├── eel/
│   ├── __init__.py
│   ├── eel.js
│   └── eel.py
├── LICENSE
├── README.md
├── requirements.txt
└── setup.py

目录结构介绍

examples/：包含多个示例项目，展示了 Eel 的不同使用场景。
- hello/：简单的 "Hello World" 示例。
- multiple_pages/：多页面应用示例。
- persistence/：持久化数据示例。
- react_example/：使用 React 的示例。
- simple/：简单示例。
- web_worker/：使用 Web Worker 的示例。
eel/：Eel 的核心库文件。
- __init__.py：初始化文件。
- eel.js：Eel 的 JavaScript 库。
- eel.py：Eel 的 Python 库。
LICENSE：项目许可证文件。
README.md：项目说明文档。
requirements.txt：项目依赖文件。
setup.py：项目安装脚本。

2. 项目的启动文件介绍

Eel 项目的启动文件通常是一个 Python 脚本，用于启动 Eel 应用。以下是一个简单的启动文件示例：

import eel

# 设置 Web 目录和启动文件
eel.init('web')

# 启动应用
eel.start('index.html', size=(600, 400))

启动文件介绍

import eel：导入 Eel 库。
eel.init('web')：初始化 Eel，指定 Web 目录。
eel.start('index.html', size=(600, 400))：启动 Eel 应用，指定启动页面和窗口大小。

3. 项目的配置文件介绍

Eel 项目的配置文件通常是一个 Python 脚本，用于配置 Eel 应用的各种参数。以下是一个简单的配置文件示例：

import eel

# 设置 Web 目录和启动文件
eel.init('web')

# 配置选项
options = {
    'mode': 'chrome',  # 使用 Chrome 浏览器
    'host': 'localhost',
    'port': 8080,
    'chromeFlags': ["--start-fullscreen", "--browser-startup-dialog"]
}

# 启动应用
eel.start('index.html', options=options)

配置文件介绍

import eel：导入 Eel 库。
eel.init('web')：初始化 Eel，指定 Web 目录。
options：配置选项字典。
- 'mode'：指定浏览器模式，如 'chrome'。
- 'host'：指定主机地址。
- 'port'：指定端口号。
- 'chromeFlags'：指定 Chrome 浏览器的启动标志。
eel.start('index.html', options=options)：启动 Eel 应用，并传入配置选项。