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年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
随机推荐
- yii框架中 不能正确正常使用phpredis 路径安装好后还是报 Class yii\redis\Connection does not exist！
1,成功解决方案 在yiisoft / extensions.php 中添加如下数组 指向目录 'yiisoft/yii2-redis' =>array( 'name'=>'yi ...
- 复制 GUI 状态
FORM frm_set_pf_status USING pt_extab TYPE slis_t_extab. *--·状态 'STANDARD'是从系统功能组 KKBL GUI状态下的" ...
- kiaba启动报 FATAL ResponseError: access_control_exception，ES报：java.lang.SecurityException: access denied ("java.io.FilePermission"“文件地址”)
查了许多博客,找的头都大了还是没有发现问题的根源,之前以为是插件包文件名改了之后还是一样,当我差点放弃的时候 一位博主的瞬间把我点醒https://www.cnblogs.com/personblog ...
- Text文件颜色渐变
using UnityEngine;using System.Collections;using System.Collections.Generic;using UnityEngine.UI;usi ...
- element-ui casader组件动态加载的回显问题
最近在做项目的时候用到了element-ui的cascader来做省市区的级联显示 我要做的需求就是在选择某个省的时候,再去加载省下面的所有市,在实现这个需求的过程中遇到了二级菜单不能反显的情况.以下 ...
- IDEA给【类】和【方法】设置作者和日期等注释
https://blog.csdn.net/m0_61933976/article/details/127021176 一.在Java类的开头自动注释作者名字和日期等信息 这样以后只要我们创建一个类, ...
- svn批量忽略文件夹和批量忽略某种类型文件方法
批量忽略文件夹: 最简单的方法:不勾选这个 1.在svn管理的根目录下点击右键---> TortoiseSVN --> properties 2.点击new-->other 3.在p ...
- Authentication is required to set the network proxy
在使用VNC访问集群的时候,总是弹出"Authentication is required to set the network proxy used for downloading pac ...
- Jenkins项目中的Performance Trend图表不显示
权限问题:chmod 777 /.../*.jtl 其中上述目录为jmeter生成jtl格式的结果报告的路径,也就是ant对应build.xml里配置好的路径.
- 创建Django项目的两种方式
有两种方式可创建django项目: 方式一:命令行 1. cmd 命令行,进入到指定的目录,执行:django-admin startproject mydiary [mydiary 为项目名],创建 ...