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

Discard Tkinter! Simple configuration to quickly generate cool GUI!

2022-06-28 10:02:00 【AI technology base camp】

36b796fc12c9cbf64c70af2f6fd9cb74.gif

author |  Parson sauce

source | Python technology

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 .

e6874f234a94f66aafbbcc501376dcd7.png

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 .

5e2a877c36774b044a8beec0b0a47632.gif

Looking back

Matplotlib Two methods of drawing torus ！

13 individual python Necessary knowledge , Recommended collection ！

2D Transformation 3D, Look at NVIDIA's AI“ new ” magic ！

Get it done Python Several common data structures ！

 Share 
 Point collection 
 A little bit of praise 
 Click to see
原网站

版权声明
本文为[AI technology base camp]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206280946316930.html

边栏推荐

猜你喜欢

随机推荐