4、窗口与生命周期（Electron）

章节目标

• 掌握BrowserWindow基础Api能力，以及如何使用它进行窗口创建、配置。
• 掌握应用常用的生命周期基本知识

1、窗口创建概念

在 Electron 中，BrowserWindow模块用于创建和控制应用窗口。每个 BrowserWindow实例代表一个应用窗口，可以在其中加载 HTML 内容。

2、BrowserWindow 重要配置选项

• width / height：窗口的初始宽高
• minWidth / minHeight：窗口的最小宽高限制
• webPreferences：窗口的网页功能设置
  • preload：预加载脚本路径
  • contextIsolation：是否启用上下文隔离（安全相关）
  • nodeIntegration：是否集成 Node.js（安全相关）
  • webSecurity: 是否开启内容安全策略

3、创建窗口基础代码如下

// BrowserWindow，electron提供的窗口创建api
import { BrowserWindow } from 'electron'

export function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1100,
    height: 760,
    minWidth: 900,
    minHeight: 600,
    webPreferences: {
      preload: __dirname + '/preload.js',// 预加载
      contextIsolation: true,// 上下文环境隔离
      nodeIntegration: false, // 渲染进程对node直接访问能力
      webSecurity: true,// CSP 内容安全策略
    }
  })
  // 该窗口加载的网页
  mainWindow.loadFile('index.html')
  // 监听窗口关闭事件
  mainWindow.on('closed', () => { 
    mainWindow = null 
  })
  return win
}

4、生命周期事件

Electron 应用的生命周期由一系列事件组成，开发者可以监听这些事件并在适当的时候执行相应的操作。

4.1、核心生命周期事件

1. app.whenReady()

   • 触发时机：Electron 完成初始化时触发
   • 用途：在这个事件后创建窗口、注册事件监听器等

2. window-all-closed

   • 触发时机：所有窗口都关闭时触发
   • 用途：通常用于退出应用（macOS 除外）

3. activate

   • 触发时机：应用被激活时触发（在 macOS 上常见）
   • 用途：当应用在 dock 中被点击时重新创建窗口

4. will-quit

   • 触发时机：应用即将退出时触发
   • 用途：清理资源、保存数据等

4.2、生命周期事件示例代码

一般而言，app.whenReady周期函数，是主进程启动窗口的必备周期函数，在这个函数执行完毕，会进行 createWindow 操作。

// 应用准备就绪后创建主窗口
app.whenReady().then(() => {
  createMainWindow()
  // 其他初始化操作...
})

// 所有窗口关闭时的处理
app.on('window-all-closed', () => {
  // 在 macOS 上，应用程序菜单栏通常保持活动状态
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在 macOS 上，当点击 dock 图标且没有其他窗口打开时重新创建窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createMainWindow()
  }
})

// 应用即将退出时的清理工作
app.on('will-quit', () => {
  // 清理快捷键等
  unregisterAllShortcuts()
})

5、开启开发者工具

// 一般而言，在开发环境中，进行开启，方便我们进行网页调试。
win.webContents.openDevTools()

关于本专栏

本专栏的所有内容和代码，github地址：https://github.com/techLaoLi/electron-tutorial
关于作者，前大厂技术专家，现大前端技术负责人，公众号：老李说技术。 欢迎大家的关注。