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