Electron：如何在 2021 年通过 js 关闭应用程序？答案

【问题标题】：Electron :how to close app via js in 2021?Electron：如何在 2021 年通过 js 关闭应用程序？
【发布时间】：2021-09-29 12:53:37
【问题描述】：

我想通过js关闭Electron App。

"electron": "^13.1.7"

我仔细阅读了这些问题：

但这些都不适合我。

以下所有测试均基于the offical electron-quick-start

根据上述问题的答案，我得到了这些代码：

index.html

  <body>
    <button id="close-app">
        close
    </button>
    <script src="./renderer.js"></script>
  </body>

main.js

const {BrowserWindow, remote} = require('electron')
...
app.whenReady().then(() => {
  ...
  app.on('activate', function () {
    ...
    document.getElementById("close-app").addEventListener("click", function (e) {
      remote.getCurrentWindow().close()
    })
  })
})

没有任何影响或错误。

似乎代码从未运行过，我在addEventListener 上方添加了一个console.log('run')，控制台中没有打印任何内容。

根据document，我得到了这些代码：

（不改变the offical electron-quick-start，只改变preload.js和index.html）

index.html

同上

preload.js

const { app } = require('electron');
window.addEventListener('DOMContentLoaded', () => {
  document.getElementById("close-app").addEventListener("click", function (e) {
      app.quit();
  })
})

只有Uncaught TypeError: Cannot read property 'quit' of undefined

那么，如何通过js关闭Electron App呢？

非常感谢任何人的帮助！

【问题讨论】：

您的按钮 id 是 close-app。尝试在 main.js 中将 document.getElementById("close").addEventListener 更改为 document.getElementById("close-app").addEventListener
我注意到您更新了问题！这是问题中的错字吗？还是它与您的实际代码匹配？
@phuzi 大意抱歉，我直接从我的项目中复制代码，还有很多其他代码可能会打扰您的注意。当 id 正确时，错误仍然存在。

标签： javascript node.js electron

【解决方案1】：

Electron 具有仅在主进程中工作的模块，如 app 和仅在渲染器进程中工作的模块，如 ipcRenderer 以及通用且可以在两个进程中运行的模块

我建议阅读 Electron 文档中的 this article，它解释了流程模型

预加载脚本包含在网页内容开始加载之前在渲染器进程中执行的代码。这些脚本在渲染器上下文中运行，但通过访问 Node.js API 被授予更多权限。

因为app模块是一个主进程模块，如果你尝试从预加载脚本（渲染器进程）访问它，app将是未定义的

// in preload.js
const { app } = require('electron');

console.log(app); // undefined

相反，你应该使用进程间通信来告诉主进程退出

// in main.js
const { app, ipcMain } = require('electron');

ipcMain.handle('quit-app', () => {
  app.quit();
});

// in preload.js
const { ipcRenderer } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('close-app').addEventListener('click', () => {
      ipcRenderer.invoke('quit-app');
  });
});

【讨论】：

伙计，我花了几个小时阅读文档、其他 StackOverflow 帖子等，最后，在 2022 年，这是一个可行的解决方案。你是神！

【解决方案2】：

对于那些不使用官方模板而是基于 Vue3 webpack 的电子的人。

您必须首先在异步函数中创建窗口，该函数将返回由BrowserWindow() 创建的win

main.js

import { BrowserWindow, ipcMain } from 'electron'

async function createWindow() {
    // Create the browser window.
    const win = new BrowserWindow({
        transparent: true,
        frame: false,
        webPreferences: {
            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
            enableRemoteModule: true
        }
    })

    if (process.env.WEBPACK_DEV_SERVER_URL) {
        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()
    }
    else {
        createProtocol('app')
        // Load the index.html when not in development
        win.loadURL('app://./index.html')
    }

    return win;
}

app.on('ready', async () => {
    createWindow()
        .then(win => {
            ipcMain.on('close-app', () => {
                win.hide();
            });
            ipcMain.on('min-app', () => {
                win.minimize();
            });
        });
});

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>

        <span role="control-panel">
            <button type="button"
                id="min-app" 
                aria-label="minimize your app">
                <i class="mdi mdi-window-minimize text-2xl"></i>
            </button>

            <button type="button"
                id="close-app"
                aria-label="close your app">
                <i class="mdi mdi-close text-2xl"></i>
            </button>
        </span>

        <script>
            // for close/min app
            const { ipcRenderer } = require('electron');
            document.getElementById('close-app').addEventListener('click', () => {
                ipcRenderer.send('close-app');
            });
            document.getElementById('min-app').addEventListener('click', () => {
                ipcRenderer.send('min-app');
            });
        </script>
    </body>
</html>

【讨论】：

根据上述问题的答案，我得到了这些代码：

根据document，我得到了这些代码：