主进程事件生命周期
Electron 的生命周期
Electron 的生命周期可以分为以下几个阶段:
- 初始化阶段
- 在主进程中,会先执行main.js里的代码,创建浏览器窗口、加载渲染进程等。
- 在渲染进程中,会执行渲染进程的js代码,如加载页面的DOM和其它资源。
- 主进程运行阶段
- 主进程会接收来自渲染进程的异步调用,如ipcRenderer发送的消息。
- 主进程还会处理节点集成相关的事件,如读取和写入本地文件等。
- 渲染进程运行阶段
- 渲染进程会将网页加载到窗口中,并响应页面交互事件如点击、输入等。
- 渲染进程也可以通过ipcRenderer与主进程通信。
- 窗口生命周期阶段
- 窗口可以在运行时打开、最小化、最大化、恢复或关闭。
- 主进程会响应这些窗口事件并通知渲染进程。
- 应用退出阶段
- 当所有窗口被关闭后,主进程的quit事件被触发,Electron会退出,应用被关闭。
- 在退出前,主进程和渲染进程都会执行cleanup操作,如保存数据等。
所以在整个Electron应用生命周期中,主进程负责管理整个应用,而渲染进程负责界面与交互。两者之间通过ipc通信协调。
Electron生命周期中可调用的函数
- 主进程生命周期函数
- app.on('ready') - 应用初始化完成时触发
- app.on('window-all-closed') - 所有窗口关闭时触发
- app.on('activate') - 应用激活时触发(macOS)
- app.on('quit') - 应用退出前触发
- app.on('before-quit') - 立即退出应用前触发
- 浏览器窗口生命周期函数
- win.on('close') - 窗口关闭时触发
- win.on('closed') - 窗口被完全关闭后触发
- win.on('focus') - 窗口获得焦点时触发
- win.on('blur') - 窗口失去焦点时触发
- 渲染进程生命周期函数
- webContents.on('dom-ready') - 页面DOM加载完成时触发
- webContents.on('did-finish-load') - 导航完成时触发
- webContents.on('crashed') - 渲染进程崩溃时触发
试验
我们还是继续在刚刚的项目中试试这些生命周期，修改main.js入口文件， 如下：
const { app, BrowserWindow, webContents } = require('electron')
const createWindows = () => {
const win = new BrowserWindow({
width: 1280,
height: 800
})
// win.loadURL('https://lsk_ciao.gitee.io/vue-web-admin-frame')
win.loadFile('index.html')
win.webContents.openDevTools()
// 浏览器窗口生命周期函数
win.on('close', () => {
console.log('close')
})
win.on('closed', () => {
console.log('closed')
})
win.on('focus', () => {
console.log('focus')
})
win.on('blur', () => {
console.log('blur')
})
// 渲染进程生命周期函数
win.webContents.on('dom-ready', () => {
console.log('dom-ready')
})
win.webContents.on('did-finish-load', () => {
console.log('did-finish-load')
})
win.webContents.on('crashed', () => {
console.log('crashed')
})
}
app.whenReady().then(() => {
createWindows()
// 仅 macOS 支持
app.on('activate', () => {
console.log('activate')
if (BrowserWindow.getAllWindows().length === 0) {
createWindows()
}
})
})
// 主进程生命周期函数
app.on('ready', (params) => {
console.log('ready')
})
app.on('window-all-closed', () => {
// 对于 Mac 系统， 关闭窗口时并不会直接退出应用， 此时需要我们来手动处理
if (process.platform === 'darwin') {
console.log('close')
app.quit()
}
})
app.on('quit', () => {
console.log('quit')
})
app.on('before-quit', () => {
console.log('before-quit')
})
注意，这里出发的log都是node环境触发的， 并非浏览器，我们在控制台是看不到输出的， 需要在命令行中查看，如下：
可以看到代码中有一些推荐写法，这是由于应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们，我们在以后自行搭建的项目中可以按照这个写法去处理各个平台之间不同的差异
