简介

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命令。

  1. npm install -g vue-cli # 全局安装vue-cli
  2. 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`)
  3. cd my-project # 进入工程目录
  4. yarn install # 安装依赖

如果下载失败,请多尝试几次,或者手动下载失败的包到指定路径中

开发

  1. yarn run dev # 进入开发模式

运行效果:

my-project

构建

  1. yarn run build:clean # 清理node_modules
  2. yarn run pack # webpack打包
  3. yarn run build -w # 构建windows包,-m 构建mac包

调试

主进程

  1. 使用console.log打印,在Terminal中查看
  2. 借助VSCode,配置launch.json实现调试(windows7系统上未实现,会报一个命令找不到,但是那个命令只有mac有:-()

官方教程

  1. 调试主进程
  2. 使用 VSCode 进行主进程调试

渲染进程

  1. 使用console.log打印,在console中查看
  2. 使用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包为例

  1. 获取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带的命令行。
  2. yarn run build -w命令进行如下改造:

    Windows:set WIN_CSC_LINK=pfx文件全路径 && set WIN_CSC_KEY_PASSWORD=pfx文件密码 && yarn run build -w
  3. win节点添加新属性:

    "build": {
      ...
      "win": {
        "certificateFile": "pfx文件全路径",
        "certificatePassword": "pfx文件密码"
      }
      ...
    }

Linux中打windows包

  • 如果Local Machine是Windows7 x64,需执行1~5步
  • 如果Local Machine是CentOS7,仅需执行3~5步
  1. 打开Docker Quickstart Terminal
  2. 运行docker-machine ssh [虚拟机名称]命令进入虚拟机
  3. 运行docker pull electronuserland/builder:wine命令下载打包环境
  4. 修改工程文件夹下的.travis.yml文件内容为https://raw.githubusercontent.com/fengqingxiuyi/electron-vue-demo/master/.travis.yml
  5. 进入工程文件夹,然后运行

    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拦截,甚至当作病毒直接卸载

  1. 每次发版本之前到http://open.soft.360.cn/report.php申请误报
  2. 申请数字签名,能减少360拦截的情况,但可能还需要申请误报
  3. 通过热更新更新应用,或者在Electron应用中只是以webview展示页面(待实验

Electron应用在某些系统某段时间内请求很慢(Electron版本:4.0.2)

请求很慢是指Network-Timing-Connection Start-Stalled时间长,可能5s、10s甚至导致超时。

我们这边有且仅有两台电脑出现这样的问题,一台(公司的)使用360清理C盘解决(因为应用装在C盘了),另一台(门店的)过了两天自己好了,不清楚怎么解决的。具体原因还不清楚

Electron自带的打印功能似乎比较弱(待研究

目前使用LODOP替换Electron自带的打印功能,但是有两个坑:

  1. LODOP免费版使用静默打印底部会有广告
  2. 使用Vue开发业务,必须要写内联样式才能兼容IE版本11以下的系统,否则打印样式会不起作用

重要链接

添加新评论