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. pycharm 默认添加# -*-coding: utf-8 -*-

    备忘 pycharm创建py文件时,默认输入表头信息 1.点击[File]-[Settins] 2.点击[Editor]-[File and Code Templates] 3.点击[Python S ...

  2. Android EditText的onEditorAction监听事件防止执行两次

    Android的EditText通过setOnEditorActionListener给文本编辑框设置监听事件,但是在其处理方法onEditorAction中的逻辑在每次回车后都触发了两次,这是因为在 ...

  3. 简易FTP

    老男孩----上海校区 简易FTP 客户端端 import socket import struct import json import os class MYTCPCLIENT: address_ ...

  4. cadence报错because the library part is newer than the part in the design cache.Select the part in the cache and choose Design-Update Cache，and then place the part again.

    cadence报错because the library part is newer than the part in the design cache.Select the part in the ...

  5. 使用vite创建vue3+ts项目完整流程

    1.创建项目 npm init vite@latest 依次输入项目名称.选择vue.选择ts 2.引入依赖 cd 项目名称 npm install 3.启动项目 npm run dev 4.引入vu ...

  6. holiday05

    第五天 cat cat会一次性显示所有的内容,适合查看 内容较少 的文本文件 选项 含义 -b 对非空输出行编号 -n 对输出的所有行编号 more more每次只显示一页内容,适合于查看 内容较多 ...

  7. python写入sqlserver中文乱码问题

    需求是python3开发,数据库是sqlserver,第一次用python操作sqlserver,写入数据时,中文全部变成了?? 试了pyodbc,但缺少sqlserver驱动 试了sqlStr.en ...

  8. Activiti工作流引擎系列-第二篇

    官网案例下载安装实例 { "info": { "_postman_id": "64f2d7ca-8287-4f8d-94ba-1138861877dd ...

  9. linux缓冲区溢出尝试

    #include <stdio.h>#include <string.h>char Lbuffer[] = "01234567890123456789======== ...

  10. 19 request请求数据大全

    1 request.path_info # 获取当前用户请求的url # http://127.0.0.1:8000/customer/list/ ----> /customer/list/ # ...