当前位置：网站首页>2. Electron's HelloWorld

2. Electron's HelloWorld

2022-04-23 17:09:00 【Curious rookie】

The official tutorial ：https://www.electronjs.org/docs/latest/tutorial/quick-start

Environment building ：1.Electron Development environment construction

Fast experience ：

#  Clone the warehouse 
$ git clone https://github.com/electron/electron-quick-start
#  Enter warehouse 
$ cd electron-quick-start
#  Install dependent libraries and run applications 
$ npm install && npm start

Write your own

One 、HelloWorld Interface writing

1、 Create a new working directory ：F:\study\electron\helloworld

2、 Use editor (VScode) Open the working directory and create a new one index.html file

3、 Write interface content

html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    HelloWorld
</body>
</html>

Two 、 To write main.js, introduce electron Work

var electron = require('electron') // introduce electron Components 

var app = electron.app // Import components app

var BrowserWindow = electron.BrowserWindow // Window reference 

var mainWindow = null // Declare open window 

app.on('ready', () => { //app Initialize parameters 
    mainWindow = new BrowserWindow({ windth: 800, height: 800 })
    mainWindow.loadFile('index.html') // Open the page loaded by the window 
    mainWindow.on('close', () => { // When the window is closed , Release the page 
        mainWindow = null
    })
})