如何在没有远程模块的情况下最大化和最小化电子中的 window

Question

我正在尝试创建一个 electron 应用程序，但我无法理解如何使用远程模块 require('@electron/remote/');

我可以通过 window.close();

关闭 window

But I cant understand how to minimize and maximize the window.

I would like to use jquery to maximize, restore, minimize and unmaximize

所以如果有解决办法请回答我，尽量给我一个简单的ipc解释。

提前致谢。。

Answer 1

我今天遇到了同样的问题，我设法找到了解决方案。 Electron 团队不希望您使用 remote，因为好..这很糟糕。

请仔细阅读所有内容！

最好的解决方案是使用 ipc。不用担心。当你这样做时，它并不那么复杂。

注意：寻找 //------------------------ 粘贴代码的位置

这可能是你的主进程的样子（主进程是创建 window 的地方）只是一个解释，这里没有复制粘贴。

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

const createWindow = () => {
        // Create the browser window.
        const mainWindow = new BrowserWindow({
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: {
        nodeIntegration: true, 
        contextIsolation: false,
        },
    });

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();
};

app.on('ready', createWindow);

因此，第一步将内容放入渲染器进程（html 文档附带的脚本）

//--------------------------------------------
const electron = require("electron");
const ipc = electron.ipcRenderer;

const togmax = document.getElementById("togmax");

togmax.addEventListener("click", function() {
    ipc.send("toggle-maximize-window");
});
//--------------------------------------------

接下来，将其放入您的 const create window = () => {...

//--------------------------------------------
const ipc = require("electron").ipcMain;
//--------------------------------------------

//--------------------------------------------
ipc.on("toggle-maximize-window", function(event) {
    if(mainWindow.isMaximized()) {
        mainWindow.unmaximize();
    } else {
        mainWindow.maximize();
    }
});
//--------------------------------------------

这就是您的主脚本之后的样子。

const { app, BrowserWindow, electron } = require('electron');
const path = require('path');
//---------------------------------------------
const ipc = require("electron").ipcMain;
//---------------------------------------------

const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: {
            nodeIntegration: true, 
            contextIsolation: false,
        },
    });

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();


 //----------------------------------------------------------------
    ipc.on("toggle-maximize-window", function(event) {
        if(mainWindow.isMaximized()) {
            mainWindow.unmaximize();
        } else {
            mainWindow.maximize();
        }
    });
//-----------------------------------------------------------------
};

总而言之，您要输入 nodeIntergration: true，这样您就可以在 HTML 的脚本中使用“require”。您正在使用带有 ipcRenderer 的脚本将消息发送到主进程 (ipcMain) 和 ipc.on(...) 表示当它收到一条消息时，它会执行括号中的任何操作。我们将代码 inside 粘贴到创建主 window 的位置的原因是因为我们需要远程模块具有的功能。使用那段代码，您可以执行 mainWindow.maximize()、mainWindow.minimize() 之类的操作，检查它是否已最大化，以及远程允许您执行的所有操作。如果您想要更多，请查看此 link。 https://www.electronjs.org/docs/latest/api/browser-window/#event-maximize 它向您展示了您可以做的所有事情。

然后你就完成了。只有 3 件事要粘贴，所以你很好。确保在此之后检查 Electron 文档。我很好，所以我用勺子喂你代码，但一定要在你遇到障碍后学习更多！

如何在没有远程模块的情况下最大化和最小化电子中的 window

How to maximize and minimize window in electron without the remote module

jquery

minimize

maximize

electron