用Python开发桌面端软件：pywebview (框架) Python (后端) vue (前端) pyinstaller (打包)

遇到相关问题欢迎邮件交流（1554610593@qq.com），或评论区留言（不过回应会很慢）。

单兵简单开发，Python 几乎可以满足所有需求。那么，2024 年了，想写一个简单的 windows 桌面端软件，点击 exe 打开运行的那种，并且所有后端业务都用 Python 编写，应该怎么做？请看这个笔者用 Python 开发的用于微信群聊拍卖统价的桌面端软件：

效果是很好的，既美观又好用，并且所有的业务代码都是用 Python 写的（诸如管理数据库、读取和写入 excel 表格、计算竞价）。

用 Python 编写桌面 GUI，可能最先想到的就是 pyQt、Tkinter 这种，但它们不是太臃肿，就是学习曲线高，而且功能局限，开发出的前端并不美观。

在开发前端方面，没有比 Web 网页开发更灵活强大的了，何况还有现成的 web 框架和海量的组件可以直接使用。但是，网页毕竟要在浏览器中打开，并不算一个封装好的桌面端软件。使用 Electron 倒是可以把网页浏览器伪装成一个桌面软件，但抛开学习成本不说，软件的业务层（也就是后端）是用 node.js 编写的，远没有 Python 灵活强大。

那么，2024 年了，能不能用 Web 网页做前端，Python 写后端，然后封装成一个桌面软件的样子呢？这样一来，只需要会 Python 和一点前端 js 框架，就可以写出一个美观又功能强大的桌面软件了。这就是笔者想推荐一种技术方案：pywebview (框架) + Python (后端) + vue (前端) + pyinstaller (打包)。目前也已经有大佬想到了这一套方案，并开发出了一个 框架 PPX，方便大家直接在此基础上开发。笔者用这套方案很方便地开发出了桌面端软件。

• pywebview是一个 Python 库，可以用 pip 直接安装，几行 Python 代码就能把一个网页伪装成桌面窗口打开。原理是调用了系统的浏览器内核，打开了一个浏览器窗口来渲染网页。最神奇的是，它允许前端 js 中直接调用后端用 Python 编写的函数。具体的实现方式是在 Python 中编写一个 api 类，业务代码写成它的成员函数 xxx，pywebview 在创建窗口时接收这个 api 类和前端网页作为参数，然后你就可以在前端 js 代码中直接用 pywebview.api.xxx 去调用 Python 函数。
• vue是最流行的前端 Web 框架之一，它的优点是上手简单，template 和原生 html 很像，js 的编写简单（尤其是新版本的 vue 支持组合式 API 写法），同时还有 Element Plus 等配套的 UI 组件库可以使用。
• Python实现后端业务有诸多好处，最重要的是 Python 有丰富的库可以直接调用，功能非常强大。Python 也有 Django 等前后端开发框架，但是这种传统的 web 开发模式的前后端是通过网址 api 的方式通信的。而在 pywebview 下，前端可以直接调用后端 Python 函数，前后端的通信 pywebview 都帮你封装好了，开发者可以专注于用 Python 进行业务功能实现。
• 项目写好后，将 vue 项目打包成一个小巧的文件夹（包含 html 和 js 等），pywebview 中的前端指向该文件夹就可以将其渲染出来。由于其它部分都是用 Python 编写的，可以用 pyinstaller 将其打包成一个 exe 文件。

这套方案在框架 PPX 中已经帮你跑通了，感兴趣的读者可以去仔细研究一下这个框架的源码，相信也能自己用 Python 捣鼓出一个桌面端软件。但其中肯定也会遇到一些坑，诸如笔者遇到过的这些：

• 项目打包后，窗口打开白屏。在开发阶段 vue 网页都打开正常，但最后用 vite 生成了 html 和 js，并打包好了 exe 文件，打开就白屏了。这个时候最好在 pywebview 的参数里设置保留控制台，这样打开窗口后可以按 F12 查看控制台（没错，就是 chrome 浏览器的那个控制台），看看是什么报错。如果也没什么报错，可能就是 vite 打包的问题，笔者就遇到了 vite 引起的和 pywebview 不对付的情况。所以还是推荐用之前的 Vue CLI 脚手架来搭建和生成 vue 项目吧，vite 确实有一些坑。
• 打包时间太长，生成的 exe 过大。pyinstaller 打包也很有讲究，如果不是在新建的 Python 环境中打包，很可能把很多无关的 Python 库也打包进来。建议感兴趣的读者去研究一下 PPX 的作者是怎么处理的，不懂的也可以评论区留言。
• 关于 在 js 中调用 pywebview 的 Python 函数，还有一些讲究的：
  • pywebview 会自动将 js 的数据类型和 Python 的数据类型进行转换。具体的，函数返回的 Python 对象都将被 jsonify，就是转换成 json 格式发给前端，所以只有 list、dict 等这类基础类型可以在前后端之间传递。其它类型要想办法转换成可以变成 json 的再传递。
  • 在 js 调用后端 api 函数 (比如 xxx)，最好封装一下，处理好错误信息：

    try {
        pywebview.api.xxx(params).then((res) => {
        	
            console.log('成功执行');
        }).catch((err) => {
        	
            console.log(err.message)
        })
    } catch (err) {
    	
    	
        console.log(err.message)
    }
    

  • 要想在前端组件初始化时就调用后端函数（比如拉取一些初始化数据），要小心 pywebview 还没加载好，前端还找不到后端 api。可以编写下面这个钩子，用 runAfterPywebview(fn) 就可以确保 fn 在 pywebview 加载后再执行：

    
    export function runAfterPywebview(fn, timeInterval = 100, timeLimit = 3000) {
        let time2now = 0
        let timer = setInterval(() => {
            time2now += timeInterval
            
            if (time2now > timeLimit) {
                console.log({
                    message: 'pywebview 加载超时',
                    showClose: true,
                })
                clearInterval(timer)
                timer = null
                return
            }
            
            if (window.pywebview != undefined) {
                fn()
                clearInterval(timer)
                timer = null
                return
            }
        }, timeInterval)
    }
    

此外，还可能遇到其它问题，欢迎与笔者交流。