In the last article, we built an electron and VUE integration project. This article mainly introduces the electron background.js process, which is the main process, as well as the rendering process.

Electron is mainly divided into the main process (background-js), rendering process (that is, the page developed by VUE) and GPU process, etc., but we mainly use the main process and rendering process, other processes will not be studied in depth for the moment.

Main process:

  • There is only one main process in an application
  • All system events, such as creating Windows, take place in the main process

Render process:

  • A renderer process is created for each Web page created
  • Each Web page runs in its own rendering process
  • Each rendering process is independent and only cares about the page it is running on

Main main functions of the main process:

  1. Create render process
  2. Manage the application lifecycle
  3. Interact with the underlying system

This section focuses on the most common configuration configurations that can be set in the main process.

1. Set the size and appearance of the render process

win = new BrowserWindow({
    width: 1200.// Set the window width
    height: 620.// Set the window height
    webPreferences: {
      webSecurity: false.// Whether to disable the cross-domain security feature of the browser
      nodeIntegration: true // Node is fully supported}})Copy the code

Here just a few basic attribute set, more attributes refer to: www.w3cschool.cn/electronman…

2. Set the menu

function createMenu () {
  // Darwin stands for macOS, for macOS Settings
  if (process.platform === 'darwin') {
    const template = [
      {
        label: 'App Demo'.submenu: [{role: 'about'
          },
          {
            role: 'quit'}}]]const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
  } else {
    // Windows and Linux
    Menu.setApplicationMenu(null)}}Copy the code

Note here that MacOS is handled differently than Windows and Linux

3. Something to do when the application starts (initialization is complete)

app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) {if(isDevelopment && ! process.env.IS_TEST) {// Install Vue Devtools
      try {
        await installVueDevtools()
      } catch (e) {
        console.error('Vue Devtools failed to install:', e.toString())
      }
    }
  }
  globalShortcut.register('CommandOrControl+Shift+i'.function () {
    win.webContents.openDevTools()
  })
  createWindow()
})
Copy the code

Once the app module’s ready method is executed, the renderer process can be created. The default is to automatically install VueDevTools in a development environment for developer debugging. Also register globally to call out VueDevTool with Ctrl + Shift + I. After setting up these plug-ins, create the renderer process.

It usually does some application initialization work, such as: load some data in advance, wait until the renderer process has finished rendering the page directly call, speed up the application load, etc.

4. Things to do when applying all Windows close

app.on('window-all-closed', () = > {// On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if(process.platform ! = ='darwin') {
    app.quit()
  }
})
Copy the code

This method is called when all window closures are applied, in which you can add free resources or delete temporary files

5. Communicate with the render process

There are several official communication methods, but here we introduce the most common ones: ipcRenderer (the object used in the rendering process) and ipcMain (the object used in the main process). For example, the renderer tells the main process to close the current window renderer

const { ipcRenderer } = require('electron')
ipcRenderer.send('close');
Copy the code

The main process

import { ipcMain } from 'electron'
ipcMain.on('close', e => win.close());
Copy the code

This article first introduces the common configuration, until the actual combat project with advanced usage, will be explained in the actual combat project.