如何使按钮关闭 Electron-JS 应用程序？答案

【问题标题】：How do I make button close Electron-JS app?如何使按钮关闭 Electron-JS 应用程序？
【发布时间】：2022-01-12 20:33:41
【问题描述】：

代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>Youtify</title>
  </head>
  <body>
        <div id = "leftBar"></div>
        <div id = "rightBar"></div>
        <div id = "bottomBar"><hr></div>
        <div id = "toolButtons">
          <div id ="closeBtn"><a data-text="✖"></a></div>
          <div id="maxBtn"><a data-text="❐" ></a></div>
          <div id="minBtn"><a data-text="─" ></a></div>
        </div>
    <script src="./renderer.js"></script>
  </body>
</html>

main.js

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

function createWindow () {   const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,   })

  mainWindow.loadFile('index.html') }

app.whenReady().then(() => {   createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()   }) })

renderer.js

// close app
function closeApp(e) {
  e.preventDefault();
  app.quit();
}

document.getElementById("closeBtn").addEventListener("click", closeApp);

我想要的是单击 ID 为“closeBtn”的按钮来关闭应用程序，我一直在寻找它，但我就是无法让它工作。有人可以帮忙吗？

【问题讨论】：

所以只是为了确保..window.close() 不起作用？
哦，它工作，但我仍然需要最小化和最大化按钮，所以..
但您的问题已得到解答.. 不客气>:D

标签： javascript html electron

【解决方案1】：

尝试使用ipcRenderer将关闭命令发送到main.js

在你的 main.js 中：

ipcMain.on('close', () => {
  app.quit()
})

然后，在你的 renderer.js 中：

const ipc = require('electron').ipcRenderer

// close app
function closeApp(e) {
  e.preventDefault()
  ipc.send('close')
}

document.getElementById("closeBtn").addEventListener("click", closeApp);

【讨论】：

问题是“require is not defined”。
stackoverflow.com/a/55908510/15048478
是的，我知道这一点，但它仍然没有工作，但现在我尝试了它，它不知从何而来？（：好的，谢谢您的宝贵时间！