面试题：Node.js 中 Electron 如何实现基本窗口的创建与显示

Question

请简述在 Node.js 环境下，使用 Electron 创建一个基本窗口并显示的主要步骤，包括引入模块、初始化应用、创建窗口等相关代码逻辑。

Answer 1

1. 引入模块：

   const { app, BrowserWindow } = require('electron');
   

   • app 模块控制着应用程序的事件生命周期。
   • BrowserWindow 模块用于创建和管理应用程序的窗口。
2. 初始化应用并创建窗口：

   let win;
   function createWindow() {
       win = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
               nodeIntegration: true
           }
       });
       win.loadFile('index.html');
       win.on('closed', () => {
           win = null;
       });
   }
   app.on('ready', createWindow);
   app.on('window-all-closed', () => {
       if (process.platform!== 'darwin') {
           app.quit();
       }
   });
   app.on('activate', () => {
       if (win === null) {
           createWindow();
       }
   });
   

   • createWindow 函数负责创建 BrowserWindow 实例，设置窗口的大小、是否集成 Node.js 等属性。
   • win.loadFile('index.html') 方法用于加载指定的 HTML 文件到窗口中。
   • app.on('ready', createWindow) 事件在 Electron 完成初始化并准备创建浏览器窗口时触发，调用 createWindow 函数创建窗口。
   • app.on('window - all - closed', () => {...}) 事件在所有窗口都关闭时触发，根据不同平台决定是否退出应用程序。
   • app.on('activate', () => {...}) 事件在应用程序被激活时触发，在 macOS 上，当点击 dock 图标且没有其他打开的窗口时，通常会重新创建一个窗口。