笔记 Day1 — EEL Python GUI

因为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
http://img2.58codes.com/2024/20149267RTKDFRTV4e.jpg

使用

1. 安装

要记得安装对的环境!常犯错误就是装了太多Python结果装错环境。
解: 到你Python的那个环境资料夹下,找到Scripts,在目录上打cmd开启命令提示字元,这时候在下pip,我用我的环境来示範在Command-line下面的样子。
Python376 -> Scripts

E:\ProgrammingLanguage\Envir\python376\Scripts>pip install eel

一开始的架构长这样
http://img2.58codes.com/2024/20149267b8TSpNh7a7.jpg

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传送到Python

main.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();

http://img2.58codes.com/2024/20149267xDX4Mc4pbk.jpg

就是很简单的我丢过来你过来的範例。

容易遇到的问题?

我偶尔会遇到404的状况,是因为8000 port撞车了,这时候会开命令提示字元
netstat -ano | findstr 8000这里会出现你正在执行的东西,找到你要砍的程序再执行taskkilltaskkill /f /PID {请输入佔领的PID}
如果你是VSC的使用者,可以的话不要用VSC内建开启Python的方式使用
目前弄下来我自己是连用Terminal开启偶尔都会错误,所以我会从档案夹双击两下launcher.py档做使用,这样的话没出错过也不会佔据Port。

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章