前言

本文包含打包、自动更新、简易API、调试、进程通信等相关知识点，内容较多，可能会引起不适，请酌情查看（手动滑稽）。

electron

简介

electron是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。

electron是一个运行时环境，包含Node和Chromium，可以理解成把web应用运行在node环境中

结构

electron主要分为主进程和渲染进程，关系如下图

electron运行package.json中的main字段标明脚本的进程称为主进程

在主进程创建web页面来展示用户页面，一个electron有且只有一个主进程

electron使用Chromium来展示web页面，每个页面运行在自己的渲染进程中

快速开始

接下来，让代码来发声，雷打不动的hello world

创建文件夹，并执行npm init -y，生成package.json文件，下载electron模块并添加开发依赖

mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
复制代码

下载速度过慢或失败，请尝试使用cnpm，安装方式如下

# 下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 下载electron
cnpm i electron -D
复制代码

创建index.js，并写入以下内容

const {app, BrowserWindow} = require('electron')// 创建全局变量并在下面引用，避免被GC
let winfunction createWindow () {// 创建浏览器窗口并设置宽高win = new BrowserWindow({ width: 800, height: 600 })// 加载页面win.loadFile('./index.html')// 打开开发者工具win.webContents.openDevTools()// 添加window关闭触发事件win.on('closed', () => {win = null  // 取消引用})
}// 初始化后 调用函数
app.on('ready', createWindow)  // 当全部窗口关闭时退出。
app.on('window-all-closed', () => {// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，// 否则绝大部分应用及其菜单栏会保持激活。if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。if (win === null) {createWindow()}
})
复制代码

创建index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello World!</title></head><body><h1 id="h1">Hello World!</h1>We are using node<script>document.write(process.versions.node)</script>Chrome<script>document.write(process.versions.chrome)</script>,and Electron<script>document.write(process.versions.electron)</script></body>
</html>
复制代码

最后，修改packge.json中的main字段,并添加start命令

{...main:'index.js',scripts:{"start": "electron ."}
}
复制代码

执行npm run start后，就会弹出我们的应用来。

调试

我们知道electron有两个进程，主进程和渲染进程，开发过程中我们需要怎么去调试它们呢？老太太吃柿子，咱们捡软的来

渲染进程

BrowserWindow 用来创建和控制浏览器窗口，我们调用它的实例上的API即可

win = new BrowserWindow({width: 800, height: 600})
win.webContents.openDevTools() // 打开调试
复制代码

调试起来是和Chrome是一样的，要不要这么酸爽

主进程

使用VSCode进行调试

使用VSCode打开项目，点击调试按钮

点击调试后的下拉框

选择添加配置，选择node

此时会把默认的调试配置打开，大概长这样

什么？你的不是，不是的话，就直接把下面的复制并替换你的配置

差不多这么办，那就把configurations里面第二项复制到你的configurations配置里面，第一个配置是用来调试node的

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "启动程序","program": "${workspaceFolder}/main.js"},{"name": "Debug Main Process","type": "node","request": "launch","cwd": "${workspaceFolder}","runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron","windows": {"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"},"args" : ["."]}]
}
复制代码

可以看到${workspaceFolder}，这是关于VSCode的变量，用来表示当前打开的文件夹的路径

更多变量请猛戳这里

修改完配置后，我们调试面板，选择我们刚才配置的

在代码中标记需要调试的地方，然后点击绿色的小三角，就可以愉快的调试了

进程通信

