如何在 Electron 应用程序中捕获单击应用程序窗口

问题描述

我希望在 Electron 应用中捕捉点击应用窗口关闭按钮的事件.

I wish to catch the event of clicking the app window's close button in Electron app.

我正在尝试为 Mac OSX 开发 Electron 应用程序.我想隐藏应用程序窗口，而不是像其他 Mac 应用程序一样在用户单击窗口的关闭按钮时终止应用程序.

I'm trying to develope Electron app for Mac OSX. I want to hide the app window, not to terminate the app when a user clicks the window's close button like other Mac apps.

但是，我无法检测到系统应该终止还是应该隐藏，因为在任何情况下，browser-window 的 close 事件都会被调用单击关闭按钮，关闭操作系统或使用退出命令终止应用程序，Cmd+Q.

However, I can not detect wether the system should be terminated or it should be hidden, because in any case, a close event of browser-window is called when a close button is clicked, the OS is shut down or the app is terminated with quit command, Cmd+Q.

有什么方法可以捕捉到在 Electron 应用中点击应用窗口关闭按钮的事件?

Is there any way to catch the event of clicking the app window's close button in Electron app?

感谢您的帮助.

为了检测点击关闭按钮的事件，我尝试了这段代码

To detect the event of clicking a close button, I tried this code

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;

var menu = Menu.buildFromTemplate([
  {
    label: 'Sample',
    submenu: [
      {label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
      {label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {force_quit=true; app.quit();}}
    ]
  }]);

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

app.on('ready', function(){

    Menu.setApplicationMenu(menu);

    mainWindow = new BrowserWindow({width:800, height:600});

    mainWindow.on('close', function(e){
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    mainWindow.on('closed', function(){
        console.log("closed");
        mainWindow = null;
        app.quit();
    });

    app.on('activate-with-no-open-windows', function(){
        mainWindow.show();
    });
});

使用此代码，当单击应用程序窗口的关闭按钮时应用程序被隐藏，而当键入 Cmd+Q 时应用程序被终止.但是，当我尝试关闭操作系统时，会阻止关闭事件.

With this code, the app is hidden when a close button of the app window is clicked, and the app is terminated when Cmd+Q is typed. However, when I try to shut down the OS, the shutdown event is prevented.

推荐答案

你可以使用 close 事件来捕捉它电子/blob/master/docs/api/browser-window.md#event-close" rel="noreferrer">浏览器窗口 api.您可以尝试以下方法来验证这一点...

You can catch it by using the close event of the browser-window api. You can try the following to verify this...

var app = require('app');

var force_quit = false;

app.on('ready', function () {        
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.on('close', function() { //   <---- Catch close event

        // The dialog box below will open, instead of your app closing.
        require('dialog').showMessageBox({
            message: "Close button has been pressed!",
            buttons: ["OK"]
        });
    });
});

更新:

要分离功能，您可以执行以下操作...

Update:

To separate functionality you can do the following...

var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');

var force_quit = false;
var menu = Menu.buildFromTemplate([
{
    label: 'Sample',
    submenu: [
        {label: 'About App', selector: 'orderFrontStandardAboutPanel:'},
        {
            label: 'Quit', 
            accelerator: 'CmdOrCtrl+Q', 
            click: function() { 
                force_quit=true; app.quit();
            }
        }
    ]
}]);

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

app.on('ready', function(){

    Menu.setApplicationMenu(menu);

    mainWindow = new BrowserWindow({width:800, height:600});

    // Continue to handle mainWindow "close" event here
    mainWindow.on('close', function(e){
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    // You can use 'before-quit' instead of (or with) the close event
    app.on('before-quit', function (e) {
        // Handle menu-item or keyboard shortcut quit here
        if(!force_quit){
            e.preventDefault();
            mainWindow.hide();
        }
    });

    // Remove mainWindow.on('closed'), as it is redundant

    app.on('activate-with-no-open-windows', function(){
        mainWindow.show();
    });
});

// This is another place to handle events after all windows are closed
app.on('will-quit', function () {
    // This is a good place to add tests insuring the app is still
    // responsive and all windows are closed.
    console.log("will-quit");
    mainWindow = null;
});

以上代码使用before-quit 事件处理程序 处理应用程序 api 上的应用程序关闭"事件.浏览器窗口关闭"事件仍由 mainWindow.on('close') 在浏览器窗口 api 上处理.

The above code uses the before-quit event handler to handle app "close" events on the app api. Browser-window "close" events are still handled on the browser-window api by mainWindow.on('close').

此外，will-quit 事件是在应用完全关闭之前测试问题的更好地方.

Additionally, the will-quit event is a better place to test for problems before the app closes completely.

这篇关于如何在 Electron 应用程序中捕获单击应用程序窗口关闭按钮的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！