如何在Electron中创建一个基本的浏览器窗口？

题目

如何在Electron中创建一个基本的浏览器窗口？

信息

• 类型：问答
• 难度：⭐

考点

主进程基础,窗口创建,生命周期管理

快速回答

在Electron中创建基本窗口的步骤：

1. 在主进程中引入app和BrowserWindow模块
2. 监听app.whenReady()事件
3. 在事件回调中创建BrowserWindow实例
4. 使用loadFile()或loadURL()加载内容
5. 处理窗口关闭事件

原理说明

Electron应用由主进程和渲染进程组成。主进程通过Node.js环境运行，负责创建和管理应用窗口（BrowserWindow）。每个窗口对应一个渲染进程，用于显示网页内容。

代码示例

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 预加载脚本
    }
  });

  // 加载本地HTML文件
  mainWindow.loadFile('index.html');
}

// 应用准备就绪后创建窗口
app.whenReady().then(() => {
  createWindow();

  // macOS特殊处理：点击Dock图标时重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 窗口全部关闭时退出应用（macOS除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

最佳实践

• 路径处理：使用path.join()确保跨平台路径兼容性
• 预加载脚本：通过webPreferences.preload注入安全脚本
• 生命周期管理：正确处理window-all-closed和activate事件
• 资源管理：窗口关闭时移除事件监听器防止内存泄漏

常见错误

• 时机错误：在app.whenReady()之前创建窗口
• 路径错误：使用相对路径导致文件加载失败
• 平台差异忽略：未处理macOS的Dock图标点击行为
• 安全风险：在渲染进程直接启用nodeIntegration

扩展知识

• 进程通信：通过ipcMain/ipcRenderer实现主进程与渲染进程通信
• 多窗口管理：使用BrowserWindow.getAllWindows()跟踪窗口实例
• 开发工具：开发阶段可使用mainWindow.webContents.openDevTools()开启调试
• 无框窗口：通过frame: false选项创建自定义标题栏窗口