From a development perspective, Electron is essentially a Node.js application.

The core content

  • Electron contains three cores
    • Chromium is used to display web content
    • Node JS is used for local file systems and operating systems
    • Custom APIs are used to use OS native functions that are often needed
  • Main process and renderer process
    • The main process creates a web page by creating an instance of BrowserWindow. Each instance runs the page during rendering, and the rendering process is terminated when the instance is destroyed.
    • The main process manages all web pages and their corresponding renderers, which can only manage corresponding web pages.
    • The renderer performs GUI operations on the web page by communicating with the main process via IPC.

The installation

// Create a folder and install Electron
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
Copy the code

API

  • App: Controls the event lifecycle of the application (main process)
    • WhenReady () : When Electron completes initialization, return a Promise
    • IsReady () : Returns true if Electron completes initialization
    • App.on (event, function(){})
      • Ready: Emits once when Electron completes initialization
      • Window-all-closed: This parameter is triggered when all Windows are closed
      • Quit: this event is emitted when the application exits. In Windows, the event is not triggered when the system is shut down, restarted, and logged out
  • BrowserWindow: create and control the BrowserWindow (main process)
    • Bezel-less window: Set frame to false
    • Keep window control buttons: Set titleBarStyle to Hidden
    • Transparent Windows: Set transparent to true
    • Parent window: Create a new BrowserWindow instance and set parent to the parent window instance
    • Web function Settings: webPreferences
      • Enable Node integration: Set nodeIntegration to true
      • Enable remote modules: Set enableRemoteModule to true
      • Disable the same Origin policy: Set webSecurity to false
      • Enable plug-ins: Set plugins to true
    • Instance methods:
      • Loading HTML file: win.loadFile(filePath[, options])
      • Win.loadurl (url[, options])
      • Open the console: win. WebContents. OpenDevTools ()
      • Show and focus on Windows: win.show()
    • The instance emits the following event: win.on(event, () => {})
      • Ready-to-show: an event emitted by the renderer if the window is not displayed after the first rendering.
      • Close: Emitted when the window is closed. After receiving this event, you need to manually remove references to the window and avoid using it again.
  • IpcMain: asynchronous communication from main to renderer (main)
    • Send messages: Messages can be sent from the main process to the renderer
      • When a message is sent, the event name is channel
      • The value of Event. ReturnValue must be set when the synchronization message is returned
      • When replying to asynchronous messages, use event.reply(channel, reply value)
    • Here’s how to listen for things
      • On (Channel, Listener (event, args)) listens to a channel, and the listener callback is called when a new message is received
      • Once (channel, listener) listens for the first invocation of a channel and removes the listener after the callback is triggered
    • Example of a renderer sending a message to the main process: * The renderer sends data: ipcrenderer. send(‘channel-message’, ‘renderer’s data ‘) * The main process listens for receiving data: Ipcmain. on(‘channel-message’, (event, arg) => {// arg == ‘renderer data’})