wake-up-neo.com

Electron.js Wie minimiere/schließe ich das Fenster in der Taskleiste und stelle das Fenster wieder in der Schublade her?

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.

javascriptnode.jselectronnw.js
33
Miqe

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

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)
8
Vishal Shori

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;
    }
  });
});
2
Artem Vasiliev

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.

0
manish kumar

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();
    } }
]);
0
Jalal Mostafa