I. Installation process

1. Download the electron scaffolding for global installation, pause at install.js and wait patiently for it to finish

npm install electron -g
Copy the code

2. In the new foldernpm initInitialize a project

3. Install electron and save it as a development dependency.

npm install electron -D
Copy the code

4. Install the package plug-in

NPM I superelectron builder --save-dev;Copy the code

5. Install the plug-in for the update

NPM I electron-updater --save;Copy the code

6. Create a SRC directory and copy and paste the SRC folder containing

* Static folder * favicon.ico icon size around 50KB, 256*256 size * index.html * main.jsCopy the code

7. Run the package command based on the package.json file command

npm run dist
Copy the code

2. Frequently asked Questions

1. When running the NPM run dist command, complete downloading fails frequently. The reason is that the downloading speed from Github is slow

  • C:\Users\84931\AppData\Local\electron\Cache
  • C:\Users\84931\AppData\Local\electron-builder\Cache\nsis
  • C: \ Users \ \ AppData \ Local \ 84931 electron – builder \ Cache \ nsis \ nsis – resources – 3.4.1 track
  • C: \ Users \ \ AppData \ Local \ 84931 electron – builder \ Cache \ winCodeSign \ winCodeSign – 2.5.0

2. Common main.js configurations

// Introduce electron and create a Browserwindow const {app, Browserwindow} = require('electron')
const path = require('path')
const url = require('url')
const autoUpdater = require("electron-updater").autoUpdater; // Introduce autoUpdater update module // keep a global reference to the window object to avoid automatic window closing when JavaScript objects are garbage collected.let mainWindow;

function createWindowMainWindow = new BrowserWindow({width: 1200, height: 700,frame: 1) {// create a BrowserWindow.true,movable:true,icon:'./src/static/img/favicon.ico',
        webPreferences:{
            nodeIntegration:true
        },
        titleBarStyle:'hidden',
        resizable:true,
        autoHideMenuBar:true}) // mainWindow.maximize(); mainWindow.show(); ----- electron-quick-start default loading entry mainwindow.loadurl (url.format({pathname: path.join(__dirname,'./index.html'),
        protocol: 'file:',
        slashes: true})) / / open the developer tools, don't open the default / / mainWindow webContents. OpenDevTools () / / close the window when the trigger of the following events. Check mainWindow.'closed'.function() { mainWindow = null }); / / update autoUpdater. SetFeedURL ('http://localhost:3001/'); / / set testing update address autoUpdater. CheckForUpdates (); // Check if there is a new version, if there is a new version automatically download autoupdater.on ('update-downloaded'.function() {/ / download after the completion of the execution quitAndInstall autoUpdater. QuitAndInstall (); // Close the software and install the new version}); } // This method is called app.on(when Electron has completed initialization and is ready to create a browser window)'ready', createWindow); // Exit the app when all Windows are closed. App.on ('window-all-closed'.function() {// In macOS, apps and menu bars are always active unless the user presses' Cmd + Q 'to exit explicitly.if(process.platform ! = ='darwin') {
        app.quit()
    }
});

app.on('activate'.function() {// In macOS, when you click the Dock icon and no other application window is already open, you usually rebuild a window in the applicationif (mainWindow === null) {
        createWindow()
    }
})

Copy the code

3. Common package.json configuration

{
  "name": "projectName"."version": "1.0.0"."description": ""."main": "./src/main.js"."scripts": {
    "start": "electron ."."test": "echo \"Error: no test specified\" && exit 1"."dist": "electron-builder "
  },
  "author": ""."license": "ISC"."devDependencies": {
    "electron": "^ 7.0.0." "."electron-builder": "^ 22.1.0"
  },
  "build": {
    "productName": "Project Name"."publish": [{"provider": "generic"."url": "http://localhost:3001/"}]."directories": {
      "output": "release"."app": ". /"
    },
    "win": {
      "icon": "./src/favicon.ico"."target": [
        "nsis"]},"nsis": {
      "oneClick": false."allowElevation": true."allowToChangeInstallationDirectory": true."perMachine": true."runAfterFinish": true."installerIcon": "./src/static/favicon.ico"."installerHeaderIcon": "./src/static/favicon.ico"."createDesktopShortcut": true."createStartMenuShortcut": true."license":"./permission.txt"}},"dependencies": {
    "electron-updater": "^ 4.2.0"}}Copy the code