Electron 创建窗口

创建主进程

在 Electron 应用程序中，主进程负责创建和管理应用窗口。首先需要安装 Electron：

npm install electron --save-dev

然后，在项目根目录下创建一个 main.js 文件作为主进程文件。

// www.javascriptcn.com code example
const { app, BrowserWindow } = require('electron')

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    })

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

    // 打开开发者工具
    mainWindow.webContents.openDevTools()
}

app.whenReady().then(createWindow)

// 当所有窗口关闭时退出应用程序
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

这个文件定义了主进程的主要功能，包括创建窗口、加载网页以及监听窗口关闭事件。

创建渲染进程

渲染进程是每个窗口的独立 JavaScript 环境。在这个例子中，我们将在 index.html 中添加一些基本的 HTML 和 CSS 来展示窗口的内容。

在项目根目录下创建一个 index.html 文件，内容如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron 应用</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>欢迎使用 Electron 应用程序</h1>
    <p>这是一个简单的 Electron 应用程序示例。</p>
</body>
</html>

这个文件定义了一个简单的页面，包含一个标题和一段文字。

配置 package.json

为了方便运行我们的 Electron 应用程序，需要在 package.json 文件中配置启动脚本：

// www.javascriptcn.com code example
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

这样，我们可以通过运行 npm start 来启动应用程序。

调试和优化

调试

Electron 提供了强大的调试工具。你可以通过 mainWindow.webContents.openDevTools() 在浏览器窗口中打开开发者工具来调试你的应用。

优化

对于生产环境，你可能需要对代码进行优化。例如，禁用 nodeIntegration 并启用 contextIsolation 可以提高安全性。此外，可以使用工具如 Webpack 对你的前端代码进行打包和优化。

webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
}

同时，确保你的应用在不同的操作系统和屏幕尺寸上都能正常工作，这可能需要对窗口大小和其他 UI 元素进行调整。

通过以上步骤，你已经成功创建了一个基本的 Electron 应用，并学会了如何管理窗口和渲染进程。接下来，你可以进一步探索更多高级功能，如 IPC 通信、文件系统访问等。