Electron is an open source library developed by Github for building cross-platform desktop applications using HTML, CSS, and JavaScript. Electron does this by merging Chromium and Node.js into the same runtime environment and packaging it as an application for Mac, Windows, and Linux.

Add a startup animation

Since Electron starts slowly for the first time, some startup animations are needed to improve the user experience. Add the following code to the main process

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow

function createWindow(callback) {
    mainWindow = new BrowserWindow({
        width: 1400.height: 900.show: false
    })

    mainWindow.once('ready-to-show', () = > {if (callback){
        callback();
      }
        mainWindow.show()
    })
    mainWindow.loadURL(`file://${__dirname}/build/index.html`);
}
app.on('ready', () = > {const useH = parseInt(0.865 * electron.screen.getPrimaryDisplay().workAreaSize.height);
    const useW = parseInt(0.625 * electron.screen.getPrimaryDisplay().workAreaSize.width);

    let logoWindow = new BrowserWindow({
        width: useW,
        height: useH,
        transparent: true.frame: false.center: true.show: false
    });
    logoWindow.loadURL(`file://${__dirname}/build/logo/logo.html`);
    logoWindow.once('ready-to-show', () => {
        logoWindow.show();
    });
    const closeLogoWindow = (a)= > {
        logoWindow.close();
    };
    createWindow(closeLogoWindow);
})
Copy the code

Implement automatic updates

Auto-update using electron- Builder combined with electron-updater.

Configure the package.json file

"build": {
    "publish": [
      {
        "provider": "generic",
        "url": "http://ossactivity.tongyishidai.com/"
      }
    ]
}
Copy the code

The main process added automatic update detection and event listening:

import { autoUpdater } from "electron-updater"
import { ipcMain } from "electron"

function updateHandle() {
  let message = {
    error: 'Check update error'.checking: 'Checking for updates... '.updateAva: 'New version detected, downloading... '.updateNotAva: 'This is the latest version, don't update it'}; autoUpdater.setFeedURL('http://ossactivity.tongyishidai.com/');
  autoUpdater.on('error'.function (error) {
    console.log(error)
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update'.function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available'.function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available'.function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // Update the download progress event
  autoUpdater.on('download-progress'.function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded'.function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log("Start updating");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')}); ipcMain.on("checkForUpdate", () = > {// Perform automatic update checksautoUpdater.checkForUpdates(); })}// Send an event to the renderer via main to prompt the renderer to update
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}
Copy the code

Note:

  • After adding automatic update detection and event listening, you need to call updateHandle() in the main process createWindow.
  • This autoUpdater is not the autoUpdater of electron, but the autoUpdater of electron-updater. (There was an error and a whole day of confusion)

Trigger automatic updates in the View layer and add a listener for automatic update events.

Triggering automatic updates:

  ipcRenderer.send("checkForUpdate");
Copy the code

Listen for automatic update events:

    ipcRenderer.on("message", (event, text) => {
      console.log(text)
    });
    ipcRenderer.on("downloadProgress", (event, progressObj)=> {
      console.log(progressObj.percent)
      this.setState({
        downloadPercent: parseInt(progressObj.percent) || 0})}); ipcRenderer.on("isUpdateNow", () => {
        ipcRenderer.send("isUpdateNow");
    });
Copy the code

To avoid abuse of listening caused by multiple page switching, listening events must be removed before page switching:

ipcRenderer.removeAll(["message"."downloadProgress"."isUpdateNow"]);
Copy the code

Reference address segmentfault.com/a/119000001…

useelectron-builderPackage the EXE installation package

The package.json file is configured as follows

{
"build": {
    "productName": "CubeScratch"."appId": "org.develar.CubeScratch"."publish": [{"provider": "generic"."url": "http://ossactivity.tongyishidai.com/"}]."win": {
      "icon": "icon.ico"."artifactName": "${productName}_Setup_${version}.${ext}"."target": [
        "nsis"]},"mac": {
      "icon": "icon.icns"
    },
    "nsis": {
      "oneClick": false."allowElevation": true."allowToChangeInstallationDirectory": true."installerIcon": "icon.ico"."uninstallerIcon": "icon.ico"."installerHeaderIcon": "icon.ico"."createDesktopShortcut": true."createStartMenuShortcut": true."shortcutName": "CubeScratch"
    },
    "directories": {
      "buildResources": "resources"."output": "release"
    },
    "dmg": {
      "contents": [{"x": 410."y": 150."type": "link"."path": "/Applications"
        },
        {
          "x": 130."y": 150."type": "file"}]}}}Copy the code

Reference address juejin.cn/post/684490…

The Windows platformserialportA serial port to compile

If you need serialport as a dependency on the Electron project, you must compile it for the version of Electron the project uses.

For most of the most common use cases (Linux, Mac, Windows on standard processor platforms), we use Prebuild to compile and publish library binaries. Compiling Node-gyp with Nodejs requires Python 2.x, so make sure it is installed and in the paths of all operating systems. Python 3.x does not work properly.

Install Windows build tools and configuration to save time and effort please choose the following solution:

npm install --global --production windows-build-tools
Copy the code

The command above determines whether serial port compilation is successful. The installation process is very slow, and the serial port compilation is 99% successful when the installation is complete.

Manual installation tools and configuration, see https://github.com/nodejs/node-gyp/

Then use the electronic-rebuild package to rebuild the module to fit electron. This package automatically recognizes the current Electron version and does the following for your application: download headers, recompile native modules, etc.

"scripts": {
    "rebuild": "electron-rebuild"
}
Copy the code

Run the following command to compile the serial port

npm run rebuild
Copy the code

Note:

  • The compiled serial port is not applicable to different systems and must be recompiled on each platform
  • Windows system had better be legitimate, or clean edition. If no, the installation may fail.