Javascript Electron.js 如何最小化/关闭窗口到系统托盘并从托盘恢复窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37828758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Electron.js How to minimize/close window to system tray and restore window back from tray?
提问by ShegaMike
I want my Electron.jsapplication 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?
我希望我的Electron.js应用程序存在于系统托盘上，每当用户想要做某事时，他们可以从系统托盘恢复做某事并将其最小化/关闭回系统托盘。我怎么做？
I've seen the traysection from the documentation but doesn't help much to achieve what i want.
我已经看过tray文档中的部分，但对实现我想要的没有太大帮助。
Here is what i got so far on the main.jsfile
这是我目前在main.js文件中得到的信息
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);
});
UPDATE:
更新：
I found this menubarrepo, but it won't work as expected on linux.
我找到了这个菜单栏repo，但它在 linux 上无法按预期工作。
回答by ShegaMike
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 trayand restoring from tray. The trick is to catch the closeand minimizeevents.
其实，我想通了很长一段时间以前，但对于谁在这里遇到了同样的问题，你可以实现一个方法最大限度地减少人们tray和恢复tray。诀窍是捕捉close和minimize事件。
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;
});
and restoring from Tray
并从 Tray
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
application.isQuiting = true;
application.quit();
} }
]);
回答by Vishal Shori
I updated the code with a scenario if you want to show icon on your system tray all the time until you don't quit the application
如果您想一直在系统托盘上显示图标直到您不退出应用程序，我用一个场景更新了代码
var { app, BrowserWindow, Tray, Menu } = require('electron')
var path = require('path')
var url = require('url')
var iconpath = path.join(__dirname, 'user.ico') // path of y
var win
function createWindow() {
win = new BrowserWindow({ width: 600, height: 600, icon: iconpath })
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
}))
var appIcon = new Tray(iconpath)
var contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
win.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
appIcon.setContextMenu(contextMenu)
win.on('close', function (event) {
win = null
})
win.on('minimize', function (event) {
event.preventDefault()
win.hide()
})
win.on('show', function () {
appIcon.setHighlightMode('always')
})
}
app.on('ready', createWindow)
回答by Artem Vasiliev
Addition to above answers - isQuitingflag is worth setting at app' before-quitcallback, too. This way the application will be closed properly if requested by the OS or user some other way, e.g. via Macos Dock taskbar' quit command. Complete Typescript-friendly snippet:
除了上述答案 -isQuiting标志也值得在应用程序的before-quit回调中设置。这样，如果操作系统或用户以其他方式（例如通过 Macos Dock 任务栏的退出命令）请求，应用程序将正确关闭。完整的 Typescript 友好代码段：
import {app, BrowserWindow, Tray, Menu} from 'electron';
import * as path from 'path';
let window;
let isQuiting;
let tray;
app.on('before-quit', function () {
isQuiting = true;
});
app.on('ready', () => {
tray = new Tray(path.join(__dirname, 'tray.png'));
tray.setContextMenu(Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
window.show();
}
},
{
label: 'Quit', click: function () {
isQuiting = true;
app.quit();
}
}
]));
window = new BrowserWindow({
width: 850,
height: 450,
show: false,
});
window.on('close', function (event) {
if (!isQuiting) {
event.preventDefault();
window.hide();
event.returnValue = false;
}
});
});
回答by Jalal Mostafa
A better way than using flags and for those who do not want to change the minimizebehavior :
对于那些不想改变minimize行为的人来说，这是一种比使用标志更好的方法：
just normally hide the window on closeevent using mainWindow.hide()
通常只是close使用事件隐藏窗口mainWindow.hide()
mainWindow.on('close', function (event) {
event.preventDefault();
mainWindow.hide();
});
then call mainWIndow.destroy()to force close the window. It also guarantees to execute the closedevent handler.
然后调用mainWIndow.destroy()强制关闭窗口。它还保证执行closed事件处理程序。
From the documentation:
从文档：
Force closing the window, the unload and beforeunload event won't be emitted for the web page, and close event will also not be emitted for this window, but it guarantees the closed event will be emitted.
强制关闭窗口，网页不会发出 unload 和 beforeunload 事件，该窗口也不会发出 close 事件，但保证会发出 closed 事件。
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
mainWindow.destroy();
app.quit();
} }
]);
回答by manish kumar
Try minimize event instead of hide.
尝试最小化事件而不是隐藏。
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.minimize();
});
mainWindow.on('close', function (event) {
event.preventDefault();
mainWindow.minimize();
return false;
});
This worked for me.
hide()was closing the window.
这对我有用。
hide()正在关窗。
