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. vue 生命周期个人理解

    activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发:可用于初始化页面数据等: created():在模板渲染成html前调用,即通常初始 ...

  2. No.1.7

    网页制作流程 创建根目录(网站的第一级文件夹) 1.图片文件夹:images 2.样式文件夹:CSS 3.首页:index.html <!-- 网站的首页 所有网站的首页都叫index.html ...

  3. antd DatePicker限制日期的选择

    import React from 'react'; import ReactDOM from 'react-dom'; import {Input,DatePicker,Form,Col,Butto ...

  4. Echart 使用

    查看前端面试题小程序 大量面试题和答案,请微信查看 // var list = [1,1,54,5,5,85,8,8,5,5,8,8,85,8,8,5,5,85,88,85,8,88,8,8,8,8, ...

  5. C++ 读取文本, 读取( 单字符/ 一行/ 全部 )

    C++ 读取文本 介绍三种读取方式: 逐字符读取(注意不是字节) 读取一行 读取全部 示例代码: #include <iostream> #include <string> # ...

  6. Docker emqx实践

    把emqx服务迁移到另一台服务器上 1.新服务器安装docker apt  install docker.io 1.从服务器上导出镜像 导出镜像文件: docker export 55d48d3a13 ...

  7. alertmanger告警配置

    钉钉告警: 需先安装 Ding talk 配置 webhook vim docker-compose.yaml webhook-dingtalk: image: timonwong/prometheu ...

  8. vim 基础

    光标移动(命令模式的上下左右):k,j,h,l 保存/退出 仅保存::w 退出::q(如果有修改要先保存) 保存并退出::wq(x效果一致) 强制退出::q! 模式 命令模式:esc(当前需要处于插入 ...

  9. el-table 如果文字过多展示...

    1 <el-table-column label="任务名称" width="120px" align="center" :show- ...

  10. flutter json_serializable数据模型的建立和封装

    为了方便数据使用,我们将服务器拿到的数据转换为map类型,但是在使用是大量的数据会让使用map时头大,比如每个map都key都需要手动输入,很是麻烦. 本文使用了json_serializable将m ...