用Python+Eel写个Metro风格的web的GUI桌面程序
off999 2024-11-08 12:54 17 浏览 0 评论
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结合会更强大。整理并分享出来，喜欢就收藏和转发。
相关推荐
- python import 出现 ModuleNotFoundError 解决方法
-
错误的原因是你的Python环境没有正确安装库文件。本文以Scapy为例，给出详细方案：1.确认是否成功安装Scapy运行以下命令检查Scapy是否已安装：pip3list|gre...
- Github 7.4k star，一个强大的 Python 库-sh!
-
大家好，今天为大家分享一个强大的Python库-sh。Github地址：https://github.com/amoffat/shsh库是Python生态系统中一个专门用于执行系统命令的第三方...
- 学习编程第148天 python编程循环的嵌套使用
-
今天学习的是刘金玉老师零基础Python教程第32期，主要内容是python编程循环的嵌套使用。（一）一维数组及输出#一维数组list1=["110001","四川二流子...
- 2025-07-09:使数组元素互不相同所需的最少操作次数。用go语言，
-
2025-07-09：使数组元素互不相同所需的最少操作次数。用go语言，给定一个整数数组nums和一个整数k，对于数组中的每个元素，你最多可以对其进行一次操作：将一个在区间[-k,k]内的...
- python数据分析numpy基础之max求数组最大值
-
1python数据分析numpy基础之max求数组最大值python的numpy库的max()函数，用于计算沿指定轴(一个轴或多个轴)的最大值。用法numpy.max(a,axis=None,...
- 加快Python算法的四个方法(四)Dask
-
CDA数据分析师出品相信大家在做一些算法经常会被庞大的数据量所造成的超多计算量需要的时间而折磨的痛苦不已，接下来我们围绕四个方法来帮助大家加快一下Python的计算时间，减少大家在算法上的等待时间。...
- 六十六、Leetcode数组系列(中篇)（leetcode679）
-
@Author：Runsen@Date：2020/6/8人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难...
- Numpy中的ndarray是什么?（'numpy.ndarray' object has no attribute 'append'）
-
1.创建ndarray创建数组最简单的办法就是使用array函数。它接受一切序列型的对象（包括其他数组），然后产生一个新的含有传入数据的Numpy数组。np.array会尝试为新建的这个数组推断出一个...
- Python中的数据导入与查询（python怎样导入数据库）
-
适用场景：快速导入文本/Excel数据→Pandas读取大型数值数据→Numpy处理复杂二进制文件→h5py/scipy.io数据库交互→SQLAlchemy+Pandas一、数据...
- 2025-07-02:统计数组中的美丽分割。用go语言，给定一个整数数组
-
2025-07-02：统计数组中的美丽分割。用go语言，给定一个整数数组nums，我们要把它划分成三个连续且非空的子数组nums1、nums2、nums3，且这三个子数组按顺序拼接后还原为原数组...
- 2025-07-10:字符相同的最短子字符串Ⅰ。用go语言，给定一个长度
-
2025-07-10：字符相同的最短子字符串Ⅰ。用go语言，给定一个长度为n的二进制字符串s和一个允许执行的最大操作次数numOps。每次操作可以选择字符串中的任意一个位置i（0≤i...
- 2025-06-19:识别数组中的最大异常值。用go语言，你有一个长度为
-
2025-06-19：识别数组中的最大异常值。用go语言，你有一个长度为n的整数数组nums，其中恰好有n-2个元素属于“特殊数字”类别。剩下的两个元素中，一个等于所有这些特殊数字的总和，另...
- 2025-06-28:长度可被 K 整除的子数组的最大元素和。用go语言，给
-
2025-06-28：长度可被K整除的子数组的最大元素和。用go语言，给定一个整数数组nums和一个整数k，求nums中长度为k的倍数的非空子数组中，子数组和的最大值。返回该最大和...
- 在 Python 中如何向一个已排序的数组(列表) 中插入一个数呢
-
在Python中如何向一个已排序的数组（列表）中插入一个数呢？方法有很多种，关键在于原来数组是什么样的排序，用到啥排序方法效率高，就用哪种。我们来练习其中的几种插入方法，另外也掌握下遍历数组的...
- 2025-07-04:统计符合条件长度为 3 的子数组数目。用go语言，给定
-
2025-07-04：统计符合条件长度为3的子数组数目。用go语言，给定一个整数数组nums，请你计算有多少个长度恰好为3的连续子数组满足这样的条件：子数组的第一个元素与第三个元素的和，正好...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- python import 出现 ModuleNotFoundError 解决方法
- Github 7.4k star，一个强大的 Python 库-sh!
- 学习编程第148天 python编程循环的嵌套使用
- 2025-07-09:使数组元素互不相同所需的最少操作次数。用go语言，
- python数据分析numpy基础之max求数组最大值
- 加快Python算法的四个方法(四)Dask
- 六十六、Leetcode数组系列(中篇)（leetcode679）
- Numpy中的ndarray是什么?（'numpy.ndarray' object has no attribute 'append'）
- Python中的数据导入与查询（python怎样导入数据库）
- 2025-07-02:统计数组中的美丽分割。用go语言，给定一个整数数组
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python字典遍历 (54)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (77)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)