Skip to content

创建窗口

在 Electron 中,创建一个窗口是应用程序的基本步骤之一。以下是如何使用 Electron 的 BrowserWindow 模块来创建和管理窗口的示例代码:

  1. 首先,确保你已经安装了 Electron。如果还没有安装,可以通过 npm 进行安装:

    bash
    npm install electron --save-dev
  2. 然后,在你的主进程文件(通常命名为 main.jsindex.js)中,你可以使用下面的代码来创建一个新的窗口:

    javascript
    const { app, BrowserWindow } = require('electron')
    
    function createWindow () {
        // 创建浏览器窗口。
        let win = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
                preload: path.join(__dirname, 'preload.js'),
                nodeIntegration: true
            }
        })
    
        // 然后加载应用的 index.html。
        win.loadFile('index.html')
    
        // 打开开发者工具。
        win.webContents.openDevTools()
    }
    
    // Electron 会在所有窗口关闭后退出程序。
    app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
            app.quit()
        }
    })
    
    app.on('activate', () => {
        // 在macOS上,当单击dock图标并且没有其他窗口打开时,
        // 通常会重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
    
    // 在这个文件中,你可以续写应用其余的主进程代码。
    // 你也可以把它们放在单独的文件中然后用 require 导入。
    
    // 当 Electron 完成初始化,所有 API 可用时,调用 createWindow 方法。
    app.whenReady().then(createWindow)

这段代码做了以下几件事:

  • 导入了 appBrowserWindow 模块。
  • 定义了一个 createWindow 函数来创建一个新的窗口。
  • 设置了窗口的大小、加载的文件以及是否开启开发者工具等参数。
  • 监听 app 的事件,如 window-all-closedactivate,以处理窗口关闭和激活的情况。
  • 在 Electron 初始化完成后调用 createWindow 来创建窗口。

这样,你就有了一个基本的 Electron 应用窗口。