当前位置：网站首页>Discard Tkinter! Simple configuration to quickly generate cool GUI!

Discard Tkinter! Simple configuration to quickly generate cool GUI!

2022-06-29 13:46:00 【Python Technology】

writing | doug

source ：Python technology 「ID: pythonall」

Python Session of the GUI There are lots of libraries , Like the famous Tkinter、PyGUI etc. , But the problem is that they generate GUI Not good-looking enough , There is a style of last century applications , It doesn't look like a product in the Internet age .

Today I recommend a super tool Electron, Just need to know some simple html、css and js Knowledge can write cross platform , Internet style applications .

big-name Visual Studio Code Is the use of Electron To write the .

install

Before the official start , Need to install Node Environmental Science , Download directly from the official website Node.js Can be installed .

After the installation, please use the following command to ensure your Node The environment is normal .

node -v
npm -v

Then start initializing the project .

mkdir electron-app && cd electron-app
npm init

thus , stay electron-app A... Will be generated in the folder package.json The file of , It should look like this , The meaning of each field does not matter for the time being , Keep going down .

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Last , take electron Add to the development dependency of the application .

npm install --save-dev electron

modify package.json file , Add the command to run the application .

{
  "scripts": {
    "start": "electron ."
  }
}

thus , The environment has been built .

GUI

It says ,Electron It's through html、css and js To build an application , Let's build one first html page .

Create in the root directory index.html page .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

The page is finished , We also need a startup entry file to load our page .

New in the root directory index.js file .

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()
})

stay js In the file, we create a BrowserWindow To load the page we specified index.html.

adopt npm To start our project .

npm start

No accident , You should see the following page .

summary

Electron It is a very mature and easy-to-use cross platform desktop application development artifact , Although we have only implemented a simple version of Hello World, but With the blessing of the front end , Write cool and follow the trend of the times GUI That's a matter of minutes .

So this one GUI How to communicate with our Python Programs interact with each other , First pass http Interface , Second, it can be executed directly Python Script for , If you are interested, you can follow the official documents to continue in-depth study .

For more details, please refer to https://www.electronjs.org/

PS： Reply within company number 「Python」 You can enter Python Novice learning communication group , Together 100 Day plan ！

Old rules , Brothers, remember , Right lower corner “ Looking at ” click , If you think the content of the article is good , Remember to share the circle of friends and let more people know ！