前言
本文包含打包、自动更新、简易API、调试、进程通信等相关知识点，内容较多，请酌情查看。
electron
简介
Electron 是由 Github 开发，是一个用 Html、css、JavaScript 来构建桌面应用程序的开源库，可以打包为 Mac、Windows、Linux 系统下的应用。
Electron 是一个运行时环境，包含 Node 和 Chromium，可以理解成把 web 应用运行在 node 环境中
结构
Electron 主要分为主进程和渲染进程，关系如下图
image.png
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 win
function 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 后，就会弹出我们的应用来。
image.png
调试
我们知道 Electron 有两个进程，主进程和渲染进程，开发过程中我们需要怎么去调试它们呢？老太太吃柿子，咱们捡软的来
渲染进程
BrowserWindow 用来创建和控制浏览器窗口，我们调用它的实例上的API即可
win = new BrowserWindow({width: 800, height: 600})
win.webContents.openDevTools() // 打开调试
调试起来是和 Chrome 是一样的，要不要这么酸爽
image.png
主进程
使用 VSCode 进行调试
使用 VSCode 打开项目，点击调试按钮
image.png
点击调试后的下拉框
