Electron - 构建用户界面

Electron - 构建现代用户界面

Electron 应用程序使用标准的 Web 技术构建其用户界面（UI）：HTML、CSS 和 JavaScript。这意味着您可以利用庞大的前端 Web 开发工具、库和框架生态系统。流行的选择包括 React、Vue.js、Angular、Svelte，以及 Bootstrap 或 Tailwind CSS 等 CSS 框架。

包管理通常由 npm (Node Package Manager) 或 yarn 处理，它们与 Node.js 捆绑在一起。这些工具使您可以轻松安装和管理前端依赖项。旧教程中提到的 bower 包管理器现已基本废弃。

例如，要安装 Bootstrap 和 jQuery（尽管现代应用通常使用原生 JS 或 UI 框架而不是直接使用 jQuery 进行 DOM 操作），您可以使用 npm：

npm install bootstrap jquery

此命令会将软件包下载到您的项目目录中的 node_modules 文件夹中。然后，您可以在 HTML 中引用它们的 CSS 和 JS 文件，或者如果您使用 Webpack 或 Parcel 等构建工具，则可以将其导入到您的 JavaScript 模块中。

让我们设置一个基本的 main.js 文件。请注意用于安全和启用预加载脚本的 webPreferences：

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true,
            nodeIntegration: false
        }
    });

    mainWindow.loadFile(path.join(__dirname, 'index.html'));
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

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

现在，创建 preload.js。此脚本在您的渲染进程网页加载之前运行，并且可以使用 contextBridge 以安全的方式有选择地将 Node.js API 或其他功能暴露给您的渲染进程。

const { contextBridge } = require('electron');
const $ = require('jquery'); // jQuery is available in preload due to nodeIntegration by default in preload

contextBridge.exposeInMainWorld('electronAPI', {
    // Expose jQuery to the renderer window, if needed for legacy or specific reasons
    // Be cautious with exposing entire libraries like jQuery to the renderer.
    // Often, it's better to expose specific functions that renderer needs.
    getJQuery: () => $
});

// You could also expose specific functions that use jQuery internally
// contextBridge.exposeInMainWorld('domUtils', {
//   setText: (selector, text) => $(selector).text(text),
//   onClick: (selector, callback) => $(selector).on('click', callback)
// });

接下来是您的 index.html 文件。我们将从 node_modules 中链接 Bootstrap 的 CSS：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UI Building Example</title>
    <!-- Adjust path if your node_modules is elsewhere relative to index.html -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
        body { padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>This page uses Bootstrap and jQuery (via Preload)</h1>
        <h3 id="click-counter">Counter: 0</h3>
        <button class="btn btn-success" id="countBtn">Click Me!</button>
    </div>

    <script src="./renderer.js"></script>
</body>
</html>

最后，创建 renderer.js 来实现点击计数器逻辑。它将使用由预加载脚本暴露的 jQuery 实例：

// renderer.js

document.addEventListener('DOMContentLoaded', () => {
    // Access jQuery exposed by the preload script
    // Note: Exposing full jQuery like this (window.electronAPI.getJQuery()) is one way,
    // but for better security and modularity, consider exposing only necessary functions from preload.
    const $ = window.electronAPI.getJQuery();

    let count = 0;
    const clickCounterDisplay = $('#click-counter');
    const countButton = $('#countBtn');

    clickCounterDisplay.text(`Counter: ${count}`);

    countButton.on('click', () => {
        count++;
        clickCounterDisplay.text(`Counter: ${count}`);
    });
});

使用以下命令运行应用：

npx electron .

应用程序窗口将显示一个使用 Bootstrap 样式化的页面，其中包含标题、初始化为“Counter: 0”的计数器显示和一个绿色的“Click Me!”按钮。点击按钮将使计数器递增并更新显示。

此设置演示了在启用 contextIsolation 的现代 Electron 应用中使用 Bootstrap 和 jQuery 等外部库。对于复杂的应用程序，请考虑使用 JavaScript 框架（React、Vue、Angular）以及 Webpack 或 Vite 等构建工具，以获得更结构化的开发体验。这些工具有助于管理依赖项、转译代码并高效捆绑资源。