百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

Python的一个轻量级桌面GUI开发第三方库:Eel

off999 2024-12-23 12:43 20 浏览 0 评论

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 图


基本介绍到这里,自己整理,分享出来,喜欢的收藏和转发。

==========未完待续==========

相关推荐

独家 | 5 个Python高级特性让你在不知不觉中成为Python高手

你已经使用Python编程了一段时间,编写脚本并解决各种问题。是你的水平出色吗?你可能只是在不知不觉中利用了Python的高级特性。从闭包(closure)到上下文管理器(contextmana...

Python装饰器

Python装饰器是一种用于修改函数或类的行为的特殊语法。它们允许在不修改原始代码的情况下,通过将函数或类作为参数传递给另一个函数来添加额外的功能。装饰器本质上是一个函数,它接受一个函数作为参数,并返...

中高阶Python常规用法--上下文管理器

Python以简单性和通用性著称,是一种深受全球开发人员喜爱的编程语言。它提供了大量的特性和功能,使编码成为一种愉快的体验。在这些功能中,一个经常被新手忽视的强大工具是上下文管理器。上下文管理器是高...

Python小案例67- 装饰器

Python装饰器是一种用于修改函数或类的行为的特殊语法。它们允许在不修改原始代码的情况下,通过将函数或类作为参数传递给另一个函数来添加额外的功能。装饰器本质上是一个函数,它接受一个函数作为参数,并返...

python常用的语法糖

概念Python的语法糖(SyntacticSugar)是指那些让代码更简洁、更易读的语法特性,它们本质上并不会增加新功能,但能让开发者更高效地编写代码。推导式写法推导式是Python最经典的...

python - 常用的装饰器 decorator 有哪些?

python编程中使用装饰器(decorator)工具,可以使代码更简洁清晰,提高代码的重用性,还可以为代码维护提供方便。对于python初学者来说,根据装饰器(decorator)的字面意思并不...

python数据缓存怎么搞 ?推荐一个三方包供你参考,非常简单好用。

1.数据缓存说明数据缓存可以说也是项目开发中比不可少的一个工具,像我们测试的系统中,你都会见到像Redis一样的数据缓存库。使用缓存数据库的好处不言而喻,那就是效率高,简单数据直接放在缓存中...

用于时间序列数据的Graphite监视工具

结合第三方工具,Graphite为IT性能监控提供了许多好处。本文介绍其核心组件,包括Carbon、Whisper以及安装的基本准则。Graphite监视工具可实时或按需,大规模地绘制来自多个来源的时...

Python3+pygame实现的坦克大战

一、显示效果二、代码1.说明几乎所有pygame游戏,基本都遵循一定的开发流程,大体如下:初始化pygame创建窗口while循环检测以及处理事件(鼠标点击、按键等)更新UI界面2.代码创建一个m...

Python之鸭子类型:一次搞懂with与上下文装饰器

引言在鸭子类型的理念的基础之上,从关注类型,转变到关注特性和行为。结合Python中的魔法函数的体系,我们可以将自定义的类型,像内置类型一样被使用。今天这篇文章中,接着该话题,继续聊一下with语法块...

Python必会的50个代码操作

学习Python时,掌握一些常用的程序操作非常重要。以下是50个Python必会的程序操作,主要包括基础语法、数据结构、函数和文件操作等。1.HelloWorldprint("Hello,...

一文掌握Python 中的同步和异步

同步代码(Sync)同步就像在一个流水线上工作,每个任务都等待前一个任务完成。示例:机器A切割钢板→完成后,机器B钻孔→完成后,机器C上色。在Python中,同步代码看起来像这样:im...

python 标注模块timeit: 测试函数的运行时间

在Python中,可以使用内置的timeit模块来测试函数的运行时间。timeit模块提供了一个简单的接口来测量小段代码的执行时间。以下是使用timeit测试函数运行时间的一般步骤:导入...

Python带你找回童年的万花尺

还记得小时候的万花尺吧?这么画:一点也不费脑筋,就可以出来这么多丰富多彩的复杂几何图形。具体而言,可以用万花尺玩具(如图2-1所示)来绘制数学曲线。这种玩具由两个不同尺寸的塑料齿轮组成,一大一小。小的...

Python 时间模块深度解析:从基础到高级的全面指南

直接上干货一、时间模块核心类介绍序号类名说明1datetime.datetime表示一个具体的日期和时间,结合了日期和时间的信息。2datetime.date表示一个具体的日期。3datetime.t...

取消回复欢迎 发表评论: