1 環境：
======
1.1 Python3.8，谷歌瀏覽器，微軟vscode編輯器。
1.2 Eel庫的介紹，安裝，相關地址，對官方的文檔進行解讀，文件結構，簡單使用和注意事項。
1.3 親測，目的通俗易懂。
2 介紹：
======
2.1 Eel是一個輕量的python桌面GUI開發第三方庫。
2.2 Eel實際上是啟動了一個本地的web服務器, 它允許你將python的函數暴露給JAVAscript, 所以網頁端也能調用python函數。
2.3 使用html/JS作為界面開發語言, 但是能夠訪問所有的python功能, 類似于electron, 但是比它輕量。
2.4 Eel是輕量級的, 它只是啟動了一個chrome App, 所以需要你提前安裝好chrome瀏覽器才可以。（即：提前安裝谷歌瀏覽器）。
3 安裝：
======
pip install eel
#本機安裝
#pip3.8 install eel #太卡了
#采用如下，神速
#pip3.8 install -i https://mirrors.aliyun.com/pypi/simple eel
4 傳送門：
=======
https://github.com/samuelhwilliams/Eel
https://pypi.org/project/Eel/
5 文件結構和簡單的hello介紹
======================
5.1 文件結構：
就是web文件夾與執行代碼在同一個目錄下；而main.html在web文件夾下。
5.2 代碼：hello1.py
import eel
eel.init('web')
eel.start('main.html')
5.3 main.html代碼：
<!DOCTYPE html>
<html>
<!--注意html和js代碼內的注釋不一樣-->
<head>
<!--標題-->
<title>Hello, World!</title>
<!--最簡單的js代碼格式-->
<script type="text/JavaScript">
// Expose this function to Python
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
// Call a Python function
eel.say_hello_py("Javascript World!");
</script>
</head>
<body>
<!--網頁內容-->
Hello, World!
</body>
</html>
5.4 執行：
5.5 高級別的可選參數設置：hello2.py代碼
import eel
eel.init('web')
#增加可選參數
web_app_options = {
#指定瀏覽器，默認也是谷歌瀏覽器
'mode': 'chrome-app', #or “chrome”
#指定端口，默認也是這個端口
'port': 8080,
#–kIOSk 是chrome的全屏參數
'chromeFlags': ["–kiosk"]
}
#新版中需要增加suppress_error=True，不要報錯
#eel.start('main.html', options=web_app_options,suppress_error=True)
eel.start('main.html')
#eel.start('main.html',size=(20,20)) #指定窗口大小，感覺差不多，估計不能太小
6 新案例：
=======
6.1 參考資料來源，在其基礎上進行修改。
https://blog.csdn.net/lpwmm/article/details/102965286?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFrommachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase
6.2 文件結構：
├── main.py 主入口
└── web 靜態文件
├── main.html
6.3 main.py代碼：
import eel
# 定義html文件所在文件夾名稱
eel.init('web')
@eel.expose # 使用裝飾器,類似flask里面對路由的定義
def py_fun(a):
content = '你好！' + a
return(content)
# 測試調用js中的函數,同樣需要使用回調函數
js_return = eel.js_fun('python傳過去的參數')(lambda x: print(x))
# 啟動的函數調用放在最后,port=0表示使用隨機端口,size=(寬,高)
eel.start('main.html', port=0, size=(600,300))
6.4 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 href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!--注意：這里的eel.js，并不是通常意義的js文件放在目錄下，這是默認格式，自動調動eel.js文件-->
<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函數</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中的函數,注意需要在定義前加上async聲明異步
async function doThis(){
var par=$("#in").val();
let content = await eel.py_fun(par)(); //這里用let不用var,調用的python函數后面是兩對括號
$("#out").text(content);
}
// 將js中的函數暴露給python,這個貌似不怎么需要用
eel.expose(js_fun);
function js_fun(a){
return('這是調用js中函數返回的結果：' + a);
}
</script>
</body>
</html>
6.4 圖
基本介紹到這里，自己整理，分享出來，喜歡的收藏和轉發。
