Electron Development Advance (I)

Author: He Dexing

We don’t have to talk about the introduction and demo preparation of electron, there are official related instructions and documentation. Today we are talking about some official documents are not available, I hope to help you.

Electron Project Process

The electron project packaging is essentially divided into three relatively independent processes without necessary dependencies, which can be operated independently.

Web business code packaging

Business code packaging is our Web code packaging, such as packaging vue project, react project, etc., packaged into a specified folder, such as dist.

Electron service code package

For Electron, our custom configuration, various listeners, custom menus, and a whole bunch of our custom services also need to be packaged.

Electron packaging

When the above two packing processes are complete, the electron packing can begin.

Custom configuration and packaging

The existing electron packing plug-ins have two types: electron- Packager and electron- Builder. Here we choose electron- Builder.

Without further ado, go straight to configuration items:

// Add build items to package.json
"build": {
    "productName": "Old bird club"."appId": "com.example.yourapp"."directories": {
      "output": "build"
    },
    "publish": [{"provider": "generic"."url": "http://www. Your website is.com/download/"}].// File configures the files that you pack locally. If you find that the configuration file is invalid, please try adding **/* after it
    "files": [
      "dist/electron/**/*".! "" node_modules/asar/**/*"]."dmg": {
      "contents": [{"x": 410."y": 150."type": "link"."path": "/Applications"
        },
        {
          "x": 130."y": 150."type": "file"}},"mac": {
      "icon": "icons/icon.icns"."artifactName": "${productName}_setup_${version}.${ext}"."target": "dmg"
    },
    "win": {
      "icon": "icons/icon.ico"."artifactName": "${productName}_setup_${version}.${ext}".// This configuration can be configured directly when you need to migrate additional files. The configuration file will be migrated when the package is packaged.
      "extraResources": {
        "from": "./config.json"."to": ".. /config.json"}},"linux": {
      "icon": "icons"."artifactName": "${productName}_setup_${version}.${ext}"
    },
    // Install configuration
    "nsis": {
      "oneClick": false."perMachine": true."allowElevation": true."allowToChangeInstallationDirectory": true."createDesktopShortcut": true."runAfterFinish": true."installerIcon": "./build/.icon-ico/icon.ico"."uninstallerIcon": "./build/.icon-ico/icon.ico"}},Copy the code

`electron-builder`Common errors are reported

Application entry file “build\electron. Js “in the “app.asar” does not exist. Seems like a wrong configuration.

The solution

(1) Please confirm whether the main configuration in your package.json is configured:
```
  "main": "./dist/electron/main.js".Copy the code
```
(2) If main has been configured and the configuration is correct, this error is still reported. Please confirm whether your project is the REACT project! If electron – builder found rely on containing the react in dependencies, then main configuration is invalid, the solution is as follows:

A. Add package.json/build/ to your build configuration
```
  "directories": {
    buildResources: "assets"
  },
  "extraMetadata": {
    main: "build/electron.js" // Here, change this to your main path
  }
Copy the code
```
B. Add a configuration to build:
```
  "build": {
    "extends": null
  },
Copy the code
```
If the React project is successfully packaged, but the page goes blank after opening it.

The solution

/ / Install/install/install/install/install/install/install/install/install/install/install/install/install/install/install/install/install
```
  "homepage": ". /"
Copy the code
```
What can I do if the packaged client is too large?

The solution

Electron packaging, by default, will migrate files according to our package.json/build/file configuration:
```
  "files": [
    "dist/electron/**/*".// Configure the files that need to be packaged
    ! "" node_modules/asar/**/*" // Configure files that do not need to be packaged].Copy the code
```
Node_modules is packaged by default (required by the node environment), so if our dependency package is too large, it is likely that the client package will be too large, so you can reduce the size of the package by configuring which dependencies are not needed.

(1) You can install ASar, decompress app. Asar in the client, and check the packaged resources.

(2) Do not try to say “do not configure files”. If electron does not configure files, it will pack all files (including source code).

(3) During the packaging process, if we have additional requirements for migrating files, for example, I want to move a file and put it into our packaging resources. Additional resources can be added by configuring the extraResources configuration in package.json/build. ExtraResources is also available in build configuration and in specific package /extraResources configuration.
- In the Build configuration, the extraResources value is an array that corresponds to all the packaged configurations. package.json/build/extraResources
```
  "build": {
    "productName": "Old bird club"."appId": "com.example.yourapp"."directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*".! "" node_modules/asar/**/*"]."extraResources": [{
      "from": "./config.json"."to": ".. /config.json"}, {"from": "./extraExe/test.exe"."to": ".. /extraExe/test.exe"
    }]
    "dmg": {
      "contents": [{"x": 410."y": 150."type": "link"."path": "/Applications"
        },
        {
          "x": 130."y": 150."type": "file"}}}]Copy the code
```
- The other is within the concrete packaging configuration, which is valid only for the current packaging configuration and has a value type of object. Package. json/build/ extraResources By the way, configurations can be temporarily replaced in the package command.
```
  "win": {
    "icon": "icons/icon.ico"."artifactName": "${productName}_setup_${version}.${ext}"."extraResources": { // Configure this item as an additional resource
      "from": "./config.json"."to": ".. /config.json"}}Copy the code
```

Custom form

Windows on the MAC and Windows are different in configuration. For example, a custom form with no border is displayed. On the MAC, control buttons are displayed by the system, while in Windows, control buttons need to be customized in the business code.

The following points should be noted for custom forms:

TitleBarStyle specifies the display style of the control button in the upper left corner of the MAC.
- Hidden: A full-size content window that hides the title bar and still has the standard window control button in the upper left corner.
- HiddenInset: A window with a title bar hidden, where the control button is more distant from the window border.
- CustomButtonsOnHover: Use custom close, Zoom out, and full-screen buttons that appear when you swipe across the top left corner of the window.

    mac: {
      height: 480.// Set the width to the width of the content
      useContentSize: false.width: 865.// Whether the window has a border
      frame: false.// Whether the window size can be changed
      resizable: false.// For MAC, control the placement of buttons
      titleBarStyle: 'hidden'.webPreferences: {
        / / the node integration
        nodeIntegration: true.plugins: true.webviewTag: true}}Copy the code

This parameter is required if you want to customize a window without borders
- Frame: Indicates whether a window has a border. When there is no border, our page is displayed directly.
- Transparent: Makes a frameless window transparent.
Custom bezel-less windowlimitations(Below is the official transcript)
- You cannot click through transparent areas. We will introduce an API to set window shapes to solve this problem, see Our Issue for more information.
- Transparent Windows cannot be resized. Setting Resizable to true may cause transparent Windows to stop working on some platforms.
- The Blur filter only works on web pages, so you cannot apply a blur effect to content located below a transparent window (such as other applications that are open on the user’s system).
- On Windows, transparent Windows will not work when DWM is disabled.
- On Linux, you must set –enable-transparent-visuals –disable-gpu on the command line to disable GPU and enable ARGB for window transparency. This is caused by an upstream bug that prevents alpha channel from running on some NVidia drivers on Linux machines.
- On the Mac, transparent Windows don’t show the shadows of native Windows.
In the business page, define draggable areas (drag Windows)
- By default, bezel-less Windows are not draggable. We can add attributes to styles that allow the user to click on an element and drag the window:
```
  -webkit-app-region: drag
Copy the code
```
- In contrast, we need to add attributes to certain elements to exclude certain elements. For example, if you configure a dragable element that contains an input field, you will find that the input field cannot be typed. In this case, we need to add input:
```
-webkit-app-region: no-drag
Copy the code
```
- Currently, it seems that only rectangular shapes are supported. I don’t know if it will be updated later.
Parent-child modal window

Parent-child modal window includes the concept of parent-child window and modal window, but because they are usually used together, so the concept of parent-child modal window is directly used here.
- When a child window is created, if you set the property parent to the parent window, the child window will be displayed in the parent window.
- Modal window is on the basis of the parent window, add model attribute, at this time the child window is not only above the parent window, the child window is not closed, the parent window can not operate. (Think of the sign-up window that opens when we play online games.)
```
import { BrowserWindow } from 'electron'

let child = new BrowserWindow({ parent: top, modal: true.show: false })
child.loadURL('https://www.baidu.com')
child.once('ready-to-show'.() = > {
  child.show()
})
Copy the code
```
Note: Be careful when opening parent mode Windows, because the child window does not have a close button (MAC), it would be awkward if your business code is not closed (the child window cannot close, the parent window cannot close).
Window blank screen time

In electron, the problem of white screen time is also a big problem, and the solutions are as follows:
- Put some of the first screen resources locally on the client (see packaging configuration)
- Optimize business code (do not write, baidu)
- Set backgroundColor so that the white screen becomes a colored screen
```
let win = new BrowserWindow({ backgroundColor: '#cdcdcd' })
Copy the code
```
- Loading the animation separately is also a good solution, but it takes some work

Client version detection and automatic update

Automatic update should be a very core function of the client program. AutoUpdater module is also built into ELECTRON, including version packaging, version detection, installation package download, installation package installation and so on.
We use the electron-updater, which is a dependency package for encapsulation optimization of autoUpdater in electron.

We can separate the autoUpdater module into a method and call it directly, with arguments as our main window:

  import { updateHandle } from './auto-updater'

  let mainWindow
  function createWindow () {
    // userAppConfig config for your window (see the previous article)
    mainWindow = new BrowserWindow(userAppConfig)

    mainWindow.loadURL(winURL)

    mainWindow.on('closed'.() = > {
      mainWindow = null
    })

    updateHandle(mainWindow)
  }
Copy the code

  // auto-updater.js
  
  import fs from 'fs'
  import { ipcMain } from 'electron'
  import { autoUpdater } from 'electron-updater'
  import { updateURL } from './config/urlConfig' // This is our server installation package address
  // Bind detects update events
  /** * Receive render process checkForUpdate event triggers automatic update query */

  const updateUrl = process.platform === 'darwin' ? updateURL.mac : updateURL.windows

  function updateHandle (mainWindow) {
    if (process.env.NODE_ENV === 'development') {
      // If you want to debug automatic update in the development environment, you must actively set the current version
      // In the development environment, the version number will be the electron version, not the APP version
      autoUpdater.currentVersion = '0.1.0 from'
    }
    function sendUpdateMessage(obj) {
      mainWindow.webContents.send('updateMessage', obj)
    }

    // Set the address of the upgrade package
    autoUpdater.setFeedURL({
      provider: 'generic'.// Can also be github, S3, bintray
      url: updateUrl
    })

    // Triggered when an update error occurs
    autoUpdater.on('error'.(err) = > {
      fs.writeFile('update_error', err, function() {
        // callback function
      })
      sendUpdateMessage({action: 'error'.errorInfo: err})
    })

    // Triggered when checking for updates
    autoUpdater.on('checking-for-update'.() = > {
      sendUpdateMessage({action: 'checking'})})// Automatically downloads the configuration. If true, the upgrade package will automatically start downloading when an update is available
    autoUpdater.autoDownload = false
    // A new version was found
    autoUpdater.on('update-available'.(info) = > {
      sendUpdateMessage({action: 'updateAva'.updateInfo: info})
    })

    // Triggered when no updates are available
    autoUpdater.on('update-not-available'.(info) = > {
      sendUpdateMessage({action: 'updateNotAva'.updateInfo: info})
    })

    // Update the download progress event
    autoUpdater.on('download-progress'.(progressObj) = > {
      mainWindow.webContents.send('downloadProgress', progressObj)
    })

    // If the new version has been downloaded, send the message that the version has been downloaded and exit the app for installation
    autoUpdater.on('update-downloaded'.(info) = > {
      sendUpdateMessage({action: 'updateDownloaded'.updateInfo: info})
      ipcMain.on('isUpdateNow'.() = > {
        console.log('isUptaeNow')
        autoUpdater.quitAndInstall()
      })
      fs.writeFile('update-downloaded'.JSON.stringify(info), function() {
        // callback function})})// Perform automatic update checks
    ipcMain.on('checkForUpdate'.() = > {
      console.log('The main process receives the command to start querying the version... ')
      autoUpdater.checkForUpdates()
    })

    / / download
    ipcMain.on('downloadUpdate'.() = > {
      autoUpdater.downloadUpdate()
    })
  }

  export {
    updateHandle
  }

Copy the code

Auto-update questions and details

There are a lot of things that NEED to be noted that I’ve written directly in the code.
The development environment automatically automatically updates the version detection, the version has been incorrect.
- If you need to debug automatic updates in your development environment, you must actively set the current version
- electron-updaterIn the development environment, the version number will beelectronVersion, not app version number
At the time of packaging, don’t forget to package. The json/build/configuration of the publish the address do you want any updates
```
  "publish": [{"provider": "generic"."url": "http://www.snowhe.com/myaide/download/"}]Copy the code
```
Yml and Build-effective -config.yaml (Windows is fresh. yml and a.yaml file). These two files must be updated to our folder on the server along with the installation package.

Package. json/build/nsis can be used to configure the installation process.

    "nsis": {
      "oneClick": false."perMachine": true."allowElevation": true."allowToChangeInstallationDirectory": true."createDesktopShortcut": true."runAfterFinish": true."installerIcon": "./build/.icon-ico/icon.ico"."uninstallerIcon": "./build/.icon-ico/icon.ico"
    }
Copy the code

This configuration does not work on the MAC, forget it, since when does the MAC Install app let you customize?

If you are familiar with NSH files, you can also configure NSH files yourself (I am not familiar with them anyway) :

! macro customHeader ! macroend ! macro preInit ! macroend ! macro customInit # guid=7e51495b-3f4d-5235-aadd-5636863064f0
ReadRegStr $0 HKLM "SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{7e51495b-3f4d-5235-aadd-5636863064f0}" "UninstallString"
${If} $0! =""
MessageBox MB_ICONINFORMATION|MB_TOPMOST  "This program has been detected on the system and will be uninstalled." IDOK
# ExecWait $0 $1${EndIf} ! macroend ! macro customInstall ! macroend ! macro customInstallMode # set $isForceMachineInstall or $isForceCurrentInstall # to enforce one or the other modes. #set  $isForceMachineInstall ! macroendCopy the code

In business code, we can also make the main process version check by sending a message to the renderer process (more on message communication later).

Communication between processes

The communication between processes mainly refers to the communication between the main process and the rendering process, which is an important function of our desktop app. It can also be said to be the communication between our business code and the window.

- Understand the first, is the parent page and iframe child page communication. If you are interested, you can go to know about it. It's all about message communication. ** So the message passed is also a string (highlighted)** - Understand the second, we are a bit like publish subscriber [observer mode], see below for details.Copy the code

Communication in the renderer process is delivered via ipcRender, which provides some methods for sending synchronous or asynchronous messages from the renderer process (web pages) to the main process. The main process can also listen for webContent messages in the window to receive and send messages.

- Message communication is one-way. - It can be interpreted as a phone message, not a live call.Copy the code

How to understand ipcRender?

The relationship between the main process and the renderer process is much like the relationship between the page and the iframe in the page. (Look up postMessage if you’re not familiar with this)

Correspondingly, we need to receive in the main program ipcMain, that is, when the ipcRender in the rendering process sends messages, the ipcMain in the main process receives and sends back the results to ipcRender (and then sends messages to ipcRender), so as to achieve a two-way communication purpose.

So in summary, it’s really just message communication between ipcMain and ipcRender.
We do communication also, in the two modules corresponding to mount the message we need to achieve the type of communication we need.

How do I mount messages in ipcRender and ipcMain

Mount message listener in ipcMain:

The introduction of the head

import { app, BrowserWindow, ipcMain } from 'electron'
import { createChildWindow } from './utils'

Copy the code

Create a window

  let mainWindow

  function createWindow () {
    /** * Initial window options */
    mainWindow = new BrowserWindow(userAppConfig)

    mainWindow.loadURL(winURL)

    mainWindow.on('closed'.() = > {
      mainWindow = null
    })

    // Set up a listener
    addWindowListener()
  }
Copy the code

IpcMain listens for the types of messages we subscribe to

function addWindowListener () {
  // Close the window
  ipcMain.on('closeWindow'.() = > {
    mainWindow.close()
  })
  // Hide the window
  ipcMain.on('hideWindow'.() = > {
    console.log('hide')
    mainWindow.minimize()
  })
  // Maximize the window
  ipcMain.on('maxWindow'.() = > {
    console.log('maxWindow')
    mainWindow.maximize()
  })
  // Full screen display
  ipcMain.on('fullScreen'.(e, flag) = > {
    console.log(flag)
    mainWindow.setFullScreen(flag)
  })
  // Restore the previous screen status
  ipcMain.on('restoreWindow'.() = > {
    mainWindow.restore(true)})// Generate a submodal window (disable the main window)
  ipcMain.on('addChildWindow'.(e, url, config) = > {
    console.log('addChildWindow:', e, url, config)
    createChildWindow({
      parent: mainWindow,
      modal: true,
      url
    })
  })
}

Copy the code

IpcMain postMessage

  function sendMessage(obj) {
    mainWindow.webContents.send('sendMessageToIpcRender', obj)
  }
  sendMessage({
  	type: 'call'.message: 'ipcRender, I'm your boss ipcMain, please help me find Chuchu Baby. '
  })
Copy the code

Receive in ipcRender

import { ipcRenderer, shell } from 'electron'
ipcRenderer.on('sendMessageToIpcRender'.(event, info) = > {
  console.log(info)
})
Copy the code

IpcRender sends messages

import {ipcRenderer} from 'electron'
const info = {
	type: 'callback'.message: 'Boss ipcMain, this is ipcRender, I can't find Chuchu Baby.'
}
ipcRenderer.send('sendMessageToIpcMain'.JSON.stringify(info))
Copy the code

The similarity and difference of communication transmission is caused by the protocol chosen. As we look at these, we will see that similar functions have a lot in common. If you want to study these protocols, you can see that there are many problems that cannot be explained normally.

That’s all for this installment. Thank you

Electron Project Process

Custom configuration and packaging

electron-builderCommon errors are reported

Custom form

Custom bezel-less windowlimitations(Below is the official transcript)

Client version detection and automatic update

Auto-update questions and details

Communication between processes

Related Posts

An eight-beat with one hand takes you to the new operator ~ SKR SKR

Several key points of electron integrated DLL | More challenging in August

【Mobile Dev Weekly #382

`electron-builder`Common errors are reported