python的gui太难用了，唯一能配置独立前端的程序只有web。所以用web做前端，到python，完美！

环境准备

    Python 3.9
    Chrome浏览器（由于Eel是直接调用的Chrome的app启动模式，所以自己很轻量，不过需要提前安装有Chrome）
    安装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="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的话会不会飞起来？

以上来自：https://blog.csdn.net/lpwmm/article/details/102965286

提升一下，直接用vue+vant的前端做python前端：

py部分

import eel

import time

# 定义html文件所在文件夹名称

eel.init('web')

@eel.expose # 使用装饰器,类似flask里面对路由的定义

def py_fun(a):

    time.sleep(2)

    return [t*2 for t in a]

eel.start('test.html', port=0, size=(800,400))

test.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<title>Eel演示</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

<script src="/eel.js"></script>

<script src="css/vue.js"></script>

<script src="css/vant.min.js"></script>

<link rel="stylesheet" href="css/vant.css">

<link rel="stylesheet" href="css/hwj.css">

</head>

<body>

<div id="vuebox">

<!--内容开始-->

<p v-for="item in test">{{item}}</p>

<van-button type="primary" @click="doThis">主要按钮</van-button>

<!--内容结束-->

</div><!--vuebox-->

    <script>

const app=new Vue({///////////////////////////start vue

el:'#vuebox',

data(){return{

    test:[1,2,3,4]

}},

methods:{

loading(){this.$toast({type: 'loading', message: '正在加载', forbidClick: true, duration: 0});},

loaded(){this.$toast.clear();this.$toast({type: 'success', message: '加载成功', forbidClick: true, duration: 500});},

async doThis(){

    this.loading();

    this.test = await eel.py_fun(this.test)();

    this.loaded();

}

},

mounted:function(){

    var d = new Date();

    console.log(d)

},

});///////////////////////////////////end vue

</script>

</body>

</html>

以上用到的js，css来自vant2的页面：

<link

  rel="stylesheet"

  href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"

/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

运行完，打包：

python -m eel t1.py web --onefile --noconsole --noconfirm

python -m eel 程序包.py web --noconsole --noconfirm
pyinstaller -F --noconsole -i i.ico 运行.py

完美

eel的说明文档：

https://pypi.org/project/Eel/

Python使用Eel和HTML开发桌面应用GUI直接用web前端的VUE+VANT来做的更多相关文章

  1. Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目

    搭建angular开发环境 一.下载并安装node 官网地址:点击前往 二.利用npm安装cnpm 安装好node后就可以使用npm命令啦 查看版本:npm -v 安装cnpm:npm install ...

  2. gVIM+zencoding快速开发HTML/CSS/JS（适用WEB前端）

    一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在A ...

  3. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  4. heX：用HTML5和Node.JS开发桌面应用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. (转)heX——基于 HTML5 和 Node.JS 开发桌面应用

    本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...

  6. 淘宝前端工程师：国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  7. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  8. web前端开发工程师

    web前端开发工程师 百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...

  9. 绝对精品推荐做前端的看下：Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  10. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

随机推荐

  1. spring Security 使用

    1.pom文件引入 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  2. 33. Java对异常处理的两种方式

    声明异常 throw: 关键字,用于抛出一个指定的异常对象 必须写在方法内部.必须是Exception或Exception的子类对象 throws: 用于方法声明上,表示当前方法不处理该异常,提醒调用 ...

  3. linux篇之WC（word count）的使用概述

    Text. Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项] [文件1] [文件2] ... 2．命 ...

  4. Mac Google浏览器 Chrome

    Mac Google浏览器 Chrome https://590m.com/f/28636472-500465601-d4c369 (访问密码:7410)

  5. centos-7部署kafka-v2.13.3.0.1集群

    1.部署测试机器规划 ip         kafka 版本   zookeeper 版本 192.168.113.132        v2.13.3.0.1 v3.6.3 192.168.113. ...

  6. 实验：利用mqtt-spring-boot-starter实现后台云服务数据采集和远程控制

    1.资源地址及使用说明 https://search.maven.org/artifact/com.github.tocrhz/mqtt-spring-boot-starter/1.2.7/jar 2 ...

  7. python路径

    #1.获取默认路径import os print (os.path.abspath('.')) my_path = os.path.abspath('.') #2.读取数据 my_data = pd. ...

  8. 杭电OJ1029题C++实现

    解题思路:因为要求的数出现的次数总是比其他数字出现的次数多1,所以若总是用相同的数去与其他的数相抵,那么最后只剩下一个,那就是要求的数. 另外需要注意的一点就是,最好不要去开长度为999999的数组, ...

  9. 20192305 王梓全Python程序设计实验二报告

    20192305 王梓全Python程序设计实验二报告 课程:<Python程序设计> 班级: 1923 姓名: 王梓全 学号:20192305 实验教师:王志强 实验日期:2021年4月 ...

  10. 第08组Beta冲刺（2/4）

    队名 八组评分了吗 组长博客链接(2分) 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 12月9号了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 重新分配小组及个 ...