好东西Eel 模块【需要安装chrome】

发表评论

python下的eel。可以结合HTML JS CSS创建UI

1.可以从外界引入css 和JS （CDN），目前bootstrap 和Jquery完全没问题

2.在头部引入 <script type="text/javascript" src="/eel.js"></script> 即可，在JS里面可以调用Python的函数方法，即

eel.say_hello(name)(function(result) {
                document.getElementById("greeting").innerHTML = result;
            });

使用ell.函数名称(传递参数)(function(result) {

document.getElementById(“greeting”).innerHTML = result;

});

(对于python函数返回的结果result处理)

也就是说，该应用的所有网络请求可以在python里面完成,不需要使用AJAX，JS只需要页面交互，其实这样搞个FFMPEG的UI倒是非常简单 233333333333。

其中python 中定义函数需要使用装饰器来暴露这个函数

@eel.expose
def say_hello(name):
    return f"Hello, {name}!"

3.最关键是可以打包成EXE格式

打包当前目录所有文件，且以main.py为运行文件，且不显示命令行

pyinstaller --onefile -w --add-data=".:." main.py

坑点

需要运行端安装Chrome浏览器才能使用，如果使用chrome便携版 则可能无法使用。

解决方法 Chromium Embedded Framework (CEF) 

pip install cefpython3

他仅支持3.9 pass

代码示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eel应用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- eel.js必须引入，这点其实很像wasm模式 -->
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body class="container">
   <h1>欢迎</h1>
   <div class="row">
        <div class="col-md-6"><button class="btn btn-info" id="abc">ABC</button></div>
        <div class="col-md-6">
            <input type="text" id="name" placeholder="请输入你的名字" class="form-control"/>
            <button onclick="sayHello()" class="btn btn-success" id="hello">打招呼</button>
        </div>
   </div>
    
    <div class="row">
        <div id="greeting"></div>
            <button onclick="getJoke()">讲个笑话</button>
            <div id="joke"></div>
    </div>
    

    <script type="text/javascript">
        function sayHello() {
            var name = document.getElementById("name").value;
            eel.say_hello(name)(function(result) {
                document.getElementById("greeting").innerHTML = result;
            });
        }

        function getJoke() {
            eel.get_joke()(function(joke) {
                document.getElementById("joke").innerHTML = joke;
            });
        }
        $("#abc").click(function(){
            var name=prompt("your name?")
            $("#name").val(name)
            $("#hello").click()
        })
    </script>
</body>
</html>

main.py

import eel
import random

# 笑话列表
jokes = [
    "为什么电脑经常生病？因为窗户（Windows）总是开着！",
    "为什么数学书看起来总是很悲伤？因为它里面有太多的问题(problems)",
    "为什么海洋里没有电脑？因为它们总是遇到短路（seals）",
    "为什么冰块感觉很高冷？因为它的幽默感都冻结了。"
]

@eel.expose
def get_joke():
    return random.choice(jokes)

@eel.expose
def say_hello(name):
    return f"Hello, {name}!"

if __name__ == "__main__":
    eel.init(".") #如果是文件夹，就写文件夹名字，我这里html跟python同级
    eel.start("index.html", size=(400, 500))

发表回复