Electron.js 如何最小化关闭系统托盘窗口并从托盘恢复窗口

JS

使用 Electron.JS 开发桌面应用程序时，经常需要在系统托盘中显示一个小窗口来提供一些基本功能。在这种情况下，用户可能希望能够最小化或关闭该窗口，并通过单击托盘图标来恢复窗口。本文将介绍如何实现这一功能，并提供一个案例代码来帮助读者理解。

## 最小化/关闭系统托盘窗口

要实现最小化/关闭系统托盘窗口的功能，我们首先需要创建一个 Electron 的 BrowserWindow 对象，并将其设置为无边框和透明。然后，我们将创建一个系统托盘图标，并通过监听相应的事件来实现最小化/关闭窗口的功能。

下面是一个简单的示例代码：

Javascript
const { app, BrowserWindow, Tray } = require('electron')
const path = require('path')
let mAInWindow
let tray
function createWindow () {
  mAInWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    transparent: true
  })
  mAInWindow.loadFile('index.html')
  // 创建系统托盘图标
  tray = new Tray(path.join(__dirname, 'tray-icon.png'))
  // 监听点击事件，最小化/关闭窗口
  tray.on('click', () => {
    if (mAInWindow.isVisible()) {
      mAInWindow.hide()
    } else {
      mAInWindow.show()
    }
  })
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

在上述代码中，我们首先创建了一个 BrowserWindow 对象，并将其设置为无边框和透明。然后，我们加载了一个名为 "index.html" 的文件作为窗口的内容。

接下来，我们创建了一个 Tray 对象，并将其设置为一个图标文件的路径。然后，我们通过监听 Tray 对象的 'click' 事件来实现最小化/关闭窗口的功能。当用户单击托盘图标时，我们检查窗口的可见性状态，并根据需要隐藏或显示窗口。

最后，我们使用 app.whenReady() 方法来创建主窗口，并通过 app.on('activate') 方法在应用程序激活时重新创建窗口。此外，我们还使用 app.on('window-all-closed') 方法来在所有窗口关闭时退出应用程序（除非在 macOS 上）。

案例代码实现最小化/关闭系统托盘窗口并从托盘恢复窗口的功能。

##

在本文中，我们介绍了如何使用 Electron.JS 实现最小化/关闭系统托盘窗口并从托盘恢复窗口的功能。通过创建一个无边框和透明的 BrowserWindow 对象，并监听系统托盘图标的 'click' 事件，我们能够根据需要隐藏或显示窗口。读者可以根据自己的需求进行相应的修改和扩展，以实现更复杂的功能。