快捷導(dǎo)航

Python如何使用Eel和HTML開發(fā)桌面應(yīng)用

更新時(shí)間：2023年01月03日 11:03:54 作者：DexterLien

這篇文章主要介紹了Python使用Eel和HTML開發(fā)桌面應(yīng)用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

最近感覺Python越用越順手了，干啥都挺好用,可是就桌面應(yīng)用這一塊一直沒有找到很好的解決方案，試過了TK、QT、wx之流的GUI方案后感覺都只能做點(diǎn)簡(jiǎn)單的界面還行，控件稍微多點(diǎn)就感覺好變態(tài)啊，而且界面還是丑。。。

今天閑逛居然發(fā)現(xiàn)了Eel這貨，類似Electron的效果，可以直接使用HTML來做界面，程序邏輯部分還是用python寫，js和py可以無縫對(duì)接，感覺好像發(fā)現(xiàn)了新大陸~

環(huán)境準(zhǔn)備

Python 3.7.3
Chrome瀏覽器（由于Eel是直接調(diào)用的Chrome的app啟動(dòng)模式，所以自己很輕量，不過需要提前安裝有Chrome）
IDE用了VSCode
前端直接使用BootCDN上的bootstrap和jQuery
安裝Eel庫(kù)

pip install eel

效果展示

文件結(jié)構(gòu)

.
├── main.py	主入口
├── venv	virtualenv環(huán)境
└── web		靜態(tài)文件
    ├── css
    ├── favicon.ico
    ├── img
    └── main.html

上面web文件夾用來存放各種靜態(tài)文件，我是直接用的CDN上的css和js庫(kù)，比用npm裝到本地還省事兒。

這里主要提一下favicon.ico這個(gè)文件，以前擼html從來沒做過這個(gè)圖標(biāo)，在Eel中這個(gè)文件將會(huì)顯示為程序左上角的圖標(biāo)，所以還是挑個(gè)好看點(diǎn)的扔進(jìn)來吧。

main.py

import eel

# 定義html文件所在文件夾名稱
eel.init('web')

@eel.expose # 使用裝飾器,類似flask里面對(duì)路由的定義
def py_fun(a):
    content = '你好！' + a    
    return(content)

# 測(cè)試調(diào)用js中的函數(shù),同樣需要使用回調(diào)函數(shù)
js_return = eel.js_fun('python傳過去的參數(shù)')(lambda x: print(x))

# 啟動(dòng)的函數(shù)調(diào)用放在最后,port=0表示使用隨機(jī)端口,size=(寬,高)
eel.start('main.html', port=0, size=(600,300))

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Eel演示</title>
    <link  rel="external nofollow"  rel="stylesheet">
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body>
    <div class="container">
        <div class="card mt-4">
            <div class="card-body">
                <h4>js & py互調(diào)測(cè)試</h4>
                <input type="text" class="form-control" id="in">
                <p id="out"></p>
                <button class="btn btn-lg btn-success" onclick="doThis()">調(diào)用Python函數(shù)</button>
            </div>
        </div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        // 調(diào)用python中的函數(shù),注意需要在定義前加上async聲明異步
        async function doThis(){    
            var par=$("#in").val();
            let content = await eel.py_fun(par)();  //這里用let不用var,調(diào)用的python函數(shù)后面是兩對(duì)括號(hào)
            $("#out").text(content);
        }

        // 將js中的函數(shù)暴露給python,這個(gè)貌似不怎么需要用
        eel.expose(js_fun);
        function js_fun(a){
            return('這是調(diào)用js中函數(shù)返回的結(jié)果：' + a);
        }
    </script>
</body>
</html>