web-dev-qa-db-fra.com

Electron.js Comment réduire/fermer la fenêtre dans la barre d'état système et restaurer la fenêtre depuis la barre d'état?

Je veux que mon Electron.js application vive dans la barre d'état système et chaque fois que l'utilisateur souhaite effectuer une opération qu'il peut restaurer depuis la barre d'état système, effectuez une opération et réduisez-la/refermez-vous à la barre d'état système. Comment je fais ça?

J'ai vu la section tray de la documentation, mais cela ne m'aide pas beaucoup à réaliser ce que je veux. 

Voici ce que j’ai eu jusqu’à présent sur le fichier 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);
});

METTRE À JOUR:

J'ai trouvé ceci menubar repo, mais cela ne fonctionnera pas comme prévu sur linux.

javascriptnode.jselectronnw.js
33
Miqe

En fait, je l'ai compris il y a longtemps, mais pour ceux qui rencontrent le même problème, voici un moyen de minimiser tray et de restaurer tray. L'astuce consiste à intercepter les événements close et 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;
});

et restaurer à partir de Tray 

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

J'ai mis à jour le code avec un scénario si vous souhaitez afficher une icône sur votre barre d'état système tout le temps jusqu'à ce que vous ne quittez pas l'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)
8
Vishal Shori

Ajout aux réponses ci-dessus - L'indicateur isQuiting vaut également la peine d'être défini lors du rappel de l'application before-quit De cette façon, l’application sera correctement fermée si le système d’exploitation ou l’utilisateur le demande, par ex. via la commande Quitter de la barre des tâches de Macos Dock. Extrait de code compatible TypeScript complet:

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

Essayez de minimiser les événements au lieu de les masquer.

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;
});

Cela a fonctionné pour moi .hide() fermait la fenêtre.

0
manish kumar

Un meilleur moyen que d’utiliser des drapeaux et pour ceux qui ne veulent pas changer le comportement minimize:

masquez normalement la fenêtre de l'événement close à l'aide de mainWindow.hide()

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

puis appelez mainWIndow.destroy() pour forcer la fermeture de la fenêtre. Il garantit également l'exécution du gestionnaire d'événements closed.

De la documentation :

En forçant la fermeture de la fenêtre, les événements unload et beforeunload ne seront pas émis pour la page Web et l'événement close ne sera pas non plus émis pour cette fenêtre, mais cela garantit que l'événement fermé sera émis.

var contextMenu = Menu.buildFromTemplate([
    { label: 'Show App', click:  function(){
        mainWindow.show();
    } },
    { label: 'Quit', click:  function(){
        mainWindow.destroy();
        app.quit();
    } }
]);
0
Jalal Mostafa