Electron small details

Solve garbled characters in the Electron command line

"scripts": {
    "start": "chcp 65001 && electron ."
  },
Copy the code

Electron does not support an alternative to Prompt

  • Use the open source library: Smalltalk
  • Hand-written popover style

Chromium will crash and exit abnormally at electron

  • Description: IT was found that the electron was not compatible with the puppeteer, the program could run smoothly before it was packaged into electron, but after adding the electron, there were many modifications needed, and even errors were reported, so the operation could not go down.
  • Solution: Remove page wait
// Wait for the page to load
await page.waitForNavigation({
    waitUntil: 'load'
});
Copy the code

Adjust the default waiting time of the page

  • Description: imeoutError: Navigation Timeout Exceeded: 30000ms Exceeded
  • Solution: Disable default timeout
// Open the browser
browser = await puppeteer.launch({
	headless: false.timeout: 0
});

page.setDefaultNavigationTimeout(0);
Copy the code

Electron packages web pages into exe executables

The concept of packaging is particularly confusing in electron’s construction architecture. There are a variety of outcomes that can be said to be packaged, but the degree of packaging is completely different, which determines different packaging scenarios. In this article, the ASAR package is the very, very minimal packaging concept, and the package is just a wrapper around the Resource /app directory, so that people can’t easily see the results of your code.

There are some problems encountered when packaging an executable exe file, as follows:

  • How do I configure package.json files so that they can be packaged automatically?
  • Node_modules dependency could not be found
  • The OpenSSL executable path fails
  • Puppeteer cannot find browser path
  • The file storage path is faulty
  • How do I package or unpack ASAR files?

How do I configure package.json files so that they can be packaged automatically?

To configure package.json, the core command is:

"scripts": {"package": "AutoCer --platform=win32 --arch=x64 --icon=./tool.ico --out=./dist --electron-version=4.0.6 --overwrite"
}
Copy the code
  • ./ : Package all contents of the current directory
  • –out=./dist: Outputs the packaged content to the dist folder in the current directory
  • AutoCer: The name of your packaged application
  • –icon: The icon of your packaged app
  • –electron-version: Enter your own version. Otherwise, an error will be reported and the corresponding version cannot be found
  • –overwrite: Forces the output to be overwritten each time the package is packaged

Package. json is configured as follows:

{
  "name": "autoCer"."version": "1.0.0"."description": "Automatically create developer certificate, download developer certificate and description file, and convert it to P12 file"."main": "main.js"."scripts": {
    "start": "chcp 65001 && electron ."."package": "Electron packager./ AutoCer --platform=win32 --arch=x64 --icon=./tool.ico --out=./dist --app-version=1.0.0 --overwrite"
  },
  "keywords": [
    "Electron"."quick"."start"."p12"."crs"]."author": ""."license": "CC0-1.0"."devDependencies": {
    "electron": "^ 4.0.6"."electron-packager": "^ 13.1.1." "
  },
  "dependencies": {
    "chalk": "^" 2.4.2."commander": "^ 2.19.0"."fs-extra": "^" 7.0.1."open-file-explorer": "^ 1.0.2"."plist": "^ 3.0.1." "."puppeteer": "^ 1.11.0"}}Copy the code

Node_modules dependency not found?

The path of some third-party resources in node_modules can not be found after the package is packaged. The problem is that there was a problem when configuring package.json. If you do not want to pack electron and electronic-packager into devDependencies, you need to change the dependencies from devDependencies to devDependencies.

Package. Json:

"devDependencies": {
    "electron": "^ 4.0.6"."electron-packager": "^ 13.1.1." "
},
"dependencies": {
    "chalk": "^" 2.4.2."commander": "^ 2.19.0"."fs-extra": "^" 7.0.1."open-file-explorer": "^ 1.0.2"."plist": "^ 3.0.1." "."puppeteer": "^ 1.11.0"
}
Copy the code

After package.json is configured, go to the project directory and run NPM run Package.

The OpenSSL executable path fails

The openSSL-win32 folder can be manually moved to the same directory as resources after the package is completed. Finally, modify the location of openSSL-win32 as follows:

let openssl = path.join(__dirname, ".."."..".".."."OpenSSL-Win32"."bin"."openssl.exe");
Copy the code

Puppeteer cannot find browser path

The chrome. Exe path cannot be found after the puppeteer package is packaged, causing the browser to fail to start. Here, manually cut the whole local-chromium folder in the puppeteer package in node_modules to the same directory as resources after the package is finished. ExecutablePath specifies the Chromium location as follows:


let ChromiumPath = path.join(__dirname, "..".".."."..".".local-chromium"."win64-624492"."chrome-win"."chrome.exe");

// Open the browser
const browser = await puppeteer.launch({
	headless: false.timeout: 0, executablePath: ChromiumPath});Copy the code

The file storage path is faulty

Can not write project files, only read files, can be stored in the system temporary directory, as follows

const os = require('os');
let tempDir = path.join(os.tmpdir(), "AutoCerTemp");
Copy the code

How do I package or unpack ASAR files

Dist/Autocer-win32-x64 /resources, dist/ Autocer-win32-x64 /resources, dist/ autocer-win32-x64 /resources One is the electron. Asar file. Now we need to do the final step, which is to package the app file as asar and run the following command in the current directory:

Package asar command:

asar p app app.asar
asar pack app app.asar
Copy the code

After completing the ASar package, go to Autocer.exe to start your project.

If you want to see what’s inside ASar, you can use the unzip command.

asar e app.asar app
asar extract app.asar app
Copy the code