Electron 如何与其 Angular-Frontend 通信？

Question

我在无框电子窗中运行 Angular 前端。 因为 window 是无框架的，所以我需要自己实现最小化/最大化/取消最大化/关闭行为。 我有一个用于最大化的按钮和一个用于取消最大化的按钮，并且想始终隐藏其中一个，具体取决于 window state。

我将 node-integration 设置为 false，想知道如何从 Electron 与我的 Angular-Frontend 通信。 然后我只需要找到一种方法来获取我的应用程序窗口并在它最大化/未最大化时发出一个事件，然后相应地更改我的 UI。

我从 Angular 到 Electron 的通信是这样的：

在 Angular 中，我有一个“electronService”，它被注入到我的组件中并调用 electron 函数。

在我的 preload.js 中，我将 function 从我的 main.js 公开到我的渲染器进程，如下所示：

const { ipcRenderer, contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electron', {
    maximizeWindow: () => {
        return ipcRenderer.invoke('electron::maximize-window');
    }
});

在我的 main.js 中，我这样处理来电：

app.whenReady().then(() => {
    ipcMain.handle('electron::maximize-window', maximizeWindow);
});

function maximizeWindow(_) {
    ...
}

有没有办法在相反的方向上做到这一点？

Answer 1

虽然我不使用 Angular，但是一旦布局、理解和正确实施，您的最大化/恢复功能的实施就非常简单。 IPC 的使用以及您的 window state 的检测和通信将是其功能的核心。

期望的功能：

• 当 window 最大化时，显示恢复按钮。
• 当 window 没有最大化（恢复）时，显示最大化按钮。

执行：

1. 我们的渲染将显示所有四个按钮：最小化、恢复、最大化和关闭。
2. click渲染按钮，向主进程发送 IPC 消息以实现 window 功能。
3. 根据主进程中的 window state（更改），向渲染进程发送消息以显示/隐藏相应的按钮。
4. 在 window 创建时，向渲染进程发送消息以显示/隐藏相应的按钮。
5. 检测何时双击标题栏以在最大化和恢复之间切换渲染按钮。

您可能想知道为什么需要第 3 点？ 它由于第 4 点和第 5 点而存在。第 4 点用于 window 创建。 无论您使用什么设置来创建 window（手动或从.json文件中提取），新创建的 window 都会动态显示正确的按钮。 第 5 点是当您双击标题栏进入和退出最大化/恢复时。

---

在您的preload.js脚本中，我们需要两个函数。 一个指示单击了哪个渲染按钮（第 2 点），另一个指示接收 window 的 state（第 3 点）。

preload.js （主进程）

const { ipcRenderer, contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electron', {
    buttonClicked: (button) => {
        ipcRenderer.send('buttonClicked', button);
    },
    windowState: (state) => {
        ipcRenderer.on('windowState', state);
    }
});

---

在您的main.js脚本中，我们添加了一些功能来告诉渲染进程 state 和 window 在创建时处于什么状态（第 4 点）。

在这里，我们还从渲染过程（第 2 点）接收按钮click消息并相应地实现功能。

最后，聆听是否双击标题栏（第 5 点）。

main.js （主进程）

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require('path');

let window;

function initialiseButtons() {
    if (window.isMaximized()) {
        window.webContents.send('windowState','maximised')
    } else {
        window.webContents.send('windowState','restored')
    }
}

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        frame: false,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        // .then(() => { window.maximize(); }) // Testing
        .then(() => { initialiseButtons(); })
        .then(() => { window.show(); });

    // Double-click of title bar from restore to maximise
    window.on('maximize', () => {
        initialiseButtons();
    })

    // Double-click of title bar from maximise to restore
    window.on('unmaximize', () => {
        initialiseButtons();
    })

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

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

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

// ---

electronIpcMain.on('buttonClicked', (event, buttonClicked) => {
    if (buttonClicked === 'minimise') {
        window.minimize();
        return;
    }

    if (buttonClicked === 'restore') {
        window.restore();
        window.webContents.send('windowState','restored');
        return;
    }

    if (buttonClicked === 'maximise') {
        window.maximize();
        window.webContents.send('windowState','maximised');
        return;
    }

    if (buttonClicked === 'close') {
        window.close();
    }
})

---

最后，我们将按钮click事件发送到主进程（第 1 点）并在创建 window 时监听 window state（第 4 点）。

为简单起见，我忽略了内联样式和交互按钮的使用。

index.html （渲染进程）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>

    <body style="margin: 0; padding: 0;">

        <div style="display: flex; flex-flow: row nowrap; padding: 5px; background-color: #ccc;">
            <div style="flex: 1 0 auto">Title</div>
            <div style="flex: 0 1 auto">
                <input type="button" id="minimise" value="_">
                <input type="button" id="restore" value="&#10064;">
                <input type="button" id="maximise" value="&#9744;">
                <input type="button" id="close" value="&#9747;">
            </div>
        </div>
    </body>

    <script>
        let restoreButton = document.getElementById('restore');
        let maximiseButton = document.getElementById('maximise');

        document.getElementById('minimise').addEventListener('click', () => {
            window.electron.buttonClicked('minimise');
        });

        document.getElementById('close').addEventListener('click', () => {
            window.electron.buttonClicked('close');
        });

        restoreButton.addEventListener('click', () => {
            window.electron.buttonClicked('restore');
        });

        maximiseButton.addEventListener('click', () => {
            window.electron.buttonClicked('maximise');
        });

        window.electron.windowState((event, state) => {
            if (state === 'maximised') {
                restoreButton.style.display = 'inline-block';
                maximiseButton.style.display = 'none';
            } else {
                restoreButton.style.display = 'none';
                maximiseButton.style.display = 'inline-block';
            }
        })
    </script>
</html>