用Python+Eel写个Metro风格的web的GUI桌面程序

off999 2024-11-08 12:54 34 浏览 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=1613452977046555462

1.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开发web应用