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开发的时候我们都用historymode使浏览器地址栏好看一些
某些系统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以下的系统，否则打印样式会不起作用
