Python使用Eel和HTML开发桌面应用GUI直接用web前端的VUE+VANT来做
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的说明文档：
Python使用Eel和HTML开发桌面应用GUI直接用web前端的VUE+VANT来做的更多相关文章
- Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目
搭建angular开发环境 一.下载并安装node 官网地址:点击前往 二.利用npm安装cnpm 安装好node后就可以使用npm命令啦 查看版本:npm -v 安装cnpm:npm install ...
- gVIM+zencoding快速开发HTML/CSS/JS（适用WEB前端）
一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在A ...
- heX——基于 HTML5 和 Node.JS 开发桌面应用
heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...
- heX：用HTML5和Node.JS开发桌面应用
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- (转)heX——基于 HTML5 和 Node.JS 开发桌面应用
本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...
- 淘宝前端工程师：国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- web前端开发工程师
web前端开发工程师 百科名片 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进 ...
- 绝对精品推荐做前端的看下：Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...
- Web前端开发最佳实践（1）：前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
随机推荐
- （面试加分新技能） 总结11个ES2022中你可能遗漏的语法
与许多其他编程语言一样,JavaScript 也在不断发展,每年,该语言都会通过新功能变得更强大,让开发人员编写更具表现力和简洁的代码.让我们探索 ECMAScript 2022 (ES13) 中添加 ...
- gRPC中protobuff type和C# type原生标量对应表
查看Microsoft官方文档: Create Protobuf messages for .NET apps | Microsoft Docs
- 访问不了github解决方案
1.首先通过网址https://github.com.ipaddress.com/www.github.com查看当前github.com对应的IP地址,查到的信息如下图所示 修改hosts文件,wi ...
- Mac10.13-10.15 下玩星际争霸1.16
星际争霸DMG 存储在城通网盘,下载后挂载,复制到 应用程序 里就可以玩了 1, ctfile://xturlDG9QOlg_V29WOwI8UzEKZQdjUWEOOFJ7VCEHYFIxBzlTY ...
- 【ADB命令】安装app
在电脑上安装以下指令 adb install app的文件位置
- PostScript语言教程（四、程序变量使用）
4.1.变量定义 POSTSCRIPT 变量 变量的定义是将比那两名和值用def进行关联类似 /ppi 75 def %将ppi定义为75 /ppi ppi 1 add def %将ppi + 1的值 ...
- Required request part 'file' is not present
问题描述: @RequestMapping(value = "upload", method = RequestMethod.POST,consumes = MediaType.M ...
- Leetcode本地阅读器开发－－01界面设计三
这篇文章主要写一下怎样实现定类别查找. 1 void Widget::on_comboBox_currentIndexChanged(int index) 2 { 3 QString sortname ...
- Ext中数据表格序号超过3位数时显示省略号
问题 在老项目上优化时,遇到了Ext中ColumnModel序号超过3位数时,自动显示了省略号,不友好 修改方法 给RowNumberer添加样式 new Ext.grid.RowNumberer({ ...
- test image size
676KB - jpg 2.5M jpg 3.8M-jpg 4M