首发掘金:https://juejin.im/post/5c85b08ae51d453a476237de
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