开发者问题收集

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

2021-07-22
3193
javascript node.js electron

我想通过 js 关闭 Electron App。 

"electron": "^13.1.7"

我仔细阅读了这些问题：

但这些都不适合我。

以下所有测试基于 官方 electron-quick-start

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

index.html 

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

ma​​in.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') ，控制台中什么都没有打印出来。

  1. 根据 文档 ，我得到了这些代码：

（不改变 官方 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 Uncaught TypeError: Cannot read property 'quit' of undefined

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

非常感谢大家的帮助！

2个回答

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

我建议阅读 Electron 文档中的 这篇文章 ，其中解释了进程模型

Preload scripts contain code that executes in a renderer process before its web content begins loading. These scripts run within the renderer context, but are granted more privileges by having access to Node.js APIs.

由于 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');
  });
});
aabuhijleh
2021-07-22

对于那些没有使用官方模板而使用基于 Vue3 webpack 的 electron 的用户。

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

ma​​in.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>
Ginger
2021-07-24