丢弃 Tkinter！简单配置快速生成超酷炫 GUI！

Posted 2022-06-29 AI科技大本营

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了丢弃 Tkinter！简单配置快速生成超酷炫 GUI！相关的知识，希望对你有一定的参考价值。

作者 | 派森酱

来源 | 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 来启动我们的项目。