This is the 12th day of my participation in the More text Challenge. For details, see more text Challenge

1. What is Electron

(1) Electron is an open source framework developed by Github

(2) It allows developers to build cross-platform desktop applications using Web technologies

Electron + Chromium + Node.js + Native API

Electron who uses: Atom, VSCode, Whatsapp, WordPress, slack, elephantCopy the code

(3) principle

Electron is designed based on Chromium architecture, Chrominum is an open source version of Chrome, with its own Windows, Tab pages, tabs and so on, and the process of dealing with these matters we call: main process, Browser, corresponding to each page rendering process, we call: Render process, Render. Two processes need to communicate with each other, that is, cross-process communication, which we call: IPC, Node.js and Chromium integration: Nodejs event loop to libuv, Chromium based on message-pump Chromium integrated into NodeJS, with Libuv message PumpCopy the code
Eelctron Native QT NW
performance 1 3 2 1
Installation Package Size 1 3 1 1
Native experience 1 3 2 1
cross-platform 3 1 3 3
Development efficiency 3 2 2 2
Community, talent pool 3 2 1 2

If you want to make a cross-platform app: If you want speed and speed, Electron is the best choice, and if you want a Native experience, Native is the best choice

Node -v v14.16.1 NPM -v 6.14.12Copy the code

Quick installation method:

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/ npm install electron --save-devVerification after installation: NPX electron -V V131.2.
Copy the code

2, the Electron module

Import module. Each process can be imported in the Electron module

// Introduce the main thread app, BrowserWindow module
const {app, BrowserWindow } = require('electron') 
// Introduce the rendering process ipcRenderer module
const { ipcRenderer } = require('electron')

// The rendering process sends a request to the main process
ipcRenderer.invoke().then(result= > {
    handleResult()
})
Copy the code

  • The App module is used to control the application life cycle,

  • BrowserWindow is used to create and control Windows

    Let win=new BrowserWindow({width, height}). // Create the window and set the width and height

    Win.loadurl (URL) // Loads the remote URL page

    Win.loadfile (path) // Loads the local page

  • Notification

    let notification = new Notification({title, body, actions:[{text,type}]})

​ Notification.show()

  • Ipcmain.handle (channel, handler) // Handles the channer request of the rendering process and returns the result in handler

3, Electron process

(1), the main process

  • Electron The process that runs the package.json main script is called the master process

  • There is only one main process per application

  • Manage native GUI, typical Windows

  • Creating the Render process

  • Control the application lifecycle

    (1) Rendering process

  • The process that presents the Web page is called the rendering process

  • Through Node’s, electron provides apis that interact with the system’s lower layers

  • A electron application can have multiple render processes

There are many modules in each process

Main process module:

App: manages the life cycle of the app, BrowserWindow: manages our window ipcMain: it's the Menu for IPC communication with ipcRenderer: We can make an interactive Notification webContents for loading our specific page autoUpdater: To update module globalShortcut: SystemPreferences TouchBar netLog powerMonitor inAppPurchase net powerSaveBlocker contentTracing BrowserView session protocol ScreenCopy the code

Rendering process:

IpcRenderer Remote: the module that can call our main process desktopCapture: Capture our desktop stream, desktop screenshot webFrameCopy the code

Modules for both processes:

Clipboard: used to access and read and write our clipboard. CrashReporter: Used to monitor whether our main process and rendering process crash shell nativeImageCopy the code

3. Process communication

(1) Purpose of interprocess communication

  • Notification event
  • The data transfer
  • Shared data

IpcMain and ipcRenderer are Both EventEmitter objects. Electron provides the IPC communication module, ipcMain for the main process and ipcRenderer for the rendering process

(2) From rendering process to main process

ipcRenderer.invoke(channel, ... args) ipcMain.handle(channel, handler)Copy the code

(3) From the main process to the rendering process

ipcRenderer.on(channel, handler)
webContents.send(channel)
Copy the code

(4) Communication between pages (between rendering processes and rendering processes)

Notification event:

ipcRenderer.sendTo()
Copy the code

Data sharing:

Web Technology (localStorage, sessionStorage, indexedDB)Copy the code

4, hit the pit

  • Use the Remote module sparingly
  • No, sync mode
  • In the request + response communication module, you need to customize the timeout limit

5, Electron primary capacity

GUI

  • BrowserWindow Application window

  • Tray Tray

  • Set the dock app. Badge

  • The Menu Menu

  • Dialog Native dialog box

  • TouchBar

    API

  • The clipboard clipboard

  • GlobalShortcut globalShortcut

  • DesktopCapture Captures the desktop

  • The Shell opens the file, URL

LazyLoad(https://mathiasbynens.be/demo/img-loading-lazy)
Copy the code

6. Compare to the Web

  • There is no browser compatibility problem
  • Latest Browser Feature
  • ES Advanced Grammar
  • No cross-domain problems
  • Powered by Node.js

7, in actual combat

1, the installation

ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/ NPM install electron - save - dev installation after validation: NPX electron - vCopy the code

Main.js

// Introduce the main thread app, BrowserWindow, ipcRenderer module
const {app, BrowserWindow, Notification, ipcMain } = require('electron') 

let mainWindow;
app.on('ready'.() = > {
    mainWindow = new BrowserWindow({
        width: 300.height: 300.webPreferences: {
            nodeIntegration: true
        }
    })
    mainWindow.loadFile('./index.html')
    mainWindow.on('closed'.() = > {
        mainWindow = null})})Copy the code