Mainly refer to the electron official website, plus some of my own understanding, mainly for my own learning, thank you, please give advice if you have any questions.

What is the electron

  • Build cross-platform desktop applications using JavaScript, HTML, and CSS
  • Electron is based on Chromium and Node.js
  • Electron is compatible with Mac, Windows, and Linux and can build applications for all three platforms.

A simple electron project

The premise

First you need to have a Node environment, nodeJS

node -v
npm -v 
Copy the code

The directory structure

My-electronic-app / ├─ package.json Package. json is in exactly the same format as Node, and the script file declared by the main field is the startup script for your application, which runs on the main process. ├─ main.js // This is the main process ├─ index.html // This is equivalent to the rendering processCopy the code

The source file

main.js

const { app, BrowserWindow } = require("electron");

// Create an 800
function createWindow() {
  const win = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      nodeIntegration: true.// This means that you can use node packages in web pages}}); win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed".() = > { // You added a new listener to try to exit when the application no longer has any open Windows. This listener is disabled on macOS due to the window management behavior of the operating system.
  if(process.platform ! = ="darwin") { app.quit(); }}); app.on("activate".() = > { // You add a new listener and create a new browser window only if there is no visible window after the application is activated.
  if (BrowserWindow.getAllWindows().length === 0) { createWindow(); }});Copy the code

package.json

{
  "name": "2020-01-07"."version": "1.0.0"."description": ""."main": "main.js".// Delete this comment when you need to perform a JS copy
  "scripts": {
    "start": "electron ."
  },
  "author": ""."license": "ISC"."devDependencies": {
    "electron": "^ 11.1.1." "}}Copy the code

Index.html

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>

</html>
Copy the code

Execute the code

npm i --save-dev electron
npm start
Copy the code

The results

Basic knowledge of

Electron contains three cores

- **Chromium** for displaying web content. - **Node.js** for local file systems and operating systems. - ** Custom APIs** for using OS native functions that are often needed. (For working with often-needed OS native functions.)Copy the code

It’s seen as a lite version of Chromium browser controlled by JavaScript

Main process and renderer process

- The main process can 'create' a web page by creating **BrowserWindow** instances. Each instance of 'BrowserWindow' runs the web page during its rendering process. When an instance of 'BrowserWindow' is destroyed, the corresponding rendering process is terminated.Copy the code
  • The main process manages all web pages and their corresponding renderers.
- The renderer process can only manage ** the corresponding page, the crash of one renderer does not affect other renderers. - The renderer communicates with the main process ** * via IPC to perform GUI operations on the web page. Calling native GUI-related apis directly from the renderer process is limited due to security and possible resource leakage.Copy the code

Communication between processes can take place through inter-Process Communication(IPC) modules: ipcMain and ipcRenderer

Example of using IPC communication

Modify index.html and main.js

index.html

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body style="background: white;">
    <script>
        const {
            ipcRenderer
        } = require('electron')
        console.log(ipcRenderer.sendSync('synchronous-message'.'I sent it to my second listener.'), 1212)
        ipcRenderer.send('asynchronous-message'.'I'm sender 2, I'm sending this to my first listener.')
        ipcRenderer.on('asynchronous-reply'.(event, arg) = > {
            console.log('Render process receives reply :', arg) 
        })
    </script>
</body>

</html>
Copy the code

main.js

const { app, BrowserWindow, ipcMain } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      nodeIntegration: true.contextIsolation: false,}}); win.webContents.openDevTools(); win.loadFile("index.html");
}

app.whenReady().then(createWindow);

app.on("window-all-closed".() = > {
  if(process.platform ! = ="darwin") { app.quit(); }}); app.on("activate".() = > {
  if (BrowserWindow.getAllWindows().length === 0) { createWindow(); }});// There are two ways to reply
ipcMain.on("asynchronous-message".(event, arg) = > {
  console.log('Main process listener 1:', arg); 
  event.reply("asynchronous-reply"."Main process: This is what I replied.");
});

ipcMain.on("synchronous-message".(event, arg) = > {
  console.log('Main process listener 2:',arg); 
  event.returnValue = "Reply to sender 1";
});
Copy the code

Render process printing

Main process print

This is the whole content, the rest is the various functional modules and packaging deployment content, is also the most important

If you think my article is ok, click a like or follow the next, there are wonderful stories waiting for you oh, but also can cloud masturbation cat