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

36b796fc12c9cbf64c70af2f6fd9cb74.gif

作者 | 派森酱

来源 | 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

不出意外,你应该可以看到如下页面了。

e6874f234a94f66aafbbcc501376dcd7.png

总结

Electron 是一款非常成熟且好用的可跨平台桌面应用程序开发神器,虽说我们今天只实现了简单版本的 Hello World,但在前端的加持下,写出酷炫的紧跟时代潮流的 GUI 那就是分分钟的事。

那这个 GUI 如何和我们的 Python 程序做交互呢,其一通过 http 接口,其二可以直接执行 Python 的脚本,小伙伴们感兴趣的可以跟着官方文档继续深入研究。

5e2a877c36774b044a8beec0b0a47632.gif

往期回顾

Matplotlib绘制圆环图的两种方法!

13个python必备的知识,建议收藏!

2D变身3D,来看英伟达的AI“新”魔法!

搞定Python几个常用的数据结构!

分享
点收藏
点点赞
点在看
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值