問題描述

我希望在 Electron 應(yīng)用中捕捉點(diǎn)擊應(yīng)用窗口關(guān)閉按鈕的事件.

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

我正在嘗試為 Mac OSX 開發(fā) Electron 應(yīng)用程序.我想隱藏應(yīng)用程序窗口，而不是像其他 Mac 應(yīng)用程序一樣在用戶單擊窗口的關(guān)閉按鈕時(shí)終止應(yīng)用程序.

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.

但是，我無法檢測到系統(tǒng)應(yīng)該終止還是應(yīng)該隱藏，因?yàn)樵谌魏吻闆r下，browser-window 的 close 事件都會(huì)被調(diào)用單擊關(guān)閉按鈕，關(guān)閉操作系統(tǒng)或使用退出命令終止應(yīng)用程序，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 應(yīng)用中點(diǎn)擊應(yīng)用窗口關(guān)閉按鈕的事件?

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

感謝您的幫助.

為了檢測點(diǎn)擊關(guān)閉按鈕的事件，我嘗試了這段代碼

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

使用此代碼，當(dāng)單擊應(yīng)用程序窗口的關(guān)閉按鈕時(shí)應(yīng)用程序被隱藏，而當(dāng)鍵入 Cmd+Q 時(shí)應(yīng)用程序被終止.但是，當(dāng)我嘗試關(guān)閉操作系統(tǒng)時(shí)，會(huì)阻止關(guān)閉事件.

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.您可以嘗試以下方法來驗(yàn)證這一點(diǎn)...

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"]
        });
    });
});

更新:

要分離功能，您可以執(zhí)行以下操作...

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 事件處理程序 處理應(yīng)用程序 api 上的應(yīng)用程序關(guān)閉"事件.瀏覽器窗口關(guān)閉"事件仍由 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 事件是在應(yīng)用完全關(guān)閉之前測試問題的更好地方.

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

這篇關(guān)于如何在 Electron 應(yīng)用程序中捕獲單擊應(yīng)用程序窗口關(guān)閉按鈕的事件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！