时间戳

首页 > 解决方案 > 电子自定义关闭、最大化和最大化不起作用

javascript - 电子自定义关闭、最大化和最大化不起作用

问题描述

我是这个电子空间的新手，遇到了问题。我没有设法让我的自定义按钮工作。这让我发疯。有人知道我在做什么错吗？当我单击时，按钮什么也不做。我的代码是来自较旧的 youtube 教程的示例，我认为从那时起情况发生了变化。

这是我的代码：

menuHandler.js

    const $ = require('jquery');
const { remote } = require('electron');
var win = remote.getCurrentWindow();

$('#minimize').click(function () {
    win.minimize();
});

$('#close').click(function () {
    win.close();
});

$('#maximize').click(function () {
    if (win.isMaximized()) {
        win.unmaximize();
    } else {
        win.maximize();
    }
    console.log(win.isMaximized());
});

我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
    <script type ="text/javascript"> src="/src/js/menuHandler.js"</script>
</head>

<body>
 
    <div id="container">
      <nav>
          
          <div id="buttons">
              <div id="minimize">
                <span id="minimize-font">&mdash;</span>
              </div>
                
              <div id="maximize">
                <span id="size-font">&#9723;</span>
              </div>
                    
              <div id="close">
                 <span id="close-font" >&#10005;</span>
              </div>
          </div>
       </nav>

    </div> 
    
    </html>
 
</body>
</html>

和我的app.js

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

let win;

var IMG_DIR = '/img/';
var APP_DIR = '/src/';

function createWindow() {
    win = new BrowserWindow({
    width: 1100,
    height: 750,
    minWidth: 930,
    minHeight: 650,
    frame: false,
    /*title: "Nader | Initio",
    resizable: true, */
    backgroundColor: '#1A373E',
    icon: path.join(__dirname, IMG_DIR, 'icon.png'),
    webPreferences: {
        nodeIntegration: true
        }
    
  });

  win.openDevTools()

  win.loadURL(url.format({
      pathname: path.join(__dirname, APP_DIR, 'index.html'),
      protocol: 'file:',
      slashes: true
  }))
} 
app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin') {
        app.quit();
    }
});

谢谢您的帮助！

标签： javascriptelectron

解决方案

需要几件小事才能使您的代码正常工作：

  • <script type ="text/javascript"> src="/src/js/menuHandler.js"</script> 需要是 <script type="text/javascript" src="/src/js/menuHandler.js"></script>
  • 从 2020 年 8 月发布的 Electron 10开始，需要在渲染器进程中设置enableRemoteModule: true是否使用webPreferences。remote
  • 最后，您应该在页面加载后注册按钮单击事件处理程序。否则，这些元素可能还不存在。 
    $(window).on("load", function() {
    console.log("loaded");

    $("#minimize").click(function () {
        console.log("minimize");
        win.minimize();
    });

    // etc. 

});

作为一般提示，我建议使用您已经在代码中激活的 DevTools。在那里，在控制台选项卡中，您可以看到渲染器进程中发生的 JavaScript 错误。

推荐阅读