导读 - Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

举例简单来说:

js -> 需要浏览器解析器编译成计算机能识别的语言
Chrome v8 dom - Chrome(运行环境)、v8(解析器)、dom(运行环境带有的)
Chrome浏览器里有v8引擎,使用v8引擎来解析js, v8 类似于车的发动机,v8也是可以抽离出来的; Chrome浏览器运行环境有dom节点(表单/按钮等等)、bom等。
nodejs v8 - nodejs(运行环境：可以进行文件存储、图片压缩等等操作)、v8(解析器)
Electron带有浏览器环境，所以开发网页用的技术都可以使用在 Electron中，如 vue、react 等等

成熟的脚手架

日常开发可以使用 electron-vite 或 electron-vite-vue 、 electron-react-boilerplate 等脚手架快速创建项目，脚手架已经为我们完成了基本的配置，并支持使用 Vue与React等技术开发Electron项目。

参考

开发模式

主进程

text

主进程 => 后端的操作：比如 node.js
如主进程读取文件、上传文件...

渲染进程(可以有多个)

text

页面上显示的内容：如点上传按钮

默认走传统方式

text

新建多个.html / index.css / index.js

目前为止，我们一般都会使用 electron + vue 的模式开发
electron-vite官网
使用 electron-vite-boilerplate 模板来搭建项目:
sh
```
$npx degit alex8088/electron-vite-boilerplate electron-app
$cd electron-app
$npm install
$npm run dev
```
ddd

NPM 配置 electron 的安装源

将Electron设置国内镜像后，可以加快文件的下载速度，需要设置 electron_mirror 与 electron_builder_binaries_mirror 镜像，下面是 electron的国内镜像设置。

当正常使用 npm 安装提示报错时，就需要进行这一步骤。

$npm config edit
# 执行上述命令后，会打开记事本，在空白处添加如下内容：
strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/ 
# 刷新npm的缓存
$npm cache clean --force

strict-ssl=false：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题
registry=https://registry.npmmirror.com/：这是指定了 npm 的镜像源，用于下载 npm 包
electron_mirror=https://registry.npmmirror.com/-/binary/electron/：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件

生命周期

生命周期事件顺序

ready:app 初始化完成
dom-ready 一个窗口中的文本加载完成
did-finish-load 导航完成时触发
window-all-closed 所有窗口都被关闭时触发
before-quit 在关闭窗口之前触发
will-quit 在窗口关闭并且应用退出时触发
quit 当所有窗口被关闭时触发
close 当窗口关闭时触发，此时应删除窗口引用

对应主进程文件代码如下：

const mainWindow = new electron.BrowserWindow({
  width: 900,
  height: 670,
  show: false,
  autoHideMenuBar: true,
  ...process.platform === "linux" ? { icon } : {},
  webPreferences: {
    preload: path.join(__dirname, "../preload/index.js"),
    sandbox: false
  }
  mainWindow.loadFile("index.html")
  mainWindow.webContents.on('did-finish-load', () => {
    console.log("333333--->did-finish-load")
  })
  mainWindow.webContents.on('dom-ready', () => {
    console.log("222222--->dom-ready")
  })
  mainWindow.webContents.on('close', () => {
    console.log("888888--->this window is closed") // 这里顺序写成8，是考虑到项目可能有多个窗口，所以在主窗口这里设置为最后关闭。
    mainWindow = null //释放内存
  })
});
electron.app.on('ready', () => {
  console.log("111111--->ready")
  mainWindow()
})

electron.app.on('window-all-closed', () => {
  console.log("444444--->window-all-closed")
  electron.app.quit();
})
electron.app.on('before-quit', () => {
  console.log("555555--->before-quit")
})
electron.app.on('will-quit', () => {
  console.log("666666--->will-quit")
})
electron.app.on('quit', () => {
  console.log("7777777--->quit")
})

导读 - Electron ​

成熟的脚手架 ​

参考 ​

开发模式 ​

NPM 配置 electron 的安装源 ​

生命周期 ​

生命周期事件顺序 ​

导读 - Electron

成熟的脚手架

参考

开发模式

NPM 配置 electron 的安装源

生命周期

生命周期事件顺序