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

How to catch the event of clicking the app window#39;s close button in Electron app(如何在 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.

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();
    });
});

你可以使用 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 应用程序中捕获单击应用程序窗口关闭按钮的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！