作者：豆豆
來源：Python 技術(shù)
Python 屆的 GUI 有很多庫，像鼎鼎大名的 Tkinter、PyGUI 等，但問題是他們生成的 GUI 都不夠好看，有種上世紀(jì)應(yīng)用程序的風(fēng)格，完全不像是互聯(lián)網(wǎng)時(shí)代的產(chǎn)品。
今天給大家推薦一個(gè)超級(jí)棒的工具 Electron，只需要懂一些簡單的 html、css 和 js 知識(shí)就能寫出跨平臺(tái)的，互聯(lián)網(wǎng)風(fēng)格的應(yīng)用。
大名鼎鼎的 Visual Studio Code 就是使用 Electron 來編寫的。
安裝
正式開始之前，需要安裝 Node 環(huán)境，直接從官網(wǎng)下載 Node.js 安裝即可。
安裝完成之后請使用以下命令來確保自己的 Node 環(huán)境是正常的。
node -v npm -v
之后開始初始化項(xiàng)目。
mkdir electron-app && cd electron-app npm init
至此，在 electron-app 文件夾中會(huì)生成一個(gè) package.json 的文件，它看起來應(yīng)該是下面這個(gè)樣子，每個(gè)字段代表什么含義暫時(shí)先不用管，繼續(xù)往下走。
{ "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 添加到應(yīng)用的開發(fā)依賴中。
npm install --save-dev electron
修改 package.json 文件，添加運(yùn)行應(yīng)用的命令。
{ "scripts": { "start": "electron ." }
}
至此，環(huán)境我們是搭建完成了。
GUI
上面說了，Electron 是通過 html、css 和 js 來構(gòu)建應(yīng)用的，那我們首先來建一個(gè) html 頁面。
在根目錄下創(chuàng)建 index.html 頁面。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
頁面寫好了，還需要一個(gè)啟動(dòng)入口文件來加載我們的頁面。
在根目錄下新建 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 文件中我們通過創(chuàng)建一個(gè) BrowserWindow 來加載我們指定的頁面 index.html。
通過 npm 來啟動(dòng)我們的項(xiàng)目。
npm start
不出意外，你應(yīng)該可以看到如下頁面了。
總結(jié)
Electron 是一款非常成熟且好用的可跨平臺(tái)桌面應(yīng)用程序開發(fā)神器，雖說我們今天只實(shí)現(xiàn)了簡單版本的 Hello World，但在前端的加持下，寫出酷炫的緊跟時(shí)代潮流的 GUI 那就是分分鐘的事。
那這個(gè) GUI 如何和我們的 Python 程序做交互呢，其一通過 http 接口，其二可以直接執(zhí)行 Python 的腳本，小伙伴們感興趣的可以跟著官方文檔繼續(xù)深入研究。
京公網(wǎng)安備 11010802034615號(hào)