用Python+Eel写个Metro风格的web的GUI桌面程序
1 说明
1.1 Eel是python的轻量级桌面GUI程序开发库。
1.2 已介绍，暂时略。讲一个用Python写个Metro风格的桌面程序。
1.3 资料来源，对代码进行注释。
https://www.jianshu.com/p/625da69a1d38
https://baijiahao.baidu.com/s?id=16134529770465554621.4 环境：deepin-linux深度操作系统，python3.8，谷歌浏览器，微软vscode编辑器。
2 文件结构：简单，一个main.py和一个web文件夹（里面有一个main.html）
3 main.py代码：
#---导出模块---
import eel
#---初始化，指定web文件夹，便于启动main.html文件
eel.init('web')
#---使用装饰器,类似flask里面对路由的定义---
@eel.expose
#---定义函数：python与html的联动设置---
def hello1():
return '你好，python的eel'
#注意每一个函数都必须从新使用装饰器
@eel.expose
def hello2():
return 'Eel很简单呀！'
#---启动的函数---调用放在最后,port=0表示使用随机端口,size=(宽,高)
#eel.start('main.html', port=0, size=(600,300))
eel.start('main.html')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>用Python写个Metro风格的桌面程序</title>
<link href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<!--注意eel.js文件的导入；是eel的一大特点，与常见的js导入不同和vue也不同-->
<!--这个"/eel.js"就是默认从你安装的eel模块中导出，也就是项目文件夹中无eel.js均可以，也就不存在本地和在线导入eel.js-->
<script type="text/javascript" src="/eel.js"></script>
<script>
// 调用python中的函数,注意需要在定义前加上async声明异步
async function show1val(){
//调出python代码函数，关键点
let text= await eel.hello1()();
$("#txt").val(text);
}
// 注意onclick的按钮函数在这里逐步添加，也就是py中的装饰器下的def定义函数
async function show2val(){
let text= await eel.hello2()();
$("#txt").val(text);
}
</script>
</head>
<body>
<nav data-role='ribbonmenu'>
<ul class='tabs-holder'>
<li><a href="#section-1-1">文件</a></li>
<li><a href="#section-1-1">设置</a></li>
</ul>
<div class='content-holder'>
<div class='section' id='section-1-1'>
<div class='group'>
<button class='ribbon-button' onclick='show1val()'>
<span class="mif-copy mif-5x fg-blue"></span>
<span class="caption">显示1</span>
</button>
<button class='ribbon-button' onclick='show2val()'>
<span class="mif-copy mif-5x fg-blue"></span>
<span class="title">显示2</span>
</button>
<span class="title">文本显示</span>
</div>
<div class='group'>
<button class='ribbon-button'>
<span class="mif-copy mif-5x fg-blue"></span>
<span class="caption">github</span>
</button>
<button class='ribbon-button'>
<span class="mif-copy mif-5x fg-blue"></span>
<span class="title">gitlab</span>
</button>
<span class="title">提交</span>
</div>
</div>
</div>
</nav>
<textarea id="txt" rows="100"></textarea>
</body>
</html> 5 运行及效果图
很方面，如果和vue结合会更强大。整理并分享出来，喜欢就收藏和转发。
