Python如何使用Eel和HTML開發(fā)桌面應用
最近感覺Python越用越順手了,干啥都挺好用,可是就桌面應用這一塊一直沒有找到很好的解決方案,試過了TK、QT、wx之流的GUI方案后感覺都只能做點簡單的界面還行,控件稍微多點就感覺好變態(tài)啊,而且界面還是丑。。。
今天閑逛居然發(fā)現(xiàn)了Eel這貨,類似Electron的效果,可以直接使用HTML來做界面,程序邏輯部分還是用python寫,js和py可以無縫對接,感覺好像發(fā)現(xiàn)了新大陸~
環(huán)境準備
Python 3.7.3
Chrome瀏覽器
(由于Eel是直接調用的Chrome的app啟動模式,所以自己很輕量,不過需要提前安裝有Chrome)- IDE用了
VSCode
- 前端直接使用BootCDN上的
bootstrap
和jQuery
- 安裝
Eel
庫
pip install eel
效果展示
文件結構
. ├── main.py 主入口 ├── venv virtualenv環(huán)境 └── web 靜態(tài)文件 ├── css ├── favicon.ico ├── img └── main.html
上面web
文件夾用來存放各種靜態(tài)文件,我是直接用的CDN上的css和js庫,比用npm
裝到本地還省事兒。
這里主要提一下favicon.ico
這個文件,以前擼html從來沒做過這個圖標,在Eel
中這個文件將會顯示為程序左上角的圖標,所以還是挑個好看點的扔進來吧。
main.py
import eel # 定義html文件所在文件夾名稱 eel.init('web') @eel.expose # 使用裝飾器,類似flask里面對路由的定義 def py_fun(a): content = '你好!' + a return(content) # 測試調用js中的函數(shù),同樣需要使用回調函數(shù) js_return = eel.js_fun('python傳過去的參數(shù)')(lambda x: print(x)) # 啟動的函數(shù)調用放在最后,port=0表示使用隨機端口,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互調測試</h4> <input type="text" class="form-control" id="in"> <p id="out"></p> <button class="btn btn-lg btn-success" onclick="doThis()">調用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> // 調用python中的函數(shù),注意需要在定義前加上async聲明異步 async function doThis(){ var par=$("#in").val(); let content = await eel.py_fun(par)(); //這里用let不用var,調用的python函數(shù)后面是兩對括號 $("#out").text(content); } // 將js中的函數(shù)暴露給python,這個貌似不怎么需要用 eel.expose(js_fun); function js_fun(a){ return('這是調用js中函數(shù)返回的結果:' + a); } </script> </body> </html>
總結
總體來說還是比較切中我的點的,能用HTML做界面的話,顏值肯定有保證了,接下來就是繼續(xù)研究python源代碼轉EXE或者加密打包的問題了,還有~不知道如果配上vue.js
的話會不會飛起來?
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
python實現(xiàn)一行輸入多個整數(shù)并排序輸出
這篇文章主要介紹了python實現(xiàn)一行輸入多個整數(shù)并排序輸出方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02Python實現(xiàn)計算文件夾下.h和.cpp文件的總行數(shù)
這篇文章主要介紹了Python實現(xiàn)計算文件夾下.h和.cpp文件的總行數(shù),本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-04-04對python指數(shù)、冪數(shù)擬合curve_fit詳解
今天小編就為大家分享一篇對python指數(shù)、冪數(shù)擬合curve_fit詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-12-12如何一分鐘內找出pandas DataFrame某列中的nan值
這篇文章主要介紹了如何一分鐘內找出pandas DataFrame某列中的nan值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09