因为EEL介绍太少,目前刚好正在使用,所以在这里纪录笔记过程,还有很多后续没有写上来。
因为我目前是用Angular管理前端的,所以之后也会结合eel和Angular,但由于目前还是学生,很多东西都还在摸索阶段,所以有错误就帮忙提出谢谢~
这一篇文章参考了很多:
https://neutron0916.medium.com/python-eel-%E5%89%B5%E9%80%A0%E5%80%8B%E4%BA%BA%E7%B6%B2%E9%A0%81gui%E6%A1%8C%E9%9D%A2%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-%E5%85%A5%E9%96%80%E7%AF%87-2500b38ed070
他写得很好,我下面只是实作,所以想更了解的请去看这篇文章。
从下一篇开始才会是我自己的解读和更新,所以也可能会看起来很糟糕
主要介绍
以Python为主,以网页为介面架构做出来的GUI
使用
1. 安装
要记得安装对的环境!常犯错误就是装了太多Python结果装错环境。
解: 到你Python的那个环境资料夹下,找到Scripts,在目录上打cmd开启命令提示字元,这时候在下pip,我用我的环境来示範在Command-line下面的样子。
Python376 -> Scripts
E:\ProgrammingLanguage\Envir\python376\Scripts>pip install eel
一开始的架构长这样
import eel# 这里写上你要的functioneel.init('UI') # eel.init(网页的资料夹)eel.start('main.html', size=(1920, 1080)) #eel.start(html名称, size=(起始大小))
2. 呼叫方式 JS ↔ Python
主要就两个步骤,就是个双箭头
将Python的function用 @eel.expose 丢给 JavaScript在JavaScript内直接使用eel.python_function({Value})() 接收和value传送到Pythonmain.html
<!DOCTYPE html><head> <title>main</title> <meta charset="utf-8"> <!-- javascript --> <script type="text/javascript" src="/eel.js"></script> <!-- eel.js 是使用eel的必须 --> <script src="./func.js"></script> <!-- 要管理html的js档案 --></head><body> <div> <!-- 将返回的值 设定在这个<p>内 --> <p id="fromPythonText"></p> </div></body></html>
launcher.py:在eel.init上面加入这段
@eel.expose #用decorator的方式,将JS要呼叫的PY function暴露给eel, 让eel当作一个library 去给JS使用def python_to_js(js_to_python): # 这个word接收JS过来的字串 text = "这里是Python, " + js_to_python return text #返回 python的字串+javascript的字串
func.js
/*这边必须要async funciton 因为python返回需要时间,而JS 又不会block, *所以需要用async function 加上await去呼叫PY function */async function show(){ //呼叫的方式,就是加上eel //加上刚刚被expose PY function的名称然后多加()输入参数,最后加()取值 result = await eel.python_to_js("我这里又是JS")() //最后将返回的值设定在HTML上的ID为fromPythonText的tag document.getElementById('fromPythonText').textContent = result}show();
就是很简单的我丢过来你过来的範例。
容易遇到的问题?
我偶尔会遇到404的状况,是因为8000 port撞车了,这时候会开命令提示字元netstat -ano | findstr 8000这里会出现你正在执行的东西,找到你要砍的程序再执行taskkilltaskkill /f /PID {请输入佔领的PID}
如果你是VSC的使用者,可以的话不要用VSC内建开启Python的方式使用目前弄下来我自己是连用Terminal开启偶尔都会错误,所以我会从档案夹双击两下launcher.py档做使用,这样的话没出错过也不会佔据Port。