丟棄 Tkinter！簡(jiǎn)單配置快速生成超酷炫 GUI！
文 | 豆豆
來(lái)源：Python 技術(shù)「ID: pythonall」
Python 屆的 GUI 有很多庫(kù)，像鼎鼎大名的 Tkinter、PyGUI 等，但問題是他們生成的 GUI 都不夠好看，有種上世紀(jì)應(yīng)用程序的風(fēng)格，完全不像是互聯(lián)網(wǎng)時(shí)代的產(chǎn)品。
今天給大家推薦一個(gè)超級(jí)棒的工具 Electron，只需要懂一些簡(jiǎn)單的 html、css 和 js 知識(shí)就能寫出跨平臺(tái)的，互聯(lián)網(wǎng)風(fēng)格的應(yīng)用。
大名鼎鼎的 Visual Studio Code 就是使用 Electron 來(lái)編寫的。
安裝
正式開始之前，需要安裝 Node 環(huán)境，直接從官網(wǎng)下載 Node.js 安裝即可。
安裝完成之后請(qǐng)使用以下命令來(lái)確保自己的 Node 環(huán)境是正常的。
node -v
npm -v
之后開始初始化項(xiàng)目。
mkdir electron-app && cd electron-app
npm init
至此，在 electron-app 文件夾中會(huì)生成一個(gè) package.json 的文件，它看起來(lái)應(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 來(lái)構(gòu)建應(yīng)用的，那我們首先來(lái)建一個(gè) html 頁(yè)面。
在根目錄下創(chuàng)建 index.html 頁(yè)面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
頁(yè)面寫好了，還需要一個(gè)啟動(dòng)入口文件來(lái)加載我們的頁(yè)面。
在根目錄下新建 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 來(lái)加載我們指定的頁(yè)面 index.html。
通過 npm 來(lái)啟動(dòng)我們的項(xiàng)目。
npm start
不出意外，你應(yīng)該可以看到如下頁(yè)面了。
總結(jié)
Electron 是一款非常成熟且好用的可跨平臺(tái)桌面應(yīng)用程序開發(fā)神器，雖說我們今天只實(shí)現(xiàn)了簡(jiǎn)單版本的 Hello World，但在前端的加持下，寫出酷炫的緊跟時(shí)代潮流的 GUI 那就是分分鐘的事。
那這個(gè) GUI 如何和我們的 Python 程序做交互呢，其一通過 http 接口，其二可以直接執(zhí)行 Python 的腳本，小伙伴們感興趣的可以跟著官方文檔繼續(xù)深入研究。
更到玩法請(qǐng)參考 https://www.electronjs.org/
如果有不理解的地方可以自己動(dòng)手嘗試一下，也可以通過直接私信交流。感謝支持。
掃碼即可加我微信
學(xué)習(xí)交流
老表朋友圈經(jīng)常有贈(zèng)書/紅包福利活動(dòng)
萬(wàn)水千山總是情，點(diǎn)個(gè) ?? 行不行。