用Python开发桌面端软件:pywebview (框架) + Python (后端) + vue (前端) + pyinstaller (打包)
小纛 2024-10-04 12:33:10 阅读 52
遇到相关问题欢迎邮件交流(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),最好封装一下,处理好错误信息:
<code>try {
pywebview.api.xxx(params).then((res) => {
// ...处理后端返回的结果res...
console.log('成功执行');
}).catch((err) => {
// 如果Python执行抛出异常,会在这里处理
console.log(err.message)
})
} catch (err) {
// 如果js函数执行出错(如不存在xxx函数,或pywebview还没加载好)
// 会在这里处理
console.log(err.message)
}
要想在前端组件初始化时就调用后端函数(比如拉取一些初始化数据),要小心pywebview还没加载好,前端还找不到后端api。可以编写下面这个钩子,用runAfterPywebview(fn)
就可以确保fn在pywebview加载后再执行:
// 用于在检查pywebview加载完成后执行某个函数, timeInterval为检查间隔,timeLimit为检查超时时间
export function runAfterPywebview(fn, timeInterval = 100, timeLimit = 3000) {
let time2now = 0
let timer = setInterval(() => {
time2now += timeInterval
// 如果已经超时pywebview还没加载好,报错。
if (time2now > timeLimit) {
console.log({
message: 'pywebview加载超时',
showClose: true,
})
clearInterval(timer)
timer = null
return
}
// 没有超时,只有当pywebview加载好才执行fn。
if (window.pywebview != undefined) {
fn()
clearInterval(timer)
timer = null
return
}
}, timeInterval)
}
此外,还可能遇到其它问题,欢迎与笔者交流。
上一篇: Vue.js中的computed属性:高效的数据处理
下一篇: 几个不错的Icon库
本文标签
用Python开发桌面端软件:pywebview (框架) + Python (后端) + vue (前端) + pyinstaller (打包)
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。