Electron is a framework for building desktop applications using js, html, and css. Electron can be used to develop Windows and Mac applications.
Install nodejs, npm, cnpm
First, you need to install nodejs, npm and cnpm. After installation, enter node -v and npm -v on the command line. If the version number is output, it means that it has been installed normally.
Enter the command to install cnpm, and cnpm will download the third-party library faster.
npm install -g cnpm --registry=https://registry.npm.taobao.org
install electron
cnpm install -g electron
Enter the command electron -v, if the version number is output, it means that electron has been installed successfully.
New Construction
Name the new directory electronDemo, use npm init -y to create a new front-end project, and add a line "main": "main.js" to package.json, which means that the entry point of the application is the main.js file.
{
"name": "electronDemo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^22.1.0"
}
}
Create a new index.html file in the electronDemo directory, and add the line hello, electron! to the body.
<!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>Document</title>
</head>
<body>
hello, electron!
</body>
</html>
Create a new main.js file in the electronDemo directory, and add content to the main.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()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.whenReady() is a Promise after the app starts. Use then to monitor the corresponding state. Add the createWindow function in this callback. createWindow creates a new browser window, sets the width and height, and uses the browser window to load the index.html file .
Run the npm run start command on the terminal, and the electron application window can pop up normally.
Commissioning project
The electron application has two processes at runtime, the rendering process and the main process. If you are debugging web page code, you can directly use the shortcut key, Option+Command+I on macOS, to evoke the debugging interface.
If you want to debug the code in main.js, you need to use VSCode to open the project, click the debug menu on the left, and create a launch.json file.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args" : ["."]
}
]
}
Add a breakpoint in the callback of app.whenReady() in the main.js file, click the start program button in the debug area, and the breakpoint can be executed normally.