来源：Python 技术
今天给大家推荐一个超级棒的工具 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 .'
}
}
至此，环境我们是搭建完成了。
上面说了，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 的脚本，小伙伴们感兴趣的可以跟着官方文档继续深入研究。
更到玩法请参考 https://www.electronjs.org/
重磅！程序员交流群已成立
公众号运营至今，离不开小伙伴们的支持。
为了给小伙伴们提供一个互相交流的平台，特地开通了程序员交流群
群里有不少技术大神，不时会分享一些技术要点，更有一些资源收藏爱好者不时分享一些优质的学习资料。（群完全免费，不广告不卖课！）
联系客服
