Electron movement of
Electron is a front-end framework developed by Github for developing desktop applications
The development environment
Installation node. Js
Nodejs download address
In order to avoid the impact of network problems on Node operation, we install the domestic Node image CNPM.
npm install -g cnpm --registry=https://registry.npm.taobao.org
Install the electron
npm install --save-dev electron
Or global installation
npm install -g electron
The development tools
VSCode
In fact, vscode was developed at electron
Develop a simple electron
Electron is developed using JavaScript and works in the same way as Node.js. The electron module contains all the apis and functions provided by electron, and is introduced in the same way as the normal Node.js module:
const electron = require('electron')
Copy the code
The functions provided by the ELECTRON module are exposed through the namespace. For example, electron. App manages the life cycle of the electron application, and the electron.BrowserWindow class creates Windows. Here is a simple main.js file that will open a window when the application is ready:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create a browser window
let win = new BrowserWindow({
width: 800.height: 600.webPreferences: {
nodeIntegration: true}})// Load the index.html file
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
Copy the code
Create the index.html you want to display:
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<! -- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Copy the code
Start the
We have already written the startup command in package.json, so we can just start node with NPM start, or use electron if not configured. Command start.
Main process and renderer process
We can understand that the entry file defined in package.json is the main process. There is usually only one main process per application, but we can use one main process to open multiple child Windows.
Since Electron uses Chromium to present Web pages, Chromium’s multi-process architecture is also used. Each Web page in Electron runs in its own render process, which we call the render process.
That is, the master process controls the renderer process, and a master process can control multiple renderers.
You should create Windows in main.js and handle any system events you might encounter in your program. Now we’ll refine the example by adding the following features: open developer tools, handle window closing events, rebuild Windows when macOS users click on the dock icon, and add main.js like this:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create a browser window
const win = new BrowserWindow({
width: 800.height: 600.webPreferences: {
nodeIntegration: true}})// And load index.html for your application
win.loadFile('index.html')
// Open the developer tool
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
// This event is emitted when all Windows are closed.
app.on('window-all-closed', () = > {// On macOS, unless the user explicitly exits with Cmd + Q,
// Otherwise, most apps and their menu bar remain active.
if(process.platform ! = ='darwin') {
app.quit()
}
})
app.on('activate', () = > {// On macOS, when you click the Dock icon and no other Windows open,
// Usually a window is recreated in the application.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. It can also be split into several files and imported with require.
Copy the code
Git above the demo example
#Clone the warehouse.
git clone https://github.com/electron/electron-quick-start
#Entering the warehouse
cd electron-quick-start
#Installing dependent libraries
npm install
#Run the application
npm start
Copy the code
Electron – Forge build project
#Install electron forge globally
npm install electron-forge -g
#Initialize a project with electron forge
electron-forge init demo02
#Go to the project directory
cd demo02
#Start the project
npm start
Copy the code