我希望我的Electron.js应用程序能够存在于系统托盘上,每当用户想要做某些事情时,他们都可以从系统托盘中恢复,并将其最小化/关闭回系统托盘。我怎么做?
我已经从文档中看到了tray
部分,但没有太大帮助实现我想要的东西。
这是我到目前为止在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);
});
更新:
我找到了这个menubar repo,但它在linux上无法正常工作。
我实际上很久以前就已经知道了,但对于那些在这里遇到同样问题的人来说,有一种方法可以实现最小化到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;
});
并从Tray
恢复
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
application.isQuiting = true;
application.quit();
} }
]);
如果您希望始终在系统托盘上显示图标,直到您不退出应用程序,我会使用方案更新代码
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)
除了上面的答案 - isQuiting
标志也值得设置在app'before-quit
回调。这样,如果OS或用户以其他方式请求,例如,应用程序将被正确关闭。通过Macos Dock任务栏'退出命令。完整的类型友好代码片段:
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;
}
});
});
比使用标志和不想改变minimize
行为的人更好的方法:
通常使用close
隐藏mainWindow.hide()
事件的窗口
mainWindow.on('close', function (event) {
event.preventDefault();
mainWindow.hide();
});
然后打电话给mainWIndow.destroy()
强制关闭窗口。它还保证执行closed
事件处理程序。
强制关闭窗口,不会为网页发出unload和beforeunload事件,也不会为此窗口发出关闭事件,但它保证将发出关闭事件。
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
mainWindow.destroy();
app.quit();
} }
]);
尝试最小化事件而不是隐藏。
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;
});
这对我有用。 hide()
正在关闭窗口。