您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > Python

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

时间:2020-05-19 11:21:37  来源:  作者:

1 环境:

======

1.1 Python3.8,谷歌浏览器,微软vscode编辑器。

1.2 Eel库的介绍,安装,相关地址,对官方的文档进行解读,文件结构,简单使用和注意事项。

1.3 亲测,目的通俗易懂。

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

 

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 文件结构:

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

 

就是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 执行:

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

 

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 图

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

 

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



Tags:Python Eel   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1 环境:======1.1 python3.8,谷歌浏览器,微软vscode编辑器。1.2 Eel库的介绍,安装,相关地址,对官方的文档进行解读,文件结构,简单使用和注意事项。1.3 亲测,目的通俗易懂。 2 介绍:===...【详细内容】
2020-05-19  Tags: Python Eel  点击:(161)  评论:(0)  加入收藏
▌简易百科推荐
Python 是一个很棒的语言。它是世界上发展最快的编程语言之一。它一次又一次地证明了在开发人员职位中和跨行业的数据科学职位中的实用性。整个 Python 及其库的生态系统使...【详细内容】
2021-12-27  IT资料库    Tags:Python 库   点击:(1)  评论:(0)  加入收藏
菜单驱动程序简介菜单驱动程序是通过显示选项列表从用户那里获取输入并允许用户从选项列表中选择输入的程序。菜单驱动程序的一个简单示例是 ATM(自动取款机)。在交易的情况下...【详细内容】
2021-12-27  子冉爱python    Tags:Python   点击:(4)  评论:(0)  加入收藏
有不少同学学完Python后仍然很难将其灵活运用。我整理15个Python入门的小程序。在实践中应用Python会有事半功倍的效果。01 实现二元二次函数实现数学里的二元二次函数:f(x,...【详细内容】
2021-12-22  程序汪小成    Tags:Python入门   点击:(32)  评论:(0)  加入收藏
Verilog是由一个个module组成的,下面是其中一个module在网表中的样子,我只需要提取module名字、实例化关系。module rst_filter ( ...); 端口声明... wire定义......【详细内容】
2021-12-22  编程啊青    Tags:Verilog   点击:(7)  评论:(0)  加入收藏
运行环境 如何从 MP4 视频中提取帧 将帧变成 GIF 创建 MP4 到 GIF GUI ...【详细内容】
2021-12-22  修道猿    Tags:Python   点击:(5)  评论:(0)  加入收藏
面向对象:Object Oriented Programming,简称OOP,即面向对象程序设计。类(Class)和对象(Object)类是用来描述具有相同属性和方法对象的集合。对象是类的具体实例。比如,学生都有...【详细内容】
2021-12-22  我头秃了    Tags:python   点击:(9)  评论:(0)  加入收藏
所谓内置函数,就是Python提供的, 可以直接拿来直接用的函数,比如大家熟悉的print,range、input等,也有不是很熟,但是很重要的,如enumerate、zip、join等,Python内置的这些函数非常...【详细内容】
2021-12-21  程序员小新ds    Tags:python初   点击:(5)  评论:(0)  加入收藏
Hi,大家好。我们在接口自动化测试项目中,有时候需要一些加密。今天给大伙介绍Python实现各种 加密 ,接口加解密再也不愁。目录一、项目加解密需求分析六、Python加密库PyCrypto...【详细内容】
2021-12-21  Python可乐    Tags:Python   点击:(7)  评论:(0)  加入收藏
借助pyautogui库,我们可以轻松地控制鼠标、键盘以及进行图像识别,实现自动抢课的功能1.准备工作我们在仓库里提供了2个必须的文件,包括: auto_get_lesson_pic_recognize.py:脚本...【详细内容】
2021-12-17  程序员道道    Tags:python   点击:(13)  评论:(0)  加入收藏
前言越来越多开发者表示,自从用了Python/Pandas,Excel都没有打开过了,用Python来处理与可视化表格就是四个字&mdash;&mdash;非常快速!下面我来举几个明显的例子1.删除重复行和空...【详细内容】
2021-12-16  查理不是猹    Tags:Python   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条