在电子上显示和隐藏主窗口

时间:2017-03-23 22:30:08

标签: javascript electron

我不想退出应用程序,而是在单击系统关闭按钮时隐藏主窗口,并在单击或激活应用程序时显示主窗口。我正在使用以下代码在我的Electron应用程序上执行此操作:

'use strict'

import { app, BrowserWindow } from 'electron'

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:${require('../../../config').port}`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 620,
    width: 350,
    resizable: true,
    fullscreenable: true
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow.hide()
  })

  // eslint-disable-next-line no-console
  console.log('mainWindow opened')
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  mainWindow.show()
})

但是,隐藏并显示activateclosed事件中的窗口会显示以下错误,并且在应用程序处于活动状态时从不显示主窗口。

Uncaught Exception:
Error: Object has been destroyed
    at BrowserWindow.<anonymous> (/app/src/main/index.js:24:16): mainWindow.on('closed')

不确定还能做什么。

2 个答案:

答案 0 :(得分:10)

我的解决方案是:

import { app, BrowserWindow } from 'electron'

let win = null

function createWindow () {
  win = new BrowserWindow({width: 1024, height: 768})
  win.loadURL('...')
  win.webContents.openDevTools()
  win.on('close', (event) => {
    if (app.quitting) {
      win = null
    } else {
      event.preventDefault()
      win.hide()
    }
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => { win.show() })

app.on('before-quit', () => app.quitting = true)

在OSX上以这种方式关闭窗口,窗口只是隐藏,如果你用cmd + Q关闭应用程序,应用终止。

答案 1 :(得分:0)

你可以这样做,它会阻止窗口关闭,只会隐藏它。

您正在收听closed事件。但是你需要听close事件。在这种情况下,您可以阻止默认操作,只需隐藏即可。

mainWindow.on('close', event=>{
    event.preventDefault(); //this prevents it from closing. The `closed` event will not fire now
    mainWindow.hide();
})

执行此操作后,您将无法关闭窗口。因此,您需要使用CmdOrCtrl+Q加速器向您的应用添加菜单。然后在那里,您可以告诉应用程序退出。

const {app, Menu} = require('electron');

Menu.setApplicationMenu(Menu.buildFromTemplate([
    {
      label: "Quit",
      accelerator: "CmdOrCtrl+Q",
      click() {
        app.quit();
      }
    }
]));

这将允许您使用Cmd + Q退出您的应用。