在本文中，我们将使用一个特殊的库 eel，为 python 脚本创建出色的图形用户界面 （GUI）。创建图形用户界面，有很多库可以选择，如 tkinter、wxPython 等。eel 是一个允许我们利用 Web 技术，如 HTML、CSS、JS，来构建更漂亮、更现代的用户界面。

更令人兴奋的是，eel 允许我们从 javascript 运行 python 函数，反之亦然，因此，我们可以将 python 和 javascript 完美的结合在一起。

安装 eel

pip install eel

使用 eel

使用 eel 创建图形用户界面，你至少要准备两个文件，一个 Python 脚本文件，一个 Html 网页文件。

文件内容及结构如下所示：

|--app.py       <-- Python 主程序文件
|--web          <-- web 文件夹
   |--index.html    <-- web文件夹下的html文件

# app.py 文件
import eel
eel.init('web')    # 初始化web文件夹
eel.start('index.html')  # 启动页面

  
 
 
 
  
  
 APP正文
  

特别注意，Html 文件中要引入 eel.js，不用管实际的JS脚本文件具体放在哪个路径。

运行 app.py 文件前，请安装谷歌浏览器（Google Chrome），eel 可以和谷歌浏览器完美结合。

深入 eel

以上示例只实现了一个空白的窗口，我们尝试复杂一点的应用实现某种功能，添加按钮，定义函数，美化 Html。

文件结构：

|--app.py       <-- Python 主程序文件
|--web          <-- web 文件夹
   |--index.html    <-- web文件夹下的html文件
   |--css        <-- css 文件夹
      |--main.css    <-- css文件夹下的的样式文件
   |--js        <-- js 文件夹
      |--main.js    <-- js文件夹下的的脚本文件

# app.py 文件
import eel
import random
from datetime import datetime
eel.init('web')
# 定义函数
@eel.expose
def get_random_name():
    eel.prompt_alerts('Random name')

@eel.expose
def get_random_number():
    eel.prompt_alerts(random.randint(1, 100))

@eel.expose
def get_date():
    eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))

@eel.expose
def get_ip():
    eel.prompt_alerts('127.0.0.1')

eel.start('index.html', size= (800,450)) #定义窗口尺寸

    
    
    

    
     


    

        显示名字
        随机数
        日期时间
        显示 ip
      
 

/* css 文件 */
.topnav {
    background-color: #333;
    overflow: hidden;
  }

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

.topnav a:hover {
    background-color: #ddd;
    color: black;
  }

/* js 文件*/
document.getElementById("button-name").addEventListener("click", ()=>{eel.get_random_name()}, false);
document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);
document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);
document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);

eel.expose(prompt_alerts);
function prompt_alerts(description) {
  alert(description);
}

运行结果：

更多 eel 功能请参考相应官方网站。eel 实际上是在本机建立一个简易 web 服务器，调用谷歌浏览器并打开相应网页（
http://localhost:8000/index.html），我们可以利用 Python、Html、JavaScript、css 制作功能丰富、漂亮的图形用户界面。

?

文章创作不易，如果您喜欢这篇文章，请关注、点赞并分享给朋友。如有意见和建议，请在评论中反馈。

?