electron打包更新与集成sqlite⼩总结
本⽂主要讲以下⼏点防攀爬网
简单介绍electron
electron的打包配置
electron的⾃动更新
electron如何集成sqlite3
electron的资料分享
electron在内⽹开发的⼀点点建议
electron主进程的⽣命周期
快速开始⼀个electron与简介
electron是什么
打开官⽹第⼀眼就是使⽤ JavaScript, HTML 和 CSS 构建跨平台的桌⾯应⽤，更加通俗⼀点就是⼀个桌⾯浏览器，实际上这样理解也是对的。因为electron就是通过javaScript使chromium来展⽰web页⾯
我为啥⽤它
前端可⽤制作跨平台应⽤
⽣态圈好
由github开发维护
electron（70+k）⽐nw.js （35+k）Star多两倍
electron产品我使⽤过表现优秀
Vscode
Atom
gitHub桌⾯端
...
如何快速上⼿electron
我认为以下是快速开始的最好办法
⼀定要多读官⽅⽂档，可以减少⼤部分时间
官⽅提供的快速开始模板
官⽅提供快速熟悉的API的模板
直接使⽤electron官⽅提供的例⼦
// 看这个的源码，很简单可以快速上⼿
# 克隆这仓库
$ git clone github/electron/electron-quick-start
# 进⼊仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运⾏应⽤
$ npm start
复制代码
如果想了解这个electron的API可以克隆这个库并运⾏
git clone github/electron/electron-api-demos
cd electron-api-demos
npm install
npm start
复制代码
如何调试electron
渲染进程调试（web页⾯） 渲染器进程这chrome浏览器⼀样，BrowserWindow创建窗⼝后添加窗⼝实例.webContents.open 主进程Electron调试 使⽤vsCode中的debug，注意调试路径，如果需要增加变量环境依照配置增加即可 electron中主进程的⽣命周期以及常⽤事件和渲染层
主要聊electron中主进程的⽣命周期，渲染器的部分⽣命周期，⼀般只介绍通⽤都存在的，如果只有某个系统有的api就不写在这⾥了，⼤家可以⾃⾏查阅
主进程中的⽣命周期
will-finish-launching：当应⽤程序完成基础的启动的时候被触发
web-contents-created:webContents被创建完成
browser-window-created:BrowserWindow被创建完成
ready：当 Electron 完成初始化时被触发
remote-require: 引⼊remote时被调⽤
before-quit: 在应⽤程序开始关闭窗⼝之前触发
will-quit：当所有窗⼝都已关闭并且应⽤程序将退出时发出
quit: 在应⽤程序退出时发出
window-all-closed：当所有的窗⼝都被关闭时触发
这⾥要注意如果是进程杀死退出的所有都不触发，如果是cmd+Q或者开发者使⽤app.quit()退出的window-all-closed是不会被触发的，基本操作⼀般在ready中处理
沉砂池
进程相关
gpu-process-crashed: 当 gpu 进程崩溃或被杀时触发。
其他
browser-window-focus: 在 browserWindow 获得焦点时发出
browser-window-blur：在 browserWindow 失去焦点时发出
渲染进程--（浏览器）-BrowserWindow
ready-to-show：当页⾯已经渲染完成(但是还没有显⽰) 并且窗⼝可以被显⽰时触发
move: 窗⼝移动
resize: 调整窗⼝⼤⼩后触发
close: 在窗⼝要关闭的时候触发。 它在DOM 的beforeunload 和 unload 事件之前触发.
blur: 失去焦点，同app
focus: 获得焦点，同app
maximize：窗⼝最⼤化时触发
unmaximize: 当窗⼝最⼤化退出状态触发
minimize: 窗⼝最⼩化时触发
restore: 当窗⼝从最⼩化还原触发
...
渲染进程 BrowserWindow实例中的webContents
did-finish-load：导航完成时触发，即选项卡的旋转器将停⽌旋转，并指派onload事件后
did-finish-load: 这个事件类似于 did-finish-load, 不过是在加载失败或取消后触发
dom-ready: ⼀个框架中的⽂本加载完成后触发该事件
crashed: 当渲染进程崩溃或被结束时触发
unresponsive: 页⾯未响应触发
devtools-opened: 当开发者⼯具被打开时，触发该事件。
devtools-closed: 当开发者⼯具被关闭时，触发该事件。
...
electron的进程与渲染层通讯
主进程和渲染器进程
主进程和渲染器进程的区别
chrome浏览器由于每个标签页都是⼀个进程,⽽electron所运⾏的进程称为主进程并且只有⼀个，主进程要操控浏览器的每个标签的⽹页称为渲染器进程，如何通讯呢？
主进程和渲染器进程
进程
进程是正在运⾏的程序的实例（狭义定义）
electron中的主进程
Electron 运⾏ package.json 的 main 脚本的进程被称为主进程。 在主进程中运⾏的脚本通过创建web页⾯来展⽰⽤户界⾯。 ⼀个Electron 应⽤总是有且只有⼀个主进程。
electron中的渲染器进程
由于 Electron 使⽤了 Chromium 来展⽰ web 页⾯，所以 Chromium 的多进程架构也被使⽤到。 每个 Electron 中的 web 页⾯运⾏在它⾃⼰的渲染进程中。
渲染器进程与主进程之间的区别
主进程是从开始运⾏⼀直存在，渲染器进程通过BrowserWindow来创建实例，实例销毁则渲染进程销毁
主进程使⽤ BrowserWindow 实例创建页⾯。 每个 BrowserWindow 实例都在⾃⼰的渲染进程⾥运⾏页⾯。 当⼀个
BrowserWindow 实例被销毁后，相应的渲染进程也会被终⽌。
主进程管理所有渲染进程，渲染进程是独⽴且⾃我管理（web页⾯）
主进程管理所有的web页⾯和它们对应的渲染进程。 每个渲染进程都是独⽴的，它只关⼼它所运⾏的 web 页⾯。
主进程中可以调⽤底层所有的GUI的API，渲染进程则因为安全问题不能随意调⽤。如果要调⽤则需要通讯让主进程来调⽤。
在页⾯中调⽤与 GUI 相关的原⽣ API 是不被允许的，因为在 web 页⾯⾥操作原⽣的 GUI 资源是⾮常危险的，⽽且容易造成资源泄露。 如果你想在 web 页⾯⾥使⽤ GUI 操作，其对应的渲染进程必须与主进程进⾏通讯，请求主进程进⾏相关的 GUI 操作。
主进程与渲染器进程如何通讯
主进程与渲染器进程通过ipcMain与ipcRenderer来通讯
主进程向渲染器进程通讯
这个⽅式主要是主进程中使⽤ipcMain使⽤on监听，监听获取后通过event.sender(相当于webContent)send来发送⼀个事件，渲染进程中使⽤ipcRenderer通过on来接收，如果是同步可以通过urnValue来返回主进程的结果代码如下：
渲染器进程向主进程通讯
渲染器进程主要通过ipcRenderer这个模块中的send来发送，该⽅法中可以同步与异步发送消息，接收消息使⽤on来接收
electron的打包
常⽤⽅式：
1. electron-builder（本⼈主要⽤这个）
2. electron-pakager
3. electron-forge
electron-builder
electron-builder 是⼀个完整的解决⽅案，并且⾃带⾃动更新策略
electron-builder打包在package的script配置好
打包常⽤参数：
"build": {
"appId": "your.id", // appid
"productName": "程序名称", // 程序名称
"files": [ // 打包需要的不过滤的⽂件
"build/**/*",
"main.js",
"node_modules/**/*"
],
"directories": {
"output": "./dist-out", // 打包输出的⽬录
"app": "./", // package所在路径
"buildResources": "assets"
},
"nsis": {
"oneClick": false, // 是否需要点击安装，⾃动更新需要关掉
"allowToChangeInstallationDirectory": true, //是否能够选择安装路径
"perMachine": true // 是否需要辅助安装页⾯
},
"win": {
"target": [
{
"target": "nsis", // 输出⽬录的⽅式
"arch": [ // 输出的配置ia32或者x64/x86
"x64"
]
}
],锚杆挡墙
"publish": [ // ⾃动更新的配置
{
"provider": "generic", // ⾃⼰配置更新的服务器要选generic
"url": "127.0.0.1:8080/updata/" //更新配置的路径
}
快速厌氧胶]
}
}
复制代码
在package.json中增加的快速启动项
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
复制代码
启动打包
通常需要注意的点
注意路径，由于打包后的路径会有问题最好使⽤path.join()来处理⼀下。
碰到 The process cannot access the file because it is being used by another process.这个问题多数是vscode占⽤了关掉重开就好了如果配合create-react-app创建出来的应⽤
可以先让react的程序进⾏打包成静态⽂件，在把静态⽂件打包到electron应⽤中
微型直线电机
如果electron-builder总是报类似electron.js不到的警告，并且在上⾯提⽰让你去看⽹页中的⽅法，可以通过electron-builder提⽰的⽹址来修改，这实际是⼀个教程需要科学上⽹。
electron-builder的⾃动更新
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议