Electron 从菜单栏打开新的全屏窗口

Question

我有一个在菜单栏中运行的电子应用程序。

代码目前主要基于现有的番茄钟应用 (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;
});

如果您是从主进程执行此操作，则将 const remote = require('remote'); 替换为：

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