Electron新手教程
简介
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
一个Electron包含一个主进程和一个或多个渲染进程。主进程管理Windows窗口、应用升级等,渲染进程管理页面展示。
初始化
- 系统:Windows7 x64
- 因为使用Vue开发业务,所以使用
Electron-Vue
模板,并且使用Electron-Builder
打包,使用Electron-Updater
更新应用,下面的讲述会针对于此。
安装
推荐使用yarn,因为它拥有autoclean的能力。建议执行yarn config set registry 'https://registry.npm.taobao.org'
命令修改源。验证源是否修改可通过yarn config get registry
命令。
- npm install -g vue-cli # 全局安装vue-cli
vue init simulatedgreg/electron-vue my-project # 下载模板工程(
按需选择
)C:\Users\Administrator>vue init simulatedgreg/electron-vue my-project ? Application Name my-project ? Application Id com.example.yourapp ? Application Version 0.0.1 ? Project description An electron-vue project ? Use Sass / Scss? No ? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-electron, vue-router, vuex, vuex-electron ? Use linting with ESLint? Yes ? Which ESLint config would you like to use? Standard ? Set up unit testing with Karma + Mocha? No ? Set up end-to-end testing with Spectron + Mocha? No ? What build tool would you like to use? builder ? author fqxyi <fengqingxiuyi@gmail.com> vue-cli · Generated "my-project". --- All set. Welcome to your new electron-vue project! Make sure to check out the documentation for this boilerplate at https://simulatedgreg.gitbooks.io/electron-vue/content/. Next Steps: $ cd my-project $ yarn (or `npm install`) $ yarn run dev (or `npm run dev`)
- cd my-project # 进入工程目录
- yarn install # 安装依赖
如果下载失败,请多尝试几次,或者手动下载失败的包到指定路径中
开发
- yarn run dev # 进入开发模式
运行效果:
构建
- yarn run build:clean # 清理node_modules
- yarn run pack # webpack打包
- yarn run build -w # 构建windows包,-m 构建mac包
调试
主进程
- 使用
console.log
打印,在Terminal中查看 - 借助
VSCode
,配置launch.json实现调试(windows7系统上未实现
,会报一个命令找不到,但是那个命令只有mac有:-()
官方教程
渲染进程
- 使用
console.log
打印,在console中查看 - 使用
debugger
断点
ipcMain & ipcRenderer
main进程向renderer进程发消息
// main进程
const { BrowserWindow } = require('electron')
BrowserWindow.getAllWindows().forEach(win => {
win.webContents.send('login', null)
})
//renderder进程
const ipcRenderer = require('electron').ipcRenderer
ipcRenderer.on('login', (event, message) => {
// do something
})
renderer进程向main进程发消息
// main进程
import { ipcMain } from 'electron'
ipcMain.on('login', (e, arg) => {
// do something
})
//renderder进程
const ipcRenderer = require('electron').ipcRenderer
ipcRenderer.send('login')
代码签名-以windows包为例
- 获取pfx文件,从证书服务商那里拿到的不是pfx,pfx是用私钥生成的,pfx的密码也是生成过程中输入的,具体生成命令:
openssl pkcs12 -export -out app.pfx -inkey app.key -in cert.pem
,app.key是申请证书时用的私钥,cert.pem是证书本体。openssl 在Linux和Mac下都有自带,windows下可以用Git Bash带的命令行。 将
yarn run build -w
命令进行如下改造:Windows:set WIN_CSC_LINK=pfx文件全路径 && set WIN_CSC_KEY_PASSWORD=pfx文件密码 && yarn run build -w
为
win
节点添加新属性:"build": { ... "win": { "certificateFile": "pfx文件全路径", "certificatePassword": "pfx文件密码" } ... }
Linux中打windows包
- 如果Local Machine是Windows7 x64,需执行1~5步
- 如果Local Machine是CentOS7,仅需执行3~5步
- 打开
Docker Quickstart Terminal
- 运行
docker-machine ssh [虚拟机名称]
命令进入虚拟机 - 运行
docker pull electronuserland/builder:wine
命令下载打包环境 - 修改工程文件夹下的
.travis.yml
文件内容为https://raw.githubusercontent.com/fengqingxiuyi/electron-vue-demo/master/.travis.yml 进入工程文件夹,然后运行
docker run --rm -ti \ --env ELECTRON_CACHE="/root/.cache/electron" \ --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \ -v ${PWD}:/project \ -v ${PWD}:node_modules:/project/node_modules \ -v ~/.cache/electron:/root/.cache/electron \ -v ~/.cache/electron-builder:/root/.cache/electron-builder \ electronuserland/builder:wine
命令启动docker容器,最后运行
yarn run build:clean && yarn run pack && yarn run build -w
命令生成exe包
FAQ
页面打开或刷新404
需要将Vue-Router的mode改为hash
,默认在web开发的时候我们都用history
mode使浏览器地址栏好看一些
某些系统ico显示异常
重制ico切忌直接将图片的后缀名修改为ico,因为用于windows软件的ico图标不是单张图片而是图片集合,可以通过icofx 3
软件将png转换为ico。
部分系统关机,第二天开机后Electron应用被删除
首先是因为该应用集成了electron-updater
,其次是因为没有将autoInstallOnAppQuit属性设置为false,最后是因为Electron应用关闭是系统关机导致的。
win10中的Electron签名应用无法正常升级
Electron应用签名后,升级应用会出现错误CODE:ERR_UPDATER_INVALID_SIGNATURE
(源文件:NsisUpdater.js),导致无法正常升级。
解决办法:配置verifyUpdateCodeSignature
值为false,参考配置文档:https://www.electron.build/configuration/win
Electron应用被360拦截,甚至当作病毒直接卸载
- 每次发版本之前到http://open.soft.360.cn/report.php申请误报
- 申请数字签名,能减少360拦截的情况,但可能还需要申请误报
- 通过热更新更新应用,或者在Electron应用中只是以webview展示页面(
待实验
)
Electron应用在某些系统某段时间内请求很慢(Electron版本:4.0.2)
请求很慢是指Network-Timing-Connection Start-Stalled时间长,可能5s、10s甚至导致超时。
我们这边有且仅有两台电脑出现这样的问题,一台(公司的)使用360清理C盘解决(因为应用装在C盘了),另一台(门店的)过了两天自己好了,不清楚怎么解决的。具体原因还不清楚
Electron自带的打印功能似乎
比较弱(待研究
)
目前使用LODOP替换Electron自带的打印功能,但是有两个坑:
- LODOP免费版使用静默打印底部会有广告
- 使用Vue开发业务,必须要写内联样式才能兼容IE版本11以下的系统,否则打印样式会不起作用