This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact.

preface

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into binary Electron allows you to keep a code base of JavaScript code and create cross-platform applications for macOS and Linux running on Windows — no local development experience is required. Atom and vscode, commonly used by front-end programmers, were developed using electron.

Self-start upon startup

The related code functions provided by ELECTRON do not require the installation of a third-party code library. You may find other ways to do this when searching for posts, but I don’t think it’s necessary. Just use the official ones.

  1. First get the location of the executable
  2. Call the official method.

OpenAtLogin :ture: enables automatic startup. False: disables automatic startup

// Obtain the executable file location const ex=process.execPath; // Call method app.setLoginItemSettings({openAtLogin: true, path: ex, args: []});Copy the code

After executing the code, the corresponding data is written to the system’s registry. Run regedit to open the registry. To find the boot registry, expand HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run

A single instance

Singleton is when only one program is running. When you are not using a single instance, you can open multiple applications at the same time without limitation. The same official also provides a corresponding method app. RequestSingleInstanceLock ()

The return value is true/false, indicating whether the example being started successfully acquired the lock. If it fails to acquire the lock, the other application instance has acquired the lock and is still running, and exits immediately.

Example:

if (! app.requestSingleInstanceLock()) { app.quit() } else { app.on('second-instance', (event, commandLine, WorkingDirectory) => {// myWindow will be focused when running second instance if (win) {if (win.isinvoke ()) win.restore() win.focus()}})Copy the code

packaging

Add the electron Builder configuration in package.json for example: One-click installation create desktop icon create start menu icon and other basic configuration

"Nsis ": {"oneClick": false, // one-click install" guID ": "XXXX ", // registry name, not recommended to change "perMachine": "AllowElevation ": true, // Whether to enable installation permission restrictions (for this computer or the current user). If false, the user must restart setup with the promoted permissions. "AllowToChangeInstallationDirectory" : true, / / allowed to change the installation directory "installerIcon" : "./build/ ICONS /aaa.ico", // Install icon "uninstallerIcon": "./build/ ICONS /bbb.ico", // uninstall icon "installerHeaderIcon": "./build/ ICONS /aaa.ico", // Install header icon "createDesktopShortcut": true, // create desktop icon "createStartMenuShortcut": True, // Create start menu icon "shortcutName": "XXXX" // icon name}Copy the code

If you are working on a Vue project, it is recommended to use vue-cli-plugin-electron- Builder, configured in vue.config.js.

pluginOptions: { electronBuilder: { noAppProtocal: true, customFileProtocol: './', chainWebpackRendererProcess: (config) => { // Chain webpack config for electron renderer process only // The following example will set IS_ELECTRON to true in your app config.plugin('define').tap((args) => { args[0]['IS_ELECTRON'] = true return args }) }, builderOptions: { appId: "", productName: "", files: ["**/*", "static/*"], asar: true, win: { icon: "./src/assets/logo/favicon.ico", target: ["zip", "nsis"], }, publish: [{ provider: "generic", url: "http://localhost:8088/", // the setup package and lastest. Yml server address publishAutoUpdate: true,}], nsis: {}}}Copy the code

To upgrade

Scheme 1: electron-updater

  1. Modify the Version attribute in package.json to upgrade the software version
  2. New latest.yml and exe files (MAC: latest-mac.yml,zip and DMG files) will be generated when the electron Builder package is executed.
  3. Lectron-updater automatically checks for updates through the YML file at the corresponding URL

Scenario 2: Place the installation package on the server and request a custom download.

logging

The Electron log plugin is also supported by any Node.js application. It is easy to use.

npm install electron-log
const log = require('electron-log');
log.info('Hello, log');
log.warn('Some problem appears');
Copy the code

The file is stored under: C:\Users” \Users” \AppData\Roaming’ project ‘\logs.

However, the electron log does not support deleting logs, so it is better to write a method in electron to periodically clean the log file.

Match the vue

Don’t recommend electron-vue, it’s too old. It is recommended to use the electron builder to outline the installation process

  1. Initialize a VUE project
  2. vue add electron-builder

Remove cross-domain restrictions

General novice development will encounter this problem, can not access the background, view a variety of configuration, are normal, but slow to solve.

webPreferences: {
  webSecurity: false,
}
Copy the code

Global shortcut key

In Electron, the keyboard shortcut is called Accelerator. They can be assigned to actions in the application menu or registered globally. When registering a global shortcut, ensure that it does not conflict with the global shortcut key.

app.on('ready', function () {
  globalShortcut.register('CommandOrControl+Alt+A', function () {
  })
})

app.on('will-quit', function () {
  globalShortcut.unregisterAll()
})
Copy the code