電子從菜單欄打開新的全屏窗口

Question

我有一個在菜單欄中運行的電子應用程序。

當前代碼主要基於現有的pomodoro應用（ https://github.com/G07cha/pomodoro ）

當計時器達到某個點時，它將打開一個消息框：

ipc.on('end-timer', function() {
    $('.timer').circleProgress('value', 1);

    var isRelaxTime = remote.getGlobal('isRelaxTime');

    dialog.showMessageBox({
        type: 'info',
        title: 'Pomodoro',
        message: (isRelaxTime) ? 'Timer ended it\'s time to relax' : 'Back to work',
        buttons: ['OK'],
        noLink: true
    }, function() {
        if(isRelaxTime) {
            $('.timer').circleProgress({fill: { gradient: ["blue", "skyblue"]}});
        } else {
            $('#counter').text(remote.getGlobal('pomodoroCount'));
            $('.timer').circleProgress({fill: { gradient: ["orange", "yellow"]}});
        }

        ipc.send('start-timer');
    });
});

是否可以打開新窗口而不是消息框，並使其全屏顯示？

基本上，確保用戶看到它並在計時器啟動時將其填滿屏幕，並允許自定義css等附帶的頁面。

Answer 1

這取決於您是要從現有渲染器中啟動新渲染器，還是要從“主進程”中啟動它。

無論哪種方式，它都像創建一個新的BrowserWindow實例並將URL加載到要加載的HTMl文件一樣容易。

如果要從現有渲染器啟動渲染器，則需要首先需要remote模塊。 這是一個例子：

const remote = require('remote');

// create a new BrowserWindow and pass it an object of options
var msgWindow = new remote.BrowserWindow({
  // full width & height of monitor without going into kiosk mode
  width: remote.screen.getPrimaryDisplay().size.width, 
  height: remote.screen.getPrimaryDisplay().size.height
  //, other options
});

// load your message file into new browserwindow
msgWindow.loadURL('file://' + __dirname + '/index.html');

// set variable to null when window is closed to clean it up
msgWindow.on('close', () => {
  msgWindow = null;
});

如果您是從Main Process上完成的，則替換const remote = require('remote'); 與：

const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;