如何将电子应用程序最小化到托盘图标 - Javascript

在电子应用程序中，将应用程序最小化到系统托盘图标是一个常见的需求。在本文中，我们将介绍如何使用Javascript实现这一功能。

准备工作

在开始之前，我们需要先安装electron模块。在命令行中执行以下命令：

npm install electron --save

实现过程

在程序中，我们通过创建一个系统托盘图标，然后在最小化时将应用程序隐藏到托盘图标中，来实现将应用程序最小化到托盘图标的效果。

创建系统托盘图标

在创建系统托盘图标之前，我们需要确定系统是否支持这个功能。我们可以使用以下代码判断是否支持。

if (process.platform === "darwin" || process.platform === "win32") {
  // 系统支持创建系统托盘图标
} else {
  // 系统不支持创建系统托盘图标
}

接下来，我们可以使用以下代码来创建系统托盘图标。

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

let tray = null

app.on('ready', () => {
  if (process.platform === "darwin" || process.platform === "win32") {
    tray = new Tray('path/to/icon.png')
    const contextMenu = Menu.buildFromTemplate([
      { label: '停止服务', click: () => {
          // 在这里处理点击图标时要执行的操作
        } 
      },
      { label: '退出', click: () => app.quit() },
    ])
    tray.setToolTip('应用程序名称')
    tray.setContextMenu(contextMenu)
  }
})

在上面的代码中，我们通过new Tray()方法创建了一个系统托盘图标，并设置了一个上下文菜单，当用户点击托盘图标时，会弹出这个菜单。

最小化到系统托盘图标

当用户最小化应用程序时，我们需要将应用程序隐藏到托盘图标中。我们可以在BrowserWindow对象的close事件中将应用程序隐藏到托盘图标中。

const { app, BrowserWindow } = require('electron')

let mainWindow = null

app.on('ready', () => {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    title: '应用程序名称' 
  })

  mainWindow.on('close', function (event) {
    if (!app.isQuiting) {
      event.preventDefault()
      mainWindow.hide()
    }
  })
})

在上述代码中，我们通过mainWindow.on('close', ...) 方法，监听了BrowserWindow对象的close事件。当用户点击最小化按钮时，我们通过event.preventDefault()方法，阻止应用程序关闭，并使用mainWindow.hide()方法将应用程序隐藏到托盘图标中。

完整代码

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

let mainWindow = null
let tray = null

app.on('ready', () => {
  if (process.platform === "darwin" || process.platform === "win32") {
    tray = new Tray('path/to/icon.png')
    const contextMenu = Menu.buildFromTemplate([
      { label: '停止服务', click: () => {
          // 在这里处理点击图标时要执行的操作
        } 
      },
      { label: '退出', click: () => app.quit() },
    ])
    tray.setToolTip('应用程序名称')
    tray.setContextMenu(contextMenu)
  }

  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    title: '应用程序名称' 
  })

  mainWindow.on('close', function (event) {
    if (!app.isQuiting) {
      event.preventDefault()
      mainWindow.hide()
    }
  })
})

以上就是如何将电子应用程序最小化到托盘图标的全部内容，希望对你有所帮助。