在Electron中, GUI 相关的模块 (如 dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的，以下介绍几种进程间通讯的方法。

哥俩好

ipcMain和ipcRenderer是两个好基友，通过这两个模块可以实现进程的通信。

ipcMain 在主进程中使用，用来处理渲染进程（网页）发送的同步和异步的信息
ipcRenderer 在渲染进程中使用，用来发送同步或异步的信息给主进程，也可以用来接收主进程的回复信息。

以上两个模块的通信，可以理解成发布订阅模式,接下来，我们看下它们具体的使用方法

主进程

const {ipcMain} = require('electron')// 监听渲染程序发来的事件
ipcMain.on('something', (event, data) => {event.sender.send('something1', '我是主进程返回的值')
})
复制代码

渲染进程

const { ipcRenderer} = require('electron') // 发送事件给主进程
ipcRenderer.send('something', '传输给主进程的值')  // 监听主进程发来的事件
ipcRenderer.on('something1', (event, data) => {console.log(data) // 我是主进程返回的值
})
复制代码

以上代码使用的是异步传输消息，electron也提供了同步传输的API。

发送同步消息将会阻塞整个渲染进程，你应该避免使用这种方式 - 除非你知道你在做什么。

切忌用 ipc 传递大量的数据，会有很大的性能问题，严重会让你整个应用卡住。

remote模块

使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息。

const { dialog } = require('electron').remote
dialog.showMessageBox({type: 'info', message: '在渲染进程中直接使用主进程的模块'})
复制代码

webContents

webContents负责渲染和控制网页, 是 BrowserWindow 对象的一个属性, 我们使用send方法向渲染器进程发送异步消息。

主进程

const {app, BrowserWindow} = require('electron')let winapp.on('ready', () => {win = new BrowserWindow({width: 800, height: 600})// 加载页面win.loadURL('./index.html')// 导航完成时触发，即选项卡的旋转器将停止旋转，并指派onload事件后。win.webContents.on('did-finish-load', () => {// 发送数据给渲染程序win.webContents.send('something', '主进程发送到渲染进程的数据')})
})
复制代码

渲染进程

<!DOCTYPE html>
<html><head></head><body><script>require('electron').ipcRenderer.on('something', (event, message) => {console.log(message) // 主进程发送到渲染进程的数据})</script></body>
</html>
复制代码

渲染进程数据共享

更多情况下，我们使用HTML5 API实现，如localStorage、sessionStorage等，也可以使用electron的IPC机制实现

主进程

global.sharedObject = {someProperty: 'default value'
}
复制代码

渲染进程

第一个页面

require('electron').remote.getGlobal('sharedObject').someProperty = 'new value'
复制代码

第二个页面

console.log(require('electron').remote.getGlobal('sharedObject').someProperty) // new value
复制代码

总结

以上四个方法均可实现主进程和渲染进程的通信，可以发现使用remote模块是最简单的，渲染进程代码中可以直接使用electron模块

常用模块

快捷键与菜单

本地快捷键

只有在应用聚焦的时候才会触发，主要代码如下

官方文档亲测没有效果

const { Menu, MenuItem } = require('electron')
const menu = new Menu()menu.append(new MenuItem({label: '自定义快捷键',submenu: [{label: '测试',accelerator: 'CmdOrCtrl+P',click: () => { console.log('我是本地快捷键')}}]
}))
Menu.setApplicationMenu(menu)
复制代码

全局快捷键

注册全局，无论应用是否聚焦，都会触发，使用globalShortcut来注册，主要代码如下,

const {globalShortcut, dialog} = require('electron')app.on('read', () => {globalShortcut.register('CmdOrCtrl+1', () => {dialog.showMessageBox({type: 'info',message: '你按下了全局注册的快捷键'})})
})
复制代码

显示如下，使用了dialog模块

上下文菜单

上下文菜单就是我们点击右键的时候显示的菜单, 设置在渲染进程里面

主要代码如下

const remote = require('electron').remote;  // 通过remote模块使用主程序才能使用的模块
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));window.addEventListener('contextmenu', (e) => {e.preventDefault();menu.popup(remote.getCurrentWindow());
}, false);
复制代码

应用菜单

上文中我们通过Menu模块创建了本地快捷键，应用菜单也是用Menu模块，我们看到长得好像一样，其实实现起来也差不多，我们这里使用创建模版的方式来实现，主要代码如下：

const {app, Menu} = require('electron')
const template = [{label: '操作',submenu: [{label: '复制',accelerator: 'CmdOrCtrl+C',role: 'copy'}, {label: '粘贴',accelerator: 'CmdOrCtrl+V',role: 'paste'}, {label: '重新加载',accelerator: 'CmdOrCtrl+R',click: function (item, focusedWindow) {if (focusedWindow) {// on reload, start fresh and close any old// open secondary windowsif (focusedWindow.id === 1) {BrowserWindow.getAllWindows().forEach(function (win) {if (win.id > 1) {win.close()}})}focusedWindow.reload()}}}]},{label: '加载网页',submenu: [{label: '优酷',accelerator: 'CmdOrCtrl+P',click: () => { console.log('time to print stuff') }},{type: 'separator'},{label: '百度',}]}
]if (process.platform === 'darwin') {const name = electron.app.getName()template.unshift({label: name,submenu: [{label: `关于 ${name}`,role: 'about'}, {type: 'separator'}, {label: '服务',role: 'services',submenu: []}, {type: 'separator'}, {label: `隐藏 ${name}`,accelerator: 'Command+H',role: 'hide'}, {label: '隐藏其它',accelerator: 'Command+Alt+H',role: 'hideothers'}, {label: '显示全部',role: 'unhide'}, {type: 'separator'}, {label: '退出',accelerator: 'Command+Q',click: function () {app.quit()}}]})
}app.on('read', () => {const menu = Menu.buildFromTemplate(template);Menu.setApplicationMenu(menu);
})复制代码

系统托盘

主要代码

const { app, Tray } = require('electron') 
/* 省略其他代码 */
let tray;
app.on('ready', () => {tray = new Tray(__dirname + '/build/icon.png');//系统托盘图标const contextMenu = Menu.buildFromTemplate([ // 菜单项{label: '显示', type: 'radio', click: () => {win.show()}},{label: '隐藏', type: 'radio', click: () => {win.hide()}},])// tray.on('click', () => { //  鼠标点击事件最好和菜单只设置一种//   win.isVisible() ? win.hide() : win.show()// })tray.setToolTip('This is my application.') // 鼠标放上时候的提示tray.setContextMenu(contextMenu) // 应用菜单项
})复制代码

模块一览

MenuItem

globalShortcut

dialog

tray

打开页面

shell

主进程打开页面，会调用默认的浏览器打开页面，使用shell模块

const { app,shell } = require('electron')app.on('ready', () => {shell.openExternal('github.com')
})
复制代码

应用启动后就会使用默认浏览器打开github页面

window.open

渲染进程中使用，当前应用打开页面

window.open('github.com')
复制代码

webview

使用webview可以在一个独立的 frame 和进程里显示外部 web 内容

直接在index.html中使用即可

<webview id="foo" src="https://www.github.com/" style="display:inline-flex; width:640px; height:480px"></webview>
复制代码

模块一览

shell

window.open

webview

QA

其他应用模块和API请下载

演示应用程序

演示应用程序中文版

模版

electron-forge

electron-forge包含vue、react、Angular等开箱即用的模版。

npm i -g electron-forge
electron-forge init my-app template=react
cd my-app
npm run start 
复制代码

目录结构如下

.compilerc是electron-compile的配置文件,和.babelrc类似

electron-compile是一种转换规则，支持在应用程序中编译js和css

electron-react-boilerplate

如果你不希望任何工具，而想要简单地从一个模板开始构建,react-electron模版可以了解下。

electron-react-boilerplate 是双package.json配置项目，目录如下

electron-vue

electron-vue充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

目录结构如下

中文教程

打包

怎么将我们开发好的应用打包成.app或.exe的执行文件，这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包

目前，主流的打包工具有两个electron-packager和electron-builder

Mac打包window安装包需下载wine

brew install wine

如果有丢失组件，按照报错信息进行下载即可

electron-packager

electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

执行npm i electron-packager -D进行安装

electron-packager . 快速打包

打包详解

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
复制代码

sourcedir 项目入口根据package.json的目录
appname 包名
platform 构建平台包含 darwin, linux, mas, win32 all
arch 构建架构包含ia32,x64,armv7l,arm64
out 打包后的地址
icon 打包图标
asar 是否生成app.asar, 不然就是自己的源码
overwrite 覆盖上次打包
ignore 不进行打包的文件

第一次打包需要下载二进制的包耗时会久一些，以后走缓存就快的多了。

打包后目录为

其中electron-quick-start可以直接打开运行

缓存地址

Mac ~/Library/Caches/electron/
Windows $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/
Linux $XDG_CACHE_HOME or ~/.cache/electron/

electron-builder

electron-builder是一个完整的解决方案，对于macos、windows、linux下的electron app，它可以提供打包及构建的相关功能。同时，它还提供开箱即用的“自动更新”功能支持

npm i electron-builder -D 下载

electron-builder打包

出现如下

同样是第一次打包时间会比较长，别着急，静候佳音。

会默认打包在dist目录，包含如下

mac文件里有运行时文件，默认使用asar方式进行打包

electron-builder --dir 只会生成包文件，对测试有用

坑坑坑

第一次打包的时候会比较慢，如果你和我手欠直接退出了，再次打包的时候，恭喜你，出错了。报错信息如下

  • electron-builder version=20.28.2• loaded configuration file=package.json ("build" field)• description is missed in the package.json appPackageFile=/Users/shisan/Documents/self/you-app/package.json• writing effective config file=dist/builder-effective-config.yaml• no native production dependencies• packaging       platform=darwin arch=x64 electron=2.0.7 appOutDir=dist/mac• cannot unpack electron zip file, will be re-downloaded error=zip: not a valid zip file⨯ zip: not a valid zip fileError: /Users/shisan/Documents/self/you-app/node_modules/app-builder-bin/mac/app-builder exited with code 1at ChildProcess.childProcess.once.code (/Users/shisan/Documents/self/you-app/node_modules/builder-util/src/util.ts:254:14)at Object.onceWrapper (events.js:272:13)at ChildProcess.emit (events.js:180:13)at maybeClose (internal/child_process.js:936:16)at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
From previous event:at unpack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/out/electron/ElectronFramework.js:191:18)at Object.prepareApplicationStageDirectory (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/electron/ElectronFramework.ts:148:50)at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/platformPackager.ts:179:21at Generator.next (<anonymous>)
From previous event:at MacPackager.doPack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/platformPackager.ts:166:165)at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/macPackager.ts:88:63at Generator.next (<anonymous>)
From previous event:at MacPackager.pack (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/macPackager.ts:80:95)at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:376:24at Generator.next (<anonymous>)at xfs.stat (/Users/shisan/Documents/self/you-app/node_modules/fs-extra-p/node_modules/fs-extra/lib/mkdirs/mkdirs.js:56:16)at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/polyfills.js:287:18at FSReqWrap.oncomplete (fs.js:171:5)
From previous event:at Packager.doBuild (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:344:39)at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:314:57at Generator.next (<anonymous>)at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/graceful-fs.js:99:16at /Users/shisan/Documents/self/you-app/node_modules/graceful-fs/graceful-fs.js:43:10at FSReqWrap.oncomplete (fs.js:153:20)
From previous event:at Packager._build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:285:133)at /Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:281:23at Generator.next (<anonymous>)
From previous event:at Packager.build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/packager.ts:238:14)at build (/Users/shisan/Documents/self/you-app/node_modules/app-builder-lib/src/index.ts:58:28)at build (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/builder.ts:227:10)at then (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:42:48)at runCallback (timers.js:763:18)at tryOnImmediate (timers.js:734:5)at processImmediate (timers.js:716:5)
From previous event:at Object.args [as handler] (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:42:48)at Object.runCommand (/Users/shisan/Documents/self/you-app/node_modules/yargs/lib/command.js:237:44)at Object.parseArgs [as _parseArgs] (/Users/shisan/Documents/self/you-app/node_modules/yargs/yargs.js:1085:24)at Object.get [as argv] (/Users/shisan/Documents/self/you-app/node_modules/yargs/yargs.js:1000:21)at Object.<anonymous> (/Users/shisan/Documents/self/you-app/node_modules/electron-builder/src/cli/cli.ts:25:28)at Module._compile (internal/modules/cjs/loader.js:654:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)at Module.load (internal/modules/cjs/loader.js:566:32)at tryModuleLoad (internal/modules/cjs/loader.js:506:12)at Function.Module._load (internal/modules/cjs/loader.js:498:3)at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)at startup (internal/bootstrap/node.js:201:19)at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! you-app@1.0.0 dist: `electron-builder --mac --x64`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the you-app@1.0.0 dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shisan/.npm/_logs/2018-08-22T06_28_55_102Z-debug.log
✖  Error building interactive interface
复制代码

问题是在下载.zip包的时候，中断了操作，以后所有执行打包的时候，找不到那个文件（或者是残缺的文件）就报错了，需要手动清除下缓存缓存路径在~/Library/Caches/electron/

常用参数

electron-builder配置文件写在package.json中的build字段中

"build": {"appId": "com.example.app", // 应用程序id "productName": "测试", // 应用名称 "directories": {"buildResources": "build", // 构建资源路径默认为build"output": "dist" // 输出目录 默认为dist},"mac": {"category": "public.app-category.developer-tools", // 应用程序类别"target": ["dmg", "zip"],  // 目标包类型 "icon": "build/icon.icns" // 图标的路径},"dmg": {"background": "build/background.tiff or build/background.png", // 背景图像的路径"title": "标题","icon": "build/icon.icns" // 图标路径},"win": {"target": ["nsis","zip"] // 目标包类型 }
}
复制代码

应用程序类别

更多参数

使用electron-package或者electron-builder进行打包，就不需要asar手动打包了，这两个工具已经集成进去了，以下内容只做了解即可

asar

简介

asar是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容。

使用

上面我们看到使用electron-package进行打包的时候，可以添加--asar参数，它的作用就是将我们的源码打包成asar格式，不使用的话就是我们的源码。

依旧使用electron-quick-start模版，使用electron-package进行打包

打包后目录中选择应用，右键显示包内容

依次打开路径 Contents -> Resources -> app

就可以看到我们的原文件了

使用electron-package . --asar进行打包，再次查看app中的源文件已经打包成asar文件了

常用命令

打包

asar pack|p <dir> <ouput>
复制代码

如 asar ./ app.asar

解压

asar extract|e <archive> <output>
复制代码

如 asar e app.asar ./

事实上，就算使用了asar打包方式，我们的源代码依旧是暴露的，使用asar解压仍然能轻易解密，使用webpack将代码压缩混淆才是王道。

自动更新

我们使用electron-builder和electron-updater来完成应用的自动更新， 并不是electron里面的autoUpdater

流程

创建证书

无论使用哪种方式进行自动更新，代码签名是必不可少的，我们使用创建本地的证书来进行测试自动更新

在其他中找到钥匙串访问

依次选择 钥匙串访问 -> 证书助理 -> 创建证书，创建一个新的证书

起个响亮的名字，证书类型选择代码签名，然后点击创建

创建完成后在钥匙串中找到它

右键，选择更改信任设置，将信任设置成始终信任

代码签名

没有代码签名
代码签名

设置环境变量

执行sudo vi ~/.bash_profile, 添加变量

export CSC_NAME="electron_update"
复制代码

执行source ~/.bash_profile 重载变量文件

执行echo $CSC_NAME 查看变量有没有生效，没有生效的话，执行上面命令重载文件

多次重载，依旧获取不到变量，直接退出终端，再次登录终端即可

打包代码

使用electron-builder进行打包，项目使用electron-quick-start

我们先添加打包的build配置，在package.json中添加

"build": {"appId": "org.electron.com","publish": [{"provider": "generic","url": "http://172.28.86.36:8080/" }],"productName": "我的","directories": {"output": "dist"},"mac": {"target": ["dmg","zip"]},"win": {"target": ["nsis","zip"]},"dmg": {"backgroundColor": "red","title": "made","contents": [{"x": 400,"y": 128,"type": "link","path": "/Applications"}]}
}
复制代码

前面，我们说过了build字段中各个参数的含义，这里就不赘述了，这里添加了publish字段，它是配置我们自动更新的信息，url是服务器地址。

服务器我们可以使用http-server模块, 快速搭建一个静态服务器

执行打包后，输出

主要看下latest-mac.yml文件

可以看到version字段，用来表明当前应用的版本，那这个字段是从哪来的呢？

没错就是我们的package.json文件中version字段

自动更新

在主进程中写入以下代码

const {app, BrowserWindow, ipcMain} = require('electron')const { autoUpdater } = require('electron-updater')// 本地服务器地址
const feedURL = `http://172.28.82.40:8080/`let mainWindowfunction createWindow () { // 创建窗口mainWindow = new BrowserWindow({width: 800, height: 600})mainWindow.loadFile('index.html')mainWindow.on('closed', function () {mainWindow = null})
}app.on('ready', createWindow)app.on('window-all-closed', function () {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', function () {if (mainWindow === null) {createWindow()}
})// 监听自定义update事件
ipcMain.on('update', (e, arg) => {checkForUpdate()
})const checkForUpdate = () => {// 设置检查更新的 url，并且初始化自动更新autoUpdater.setFeedURL(feedURL)// 监听错误 autoUpdater.on('error', message => {sendUpdateMessage('err', message)})// 当开始检查更新的时候触发autoUpdater.on('checking-for-update', message => {sendUpdateMessage('checking-for-update', message);})// autoUpdater.on('download-progress', function(progressObj) {sendUpdateMessage('downloadProgress', progressObj);});// 更新下载完成事件autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {ipcMain.on('updateNow', (e, arg) => {autoUpdater.quitAndInstall();});sendUpdateMessage('isUpdateNow');});// 向服务端查询现在是否有可用的更新autoUpdater.checkForUpdates();
}// 发送消息触发message事件
function sendUpdateMessage(message, data) {mainWindow.webContents.send('message', { message, data });
}
复制代码

然后更改我们的渲染进程的代码

const {ipcRenderer} = require ('electron');
const button = document.querySelector('#button')const ul = document.querySelector('ul')
button.onclick = () => {ipcRenderer.send('update')
}ipcRenderer.on('message', (event, {message,data }) => {let li = document.createElement('li')li.innerHTML = message + " <br>data:" + JSON.stringify(data) +"<hr>";ul.appendChild(li)if (message === 'isUpdateNow') {if (confirm('是否现在更新？')) {ipcRenderer.send('updateNow');}}
})
复制代码

页面代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello World!</title></head><body><h1>Hello World!</h1><h1>当前版本是1.0.3</h1><ul><li>生命周期过程展示</li></ul><button id="button">点击我</button><script>// You can also require other files to run in this processrequire('./renderer.js')</script></body>
</html>
复制代码

这里使用按钮点击事件触发更新操作。

直接打包，安装这个1.0.3的版本。

然后将package.json的文件中的version字段更改成1.0.5，将index.html的更改成1.0.5，进行打包。

随便找个地方创建个文件夹，如test

将打包的文件移动到test中，执行http-server ./，搭建服务

当我们点击按钮的时候，就可以进行更新应用了，如下图

点击ok后，静候片刻，更新完后就打开了最新版本的应用

以上就完成了electron的自动更新。

最后

本文所有代码请戳github了解更多

ocr相关demo借(chao)鉴(xi)了Jartto的electron-ocr，下文有链接。

参考

electron-packager命令常用参数大全

Electron 打包Mac安装包代码签名问题解决方案

苏南大叔的electron

electron-ocr

Electron 打包Mac安装包代码签名问题解决方案文中所说签名均需要是买了Apple开发者账号的。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

DB2中常用sql语句语法
DB2 提供了关连式资料库的查询语言sql(structured query language)，是一种非常口语化、既易学又易懂的语法。此一语言几乎是每个资料库系统都必须提供的，用以表示关连式的操作，包含了资料的定义（ddl）以及资料的处理（dml）。sql原来拼成sequel，这语言的原型以"系统 …...
2024/4/24 23:18:16
Google Hack
Google hack是现在最火爆的黑客技术之一。其原理很简单，就是利用搜索引擎强大的所搜能力，来查找一些存在漏洞的网站。要利用Google来查找网站的漏洞自然要学会Google这个搜索引擎的语法来。下面给大家讲解一下Google的语法，然后在教大家怎么利用它来入侵，这项技术在我们的撒…...
2024/4/24 23:18:18
错误: 找不到符号符号: 方法 getResources() 位置: 类型为String的变量 dataSex
android 在使用DataBinding出现的问题出现下面这种错误很明显TextView的id和设置的属性android:id="@+id/data_sex"android:text=@{data.sex==null?@string/data_unfilled:data.sex}是不是很相似，解决这种问题把id改一下就好了！...
2024/4/24 23:18:14
简单英译汉SQL脚本
create table t_dictionary(word varchar(200), trans varchar(1000)); insert into t_dictionary values(abandon,v.抛弃，放弃); insert into t_dictionary values(abandonment,n.放弃); insert into t_dictionary values(abbreviation,n.缩写); insert into t_dictionary va…...
2024/4/24 23:18:16
weblogic 包加载与冲突等问题
问题1(org.apache.commons.lang.ClassUtils.getClass)?Caused by: org.springframework.beans.factory.BeanCreationException: **Error creating bean with namedorado.dataParser**defined inclasspath resource [com/bstek/dorado/data/xml-parser-context.xml]: **Cannot …...
2024/4/24 23:18:12
electron打包（electron-builder/electron-packager）及打包过程中的报错解决
文章目录一、electron-packager二、electron-builder1.`electron-builder`的配置（1）在`package.json`中直接配置nsis配置命令行参数（CLI）Commands(命令):Building(构建参数):Publishing(发布):Deprecated(废弃):Other(其他):Examples(例子):TargetConfiguration(构建目标配…...
2024/4/24 23:18:12
C++中Static作用和使用方法
1、什么是static?static 是C++中很常用的修饰符，它被用来控制变量的存储方式和可见性。2、为什么要引入static?函数内部定义的变量，在程序执行到它的定义处时，编译器为它在栈上分配空间，大家知道，函数在栈上分配的空间在此函数执行结束时会释放掉，这样就产生了一个问题…...
2024/4/14 21:15:26
9、信息收集篇————Google Hacking
前言Google Hack是一种借助搜索引擎构造特殊的搜索语句查询来获取相关信息的一种方法，目前虽然Google已经退出中国市场，Google也无法正常使用（除非使用网络代理进行翻墙），但是它的一些语言对于Baidu等搜素引擎来也是同样的适用，本小节就为大家演示使用Google Hacking进行…...
2024/4/20 7:48:29
Java static作用及加载顺序
在java中，static可以修饰成员变量、成员方法、代码块、内部类。static修饰成员变量，可以达到全局变量的效果（Java没有全局变量的概念），当一个类定义了static变量，其实就是申请一个内存地址，所有该类的对象共享这个静态成员变量。静态变量引用方式：类名.静态变量…...
2024/5/2 22:09:49
Hibernate级联删除——JPA下的Hibernate实现一对多级联删除CascadeType.DELETE_ORPHAN基于注解方式...
很多人对持久层概念搞不清JPA、Hibernate、EJB3.0的关系，这里做一下简单的说明：JPA是一个持久层设计接口，EJB3.0和Hibernate是具体的实现类，EJB3.0和Hibernate的功能近似相等的(Hibernate没有Session Bean，Spring MVC3的SessionAttribute跟Session Bean近似）。理论是使用…...
2024/4/14 21:15:22
【Electron】Electron开发入门（八）：自定义electron框架外壳（shell）的菜单（Menu）...
1.自定义electron框架外壳（shell）的菜单（Menu） electron的main.js里代码： const Menu = require(electron).Menu; var template = [{label: 关闭,click: function () { win.close();console.log("关闭")},// submenu: [// {// label: Undo,// acceler…...
2024/4/14 21:15:21
class.getClassLoader().getResources
this.getClass().getClassLoader().getResource("template"); 首先，调用对象的getClass()方法是获得对象当前的类类型，这部分数据存在方法区中，而后在类类型上调用getClassLoader()方法是得到当前类型的类加载器，我们知道在Java中所有的类都是通过加载器加载到…...
2024/4/14 21:15:20
electron快速开始
初学electron 接触了两周的electron，感觉还不错，以后pc端基本上可以用electron加壳写pc端应用了，可以用nodejs的模块，也可以用es6、7，还可以直接操作系统文件。基本上可以完成大多数pc应用了。就是安装慢成狗了。。。。用镜也卡！快速开始 Electron通过为运行时提供丰富…...
2024/4/14 21:15:20
Zeal丨windows下离线文档阅读
Zeal丨windows下离线文档阅读前言：大家写代码的时候总会有些方法或者属性不太清楚，这时候我们就会打开浏览器，然后找官方api或者直接搜索引擎找对应问题，无疑花费了大量的时间。所以，你需要一个桌面应用Zeal，直接在上面搜关键字就能找到文档API。下载官方网址：https:…...
2024/4/18 4:28:09
Unity中Static关键字作用漫谈
先上图，请细细观看static关键字修饰类加不加会有什么影响，为啥要这样做，理由是什么，我会往当前类加成员函数和字段，会报错提示说在静态类中不能申明实例化成员。是什么意思呢，就是静态类不能申明字段和普通方法。有个语法是字段和普通方法是通过类的对象来访问，既然sta…...
2024/4/24 23:18:12
常用的getResources()系列
以例子形式说明如何提取资源文件设置view或sting： private Context ctx;TextView mText = (TextView)findViewById(R.id.text); ImageView mImage = (ImageView)findViewById(R.id.image); TextView[] mTextViews; String[] arrays; String str; (1)R.dimen.xxx mText.setTex…...
2024/4/24 23:18:10
Sql Server 数据库实验报告
数据库原理实验报告目录实验一 SQL Server的安装和配置 4 一、实验目的 4 二、实验内容 4 三、实验步骤 4 四、实验代码和结果 4 五、实验总结与体会 4 实验二创建数据库 5 一、实验目的 5 二、实验内容 5 三、实验步骤 5 四、实验代码和结果 6 五、实验总结与体会 6 实验…...
2024/4/24 23:18:08
jpa 一对多删除或者减少多的一方笔记
OneToMany一的一方是Activity, 多的一方是ActivityAttachmentEntity.下面是一的一方引用多的一方。mappedBy="activityEntity"表示一的一方放弃维护多的一方的外键fetch=EAGER表示不要懒加载orphanRemoval=true (重点) 默认false按照官方给出的字面意思是：如果删除关…...
2024/4/24 23:18:07
【Electron】Electron开发入门（一）：开发环境搭建
刚接触Electron+js开发PC端桌面应用程序的时候，简直一头雾水，搜了网上很多教程，有的要么讲的零零碎碎，要么就是版本太低，很多API语法都不能用了；现在我把一些有用的教程归纳一下，并把目前最新Electron版本1.4.0的使用语法贴出来，目的是为了有个能正常运行的DEMO教程；一…...
2024/4/24 23:18:06
Hibernate --- 注解
一、类级别注解 1.1 @Entity --- 声明一个实体类，必加注解属性： (1)name : 可选，对应数据库中的一个表，若表名与实体类名相同，则可以省略。1.2 @Table --- 实体对应的数据库表，通常和@Entity配合使用属性： (1)name : 指定表的名称 (2)catalog : 指定数据库名称 (3)sche…...
2024/4/24 23:18:08

[electron]终极奥义 五千字教程丢给你

前言

electron

简介

结构

快速开始

调试

渲染进程

主进程

进程通信

哥俩好

remote模块

webContents

渲染进程数据共享

总结

常用模块

快捷键与菜单

本地快捷键

全局快捷键

上下文菜单

应用菜单

系统托盘

模块一览

打开页面

shell

window.open

webview

模块一览

QA

模版

electron-forge

electron-react-boilerplate

electron-vue

更多模版

打包

electron-packager

打包详解

electron-builder

常用参数

asar

简介

使用

常用命令

自动更新

流程

创建证书

代码签名

设置环境变量

打包代码

自动更新

最后

参考

相关文章

最新文章

[electron]终极奥义五千字教程丢给你