Electron.js 如何最小化/关闭系统托盘的窗口并从托盘恢复窗口?

2022-01-10 00:00:00 node.js electron javascript nw.js

我希望我的 Electron.js 应用程序存在于系统托盘上，并且每当用户想要做某事时他们可以从系统托盘恢复做一些事情并将其最小化/关闭回到系统托盘.我该怎么做?

I want my Electron.js application to live on system tray and whenever the user wants to do something they can restore from the system tray do something and minimize/close it back to system tray. How do i do that?

我从文档中看到了 tray 部分，但对实现我想要的没有多大帮助.

I've seen the tray section from the documentation but doesn't help much to achieve what i want.

这是我目前在 main.js 文件中得到的内容

Here is what i got so far on the main.js file

var application = require('app'),
    BrowserWindow = require('browser-window'),
    Menu = require('menu'), 
    Tray = require('tray'); 
application.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 650,
        height: 450,
        'min-width': 500,
        'min-height': 200,
        'accept-first-mouse': true,
        // 'title-bar-style': 'hidden',
        icon:'./icon.png'
    });
    mainWindow.loadUrl('file://' + __dirname + '/src/index.html');
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
    mainWindow.setMenu(null);

    var appIcon = null;
    appIcon = new Tray('./icon-resized.png');
    var contextMenu = Menu.buildFromTemplate([
        { label: 'Restore', type: 'radio' }
    ]);
    appIcon.setToolTip('Electron.js App');
    appIcon.setContextMenu(contextMenu);
});

更新:

我找到了这个 menubar 存储库，但它在 linux 上无法正常工作.

I found this menubar repo, but it won't work as expected on linux.

推荐答案

其实我很久以前就想出来了，但是对于遇到同样问题的人来说，这是一种可以实现最小化到 tray 并从 tray 恢复.诀窍是捕捉 close 和 minimize 事件.

I actually figured it out a long time ago but for folks who encounter the same problem here is one way you could achieve minimizing to tray and restoring from tray. The trick is to catch the close and minimize events.

var BrowserWindow = require('browser-window'),

var mainWindow = new BrowserWindow({
    width: 850,
    height: 450,
    title: "TEST",
    icon:'./icon.png'
});

mainWindow.on('minimize',function(event){
    event.preventDefault();
    mainWindow.hide();
});

mainWindow.on('close', function (event) {
    if(!application.isQuiting){
        event.preventDefault();
        mainWindow.hide();
    }

    return false;
});

并从 Tray 恢复 

var contextMenu = Menu.buildFromTemplate([
    { label: 'Show App', click:  function(){
        mainWindow.show();
    } },
    { label: 'Quit', click:  function(){
        application.isQuiting = true;
        application.quit();
    } }
]);

相关文章