electron小细节
解决Electron命令行中文出现乱码
"scripts": {
"start": "chcp 65001 && electron ."
},
复制代码Electron不支持prompt的替代方案
- 使用开源库：smalltalk
- 手写弹窗样式
chromium在electron下会异常崩溃退出
- 描述：发现electron与木偶人有点水土不服，没有封装成electron之前是可以顺利运行程序，加上electron之后，需要修改的地方有点多，甚至报错，运行下不去。
- 解决：去掉页面等待
// 等待页面加载出来
await page.waitForNavigation({
waitUntil: 'load'
});
复制代码调整页面默认等待时间
- 描述：imeoutError: Navigation Timeout Exceeded: 30000ms exceeded
- 解决：禁用默认超时
// 打开浏览器
browser = await puppeteer.launch({
headless: false,
timeout: 0
});
page.setDefaultNavigationTimeout(0);
复制代码Electron 将网页打包成 exe 可执行文件
在electron的构建体系中，打包这个概念特别的容易混淆。这里有很多种结果都是可以说是打包，但是打包的程度是完全不同的，这也就决定了不同的打包场景。本文中，asar这个打包，是个最最最最最小的打包概念，而且这个包，仅仅是对resource/app目录的封装，让人们不是那么容易看到你写的代码结果而已。
在封装成可执行的exe文件时候，遇到了一些问题，如下：
- 如何配置package.json文件，使其能够自动化打包？
- node_modules依赖找不到
- openssl可执行路径出错
- puppeteer 找不到浏览器路径
- 文件存放路径问题
- 如何打包或者解压asar文件？
如何配置package.json文件，使其能够自动化打包？
配置package.json，核心命令为：
"scripts"：{
"package": "electron-packager ./ AutoCer --platform=win32 --arch=x64 --icon=./tool.ico --out=./dist --electron-version=4.0.6 --overwrite"
}
复制代码- ./：打包当前目录所有内容
- --out=./dist：将打包内容输出到当前目录的dist文件夹
- AutoCer：你打包后应用的名称
- --icon：你打包后应用的图标
- --electron-version：这个版本填写你自己对应的版本，否则会报错，找不到对应版本
- --overwrite：每次打包强制覆盖输出
package.json完整配置如下：
{
"name": "autoCer",
"version": "1.0.0",
"description": "自动创建开发者证书、下载开发者证书和描述文件，转成p12文件",
"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"
}
}
复制代码node_modules依赖找不到？
为什么在没有打包前一切运行正常，打包后就会报找不到node_modules中一些第三方资源的路径，原来是在配置package.json的时候出现了问题，应当把需要依赖第三方资源的从devDependencies调整到dependencies，而又不想把electron、electron-packager打包进应用，则留在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"
}
复制代码配置package.json后，进入项目目录，运行npm run package 即可。
openssl可执行路径出错
打包后找不到openssl的路径，导致失败，所以这里需要使用openssl的绝对路径，可将OpenSSL-Win32文件夹手动移动到打完包之后的目录下，和resources同级即可，最后修改一下OpenSSL-Win32所在的位置，如下：
let openssl = path.join(__dirname, "..", ".."，"..","OpenSSL-Win32", "bin", "openssl.exe");
复制代码puppeteer 找不到浏览器路径
打包后找不到chrome.exe路径，导致浏览器启动失败，这里将node_modules中puppeteer包里面的.local-chromium整个文件夹手动剪切到打完包之后的目录下，和resources同级即可，最后修改一下executablePath指定Chromium的位置，如下：
let ChromiumPath = path.join(__dirname, "..", ".."，"..",".local-chromium", "win64-624492", "chrome-win","chrome.exe");
// 打开浏览器
const browser = await puppeteer.launch({
headless: false,
timeout: 0，
executablePath：ChromiumPath
});
复制代码文件存放路径问题
不能写入项目文件，只能读取文件，可存放到系统临时目录，如下
const os = require('os');
let tempDir = path.join(os.tmpdir(), "AutoCerTemp");
复制代码如何打包或者解压asar文件
当运行npm run package 之后，在项目当前目录下会输出dist/AutoCer-win32-x64等打包后的工程，此时我们进入dist/AutoCer-win32-x64/resources，会看到两个文件，一个是app文件夹，一个是 electron.asar文件，此刻我们需要进行最后一步，就是将app文件打包成asar，在当前目录下运行以下命令：
打包 asar 命令：
asar p app app.asar
asar pack app app.asar
复制代码打完asar包之后，可以去点击AutoCer.exe启动你的项目了。
如果你想看下asar里面是什么内容，可以使用解压命令。
asar e app.asar app
asar extract app.asar app
复制代码