Electron Guide – quick start

Time:2020-11-26

quick get start

Electron provides a rich native (operating system) API that allows you to create desktop applications using pure JavaScript. And other kinds of Node.js The runtime difference is that electron focuses on desktop applications rather than web servers.

This does not mean that electron is a JavaScript library bound to a graphical user interface (GUI). Instead, electron uses web pages as its graphical interface, so you can also think of it as a mini Chrome browser controlled by JavaScript.

Main process

In electron, run package.json The process of the main script in theMain processThe script running in the main process can display the GUI by creating a web page.

Rendering Progress

Because electron uses chrome to display web pages, chrome’s multiprocessing architecture is also used. Each page in electron runs in its own process, which is calledRendering Progress
In a browser, web pages usually run in a sandbox environment, which cannot access local resources. But in electron, through the use of Node.js API can carry out the underlying operating system interaction.

The difference between the main process and the rendering process

The main process is constructed byBrowserWindowInstance to create a web page. eachBrowserWindowInstance runs the web page in its own rendering process. Be aBrowserWindowAfter being destroyed, the corresponding rendering process is also terminated.

The main process manages all web pages and related rendering processes. Each rendering process is isolated from each other and knows only the web pages running in that process.

It is not allowed to call the local GUI in the web page, because it is very dangerous to manage the local GUI resources in the web page, and it is very easy to cause resource leakage. If you want to perform GUI operations on a web page, the rendering process of the web page must request the main process to handle these operations by communicating with the main process.

In electron, the main process and the rendering process have many ways to communicate. such asipcRandererandipcMainThe module is used to send messages,remoteThe module supports RPC style communication. You can refer to the FAQHow to share data in different web pages

Write the first electron application

In general, the structure of an electron application is similar to the following:

your-app/
├── package.json
├── main.js
└── index.html

package.jsonThe format of is consistent with the module format of node, wheremainThe script specified in the field is the startup script you apply, which will run in the main process. Yourspackage.jsonIt might look like this example:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

be carefulIfpackage.jsonMediummainField is not specified, then electron will attempt to load aindex.jsScript.

main.jsWindows should be created and system events handled. A typical example is as follows:

const electron = require('electron');
//Modules that control the application lifecycle
const {app} = electron;
//Module for creating local browser windows
const {BrowserWindow} = electron;

//A global reference to the window object. If there is no such reference, then when the JavaScript object is garbage collected
//The window will close automatically
let win;

function createWindow() {
  //Create a new browser window
  win = new BrowserWindow({width: 800, height: 600});

  //And load the application's index.html page
  win.loadURL(`file://${__dirname}/index.html`);

  //Open the development tools page
  win.webContents.openDevTools();

  //Method called when the window is closed
  win.on('closed', () => {
    //In general, if you use multiple windows, you can dereference an array
    //Store the window object and delete the corresponding element when the window is closed.
    win = null;
  });
}

//When electron completes initialization and a browser window has been created, the method will be called.
//Some APIs can only be used after the event occurs.
app.on('ready', createWindow);

//Exit the application when all windows are closed
app.on('window-all-closed', () => {
  //For OS X, the application and the corresponding menu bar will be activated until the user explicitly exits via CMD + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  //For OS X system, when the dock icon is clicked, an app window will be created again, and there will be no other
  //The window opens
  if (win === null) {
    createWindow();
  }
});

//At the end of this file, you can directly include the code that your application specific is running by the main process.
//You can also put the code in another file and import it here.

lastindex.htmlYou want to show it in the window:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </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>

Run your app

Once you have established yourmain.js, index.html, andpackage.jsonFile, you may want to try running the app locally to test it to make sure it works the way you expect it to.

electron-prebuilt

electron-prebuiltIt’s anpmWhich contains a precompiled version of electron.

If you have passednpmIf the module is installed globally, you only need to run the following command in the source code directory of your application:

electron .

If you only have the module installed locally, run:

./node_modules/.bin/electron .

Download electron binary package manually

If you manually download the electron binary package, you can execute your application directly by executing the binaries contained in it.

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

thereElectron.appIt’s part of the electron distribution package, which you can use athereDownload.

Run release

After completing the application development, you can follow theApplication PublishingDirect the creation of a release and then execute the packaged application.

Try examples

through the use ofatom/electron-quick-startTo clone and run the tutorial code.

be carefulTo run this example, you need to install it on your systemGitas well asNode.js(it also includesnpm)。

#Clone warehouse
$ git clone https://github.com/electron/electron-quick-start
#Into the clone warehouse
$ cd electron-quick-start
#Install the dependencies and run the app
$ npm install && npm start

Translated fromhere