Question

如何制作按钮关闭 Electron-JS 应用程序？

2021-12-07

6441

javascript html electron

代码：

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”的按钮来关闭应用程序，我一直在寻找它，但我就是无法让它工作。有人可以帮忙吗？

Answer 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);