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

Question

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

我可以通过window.close();关闭窗口

但我不明白如何最小化和最大化窗口。

我想使用 jquery 来最大化、恢复、最小化和取消最大化

所以如果有解决方案请回答我，并尝试给我一个简单的ipc解释。

提前致谢。。

Answer 1

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

请仔细阅读所有内容！

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

注意：查找 //------------------------ 以获取代码粘贴位置

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

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 的原因是因为我们想要远程模块具有的功能。 通过那里的那段代码，您可以执行mainWindow.maximize()、mainWindow.minimize() 之类的操作，检查其是否已最大化，以及远程允许您执行的所有操作。如果您想要更多，请查看此链接。 https://www.electronjs.org/docs/latest/api/browser-window/#event-maximize它向您展示了您可以做的所有事情。

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