作者 | 派森酱
来源 | Python技术
Python 届的 GUI 有很多库,像鼎鼎大名的 Tkinter、PyGUI 等,但问题是他们生成的 GUI 都不够好看,有种上世纪应用程序的风格,完全不像是互联网时代的产品。
今天给大家推荐一个超级棒的工具 Electron,只需要懂一些简单的 html、css 和 js 知识就能写出跨平台的,互联网风格的应用。
大名鼎鼎的 Visual Studio Code 就是使用 Electron 来编写的。
安装
正式开始之前,需要安装 Node 环境,直接从官网下载 Node.js 安装即可。
安装完成之后请使用以下命令来确保自己的 Node 环境是正常的。
node -v
npm -v
之后开始初始化项目。
mkdir electron-app && cd electron-app
npm init
至此,在 electron-app 文件夹中会生成一个 package.json
的文件,它看起来应该是下面这个样子,每个字段代表什么含义暂时先不用管,继续往下走。
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
最后,将 electron
添加到应用的开发依赖中。
npm install --save-dev electron
修改 package.json
文件,添加运行应用的命令。
{
"scripts": {
"start": "electron ."
}
}
至此,环境我们是搭建完成了。
GUI
上面说了,Electron 是通过 html、css 和 js 来构建应用的,那我们首先来建一个 html 页面。
在根目录下创建 index.html 页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
页面写好了,还需要一个启动入口文件来加载我们的页面。
在根目录下新建 index.js 文件。
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
在 js 文件中我们通过创建一个 BrowserWindow 来加载我们指定的页面 index.html。
通过 npm 来启动我们的项目。
npm start
不出意外,你应该可以看到如下页面了。
总结
Electron 是一款非常成熟且好用的可跨平台桌面应用程序开发神器,虽说我们今天只实现了简单版本的 Hello World,但在前端的加持下,写出酷炫的紧跟时代潮流的 GUI 那就是分分钟的事。
那这个 GUI 如何和我们的 Python 程序做交互呢,其一通过 http 接口,其二可以直接执行 Python 的脚本,小伙伴们感兴趣的可以跟着官方文档继续深入研究。
往期回顾
分享
点收藏
点点赞
点在看