脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → python → 使用Eel和HTML开发桌面应用

Python如何使用Eel和HTML开发桌面应用

 更新时间：2023年01月03日 11:03:54   作者：DexterLien  
这篇文章主要介绍了Python使用Eel和HTML开发桌面应用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

最近感觉Python越用越顺手了，干啥都挺好用,可是就桌面应用这一块一直没有找到很好的解决方案，试过了TK、QT、wx之流的GUI方案后感觉都只能做点简单的界面还行，控件稍微多点就感觉好变态啊，而且界面还是丑。。。

今天闲逛居然发现了Eel这货，类似Electron的效果，可以直接使用HTML来做界面，程序逻辑部分还是用python写，js和py可以无缝对接，感觉好像发现了新大陆~

环境准备

  • Python 3.7.3
  • Chrome浏览器（由于Eel是直接调用的Chrome的app启动模式，所以自己很轻量，不过需要提前安装有Chrome）
  • IDE用了VSCode
  • 前端直接使用BootCDN上的bootstrap和jQuery
  • 安装Eel库
pip install eel

效果展示

文件结构

.
├── main.py	主入口
├── venv	virtualenv环境
└── web		静态文件
    ├── css
    ├── favicon.ico
    ├── img
    └── main.html

上面web文件夹用来存放各种静态文件，我是直接用的CDN上的css和js库，比用npm装到本地还省事儿。

这里主要提一下favicon.ico这个文件，以前撸html从来没做过这个图标，在Eel中这个文件将会显示为程序左上角的图标，所以还是挑个好看点的扔进来吧。

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))

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="external nofollow"  rel="stylesheet">
    <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>

总结

总体来说还是比较切中我的点的，能用HTML做界面的话，颜值肯定有保证了，接下来就是继续研究python源代码转EXE或者加密打包的问题了，还有~不知道如果配上vue.js的话会不会飞起来？

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • pytorch载入预训练模型后,实现训练指定层

    pytorch载入预训练模型后,实现训练指定层

    今天小编就为大家分享一篇pytorch载入预训练模型后,实现训练指定层，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-01-01
  • Python读取图像并显示灰度图的实现

    Python读取图像并显示灰度图的实现

    这篇文章主要介绍了Python读取图像并显示灰度图的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 使用python中的in ,not in来检查元素是不是在列表中的方法

    使用python中的in ,not in来检查元素是不是在列表中的方法

    今天小编就为大家分享一篇使用python中的in ,not in来检查元素是不是在列表中的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • python抓取网页中链接的静态图片

    python抓取网页中链接的静态图片

    这篇文章主要为大家详细介绍了python抓取网页中链接的静态图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Python3 导入上级目录中的模块实例

    Python3 导入上级目录中的模块实例

    今天小编就为大家分享一篇Python3 导入上级目录中的模块实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-02-02
  • 获取Django项目的全部url方法详解

    获取Django项目的全部url方法详解

    这篇文章主要介绍了获取Django项目的全部url方法详解，小编觉得挺不错的，这里分享给大家，供需要的朋友参考。
    2017-10-10
  • Python实现查找数据库最接近的数据

    Python实现查找数据库最接近的数据

    这篇文章主要介绍了Python实现查找数据库最接近的数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • python snap7读写PLC的操作方法

    python snap7读写PLC的操作方法

    这篇文章主要介绍了python snap7读写PLC的操作方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • 浅谈基于Pytest框架的自动化测试开发实践

    浅谈基于Pytest框架的自动化测试开发实践

    Pytest是Python的一种易用、高效和灵活的单元测试框架，本文主要介绍了基于Pytest框架的自动化测试开发实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-12-12
  • python实战教程之自动扫雷

    python实战教程之自动扫雷

    用python实现扫雷,非常有意思，这篇文章主要给大家介绍了关于python实现自动扫雷的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07

最新评论