Ich möchte, dass meine Electron.js - Anwendung in der Taskleiste lebt und wann immer der Benutzer etwas tun möchte, das er aus der Taskleiste wiederherstellen kann. Wie mache ich das?
Ich habe den tray
-Abschnitt aus der Dokumentation gesehen, hilft aber nicht viel, um das zu erreichen, was ich will.
Hier ist was ich bisher auf die main.js
-Datei bekommen habe
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:
Ich habe dieses menubar repo gefunden, aber es wird unter Linux nicht wie erwartet funktionieren.
Ich habe es schon vor langer Zeit herausgefunden, aber für Leute, die das gleiche Problem haben, gibt es eine Möglichkeit, auf tray
zu minimieren und von tray
wiederherzustellen. Der Trick besteht darin, die Ereignisse close
und minimize
abzufangen.
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;
});
und Wiederherstellen von Tray
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
application.isQuiting = true;
application.quit();
} }
]);
Ich habe den Code mit einem Szenario aktualisiert, wenn Sie das Symbol immer in der Taskleiste anzeigen möchten, bis Sie die Anwendung nicht beenden
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)
Hinzufügung zu den obigen Antworten - Das Flag isQuiting
ist es ebenfalls wert, die App before-quit
callback der App festzulegen. Auf diese Weise wird die Anwendung ordnungsgemäß geschlossen, wenn das Betriebssystem oder der Benutzer dies auf andere Weise verlangt, z. über Macos Dock Taskleiste 'Befehl beenden. Komplettes TypeScript-freundliches Snippet:
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;
}
});
});
Versuchen Sie, das Ereignis zu minimieren, anstatt es zu verstecken.
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;
});
Das funktionierte für mich .hide()
das Fenster schloss.
Ein besserer Weg als Flags zu verwenden und für diejenigen, die das Verhalten von minimize
nicht ändern möchten:
verstecken Sie normalerweise das Fenster bei close
mit mainWindow.hide()
mainWindow.on('close', function (event) {
event.preventDefault();
mainWindow.hide();
});
rufen Sie dann mainWIndow.destroy()
auf, um das Fenster zu schließen. Es garantiert auch, dass der Event-Handler closed
ausgeführt wird.
Aus der Dokumentation :
Das Schließen des Fensters erzwingen, das Unload- und Beforeunload-Ereignis wird für die Webseite nicht ausgegeben. Das Close-Ereignis wird auch nicht für dieses Fenster ausgegeben, garantiert jedoch, dass das geschlossene Ereignis ausgegeben wird.
var contextMenu = Menu.buildFromTemplate([
{ label: 'Show App', click: function(){
mainWindow.show();
} },
{ label: 'Quit', click: function(){
mainWindow.destroy();
app.quit();
} }
]);