web-dev-qa-db-ja.com

Electron.jsシステムトレイのウィンドウを最小化/閉じる方法、およびトレイからウィンドウを復元する方法

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

UPDATE：

私はこれを見つけました menubar repoですが、Linuxでは期待通りに動作しません。

javascriptnode.jselectronnw.js
34
Miqe

私はずっと前にそれを実際に理解しましたが、ここで同じ問題に遭遇した人にとっては、trayに最小化し、trayから復元する方法の1つです。トリックは、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();
    } }
]);
65
Miqe

アプリケーションを終了しない限り、常にシステムトレイにアイコンを表示したい場合は、シナリオでコードを更新しました。

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

上記の回答に追加-isQuitingフラグはアプリで設定する価値がありますbefore-quitコールバックも。このように、OSまたはユーザーから他の方法で要求された場合、アプリケーションは適切に閉じられます。 Macos Dockタスクバーのquitコマンド経由。 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;
    }
  });
});
4
Artem Vasiliev

フラグを使用するよりも、minimizeの動作を変更したくない場合に適した方法：

通常、mainWindow.hide()を使用してcloseイベントでウィンドウを非表示にします

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

次に、mainWIndow.destroy()を呼び出して、ウィンドウを強制的に閉じます。また、closedイベントハンドラーの実行も保証されます。

ドキュメント から：

ウィンドウを強制的に閉じると、unloadイベントとbeforeunloadイベントはWebページに対して発行されず、closeイベントもこのウィンドウに対して発行されませんが、closedイベントが発行されることが保証されます。

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

非表示ではなくイベントを最小化してみてください。

_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()はウィンドウを閉じていました。

0
manish kumar