Electron 的基本原理
- 只有一个主进程（Node环境）
- 可以有任意多个渲染进程（浏览器环境）
主进程和渲染进程之间，通过预加载脚本通信。
应用启动后，先执行主进程，再执行预加载脚本，最后执行渲染进程。
- 主进程内可执行所有 Node 的 api
- 预加载脚本可执行部分 Node 的 api，但在渲染进程中执行
- 渲染进程的执行环境与浏览器相同，用于解析 HTML , CSS , JS
Electron 的生命周期
常用的生命周期有：
- ready 应用完成初始化
- window-all-closed 所有的窗口都被关闭
- will-quit 所有窗口被关闭，同时应用程序将退出
- quit 应用程序退出
更多生命周期可参考官网 - app 的生命周期
使用范例：
// 在应用完成初始化后，创建窗口
app.on('ready', () => {createWindow()
})
主进程
src/main/index.ts
修改主进程代码后，需重启项目。
导入必要的方法和依赖
import { app,BrowserWindow} from 'electron'
import { join } from 'path'
封装创建窗口的方法
function createWindow(): void {const mainWindow = new BrowserWindow({width: 900,height: 670,// 默认隐藏窗口show: false,// 自动隐藏菜单autoHideMenuBar: truewebPreferences: {// 配置预加载脚本preload: join(__dirname, '../preload/index.js')}})// ready-to-show 事件时才显示窗口mainWindow.on('ready-to-show', () => {mainWindow.show()})// 将本地页面渲染到窗口mainWindow.loadFile('./src/renderer/index.html')
}
在 app 为 ready 状态后创建窗口
app.whenReady().then(() => {createWindow()
})
另一种写法为：
app.on('ready', () => {createWindow()
})
其他必要的配置
// 【专门针对 macOS 的处理】因为 macOS 在所有窗口都关闭时，也不会退出应用// 当应用被激活时app.on('activate', function () {// 若没有其他窗口打开，则重新创建窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
// 当应用关闭所有窗口时
app.on('window-all-closed', () => {// 若操作系统不为 macOSif (process.platform !== 'darwin') {// 退出应用app.quit()}
})
预加载脚本
用于实现主进程和渲染进程的通信，先于渲染进程，在浏览器环境中执行。
在创建窗口时，通过添加如下的配置，来加载对应的预加载脚本
import { join } from 'path'
webPreferences: {// 配置预加载脚本preload: join(__dirname, '../preload/index.js')}
可执行的 Node 操作
- 获取 process
// 在窗口中，按F12打开浏览器调试工具查看
console.log('process.versions', process.versions)
渲染进程
修改渲染进程代码，项目会自动刷新。
菜单
https://blog.csdn.net/weixin_41192489/article/details/144719913
进程通信 IPC
渲染进程调用预加载脚本
- 预加载脚本通过 contextBridge.exposeInMainWorld 暴露变量
暴露的变量，会成为 window 的属性！
import { contextBridge } from 'electron'
contextBridge.exposeInMainWorld('myAPI', {Electron_version: process.versions['electron']
})
- 渲染进程中通过 window 访问预加载脚本暴露的变量
const Electron_version = window.myAPI.Electron_version
从通信事件中获取触发事件的渲染进程的窗口
const webContents =event.sender
const win = BrowserWindow.fromWebContents(webContents)
开发提效
开发环境自动打开浏览器调试工具
if (process.env.NODE_ENV === 'development') {mainWindow.webContents.openDevTools()}
使用 electron-vite
https://blog.csdn.net/weixin_41192489/article/details/144611858
