电子JS隐藏在托盘图标上 - Javascript

在一些需要长时间运行的JavaScript程序中，为了减少占用系统资源，我们希望程序能够隐藏，但是又希望程序可以继续运行。托盘图标是一种非常方便的解决方案。本文将介绍如何通过JavaScript将程序隐藏在托盘图标上。

实现步骤

1. 创建托盘图标并添加事件监听

首先，我们需要在页面中创建托盘图标，并为其添加点击事件监听。在点击事件中，我们将需要隐藏的程序逻辑隐藏起来即可。

const tray = new Tray('path/to/tray/icon.png')
tray.on('click', () => {
  // 需要隐藏的程序逻辑
})

2. 创建隐藏窗口

在点击事件中，我们需要将需要隐藏的程序逻辑放在隐藏窗口中。隐藏窗口需要全屏隐藏，但是不需要将窗口显示出来，因此需要设置窗口为0x0的大小，并设置窗口为无边框和无任务栏图标。

const { BrowserWindow } = require('electron')
const hiddenWindow = new BrowserWindow({
  width: 0,
  height: 0,
  show: false,
  frame: false,
  skipTaskbar: true,
})

3. 将程序逻辑放在隐藏窗口中

在隐藏窗口中，我们可以像在普通窗口中一样运行我们的程序逻辑。注意：隐藏窗口需要设为全屏隐藏，因此需要控制程序逻辑的开关。

const isHidden = hiddenWindow.isVisible()
if (isHidden) {
  // 在隐藏窗口中，我们可以不需要的逻辑进行销毁
} else {
  // 执行需要隐藏的程序逻辑
}

完整代码

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

let tray
let hiddenWindow
let hiddenLogicInterval

function createTray() {
  tray = new Tray('path/to/tray/icon.png')
  tray.on('click', () => {
    const isHidden = hiddenWindow.isVisible()
    if (isHidden) {
      clearInterval(hiddenLogicInterval)
      hiddenWindow.hide()
    } else {
      hiddenWindow.show()
      hiddenLogicInterval = setInterval(() => {
        // 执行需要隐藏的程序逻辑
      }, 1000)
    }
  })
}

function createHiddenWindow() {
  hiddenWindow = new BrowserWindow({
    width: 0,
    height: 0,
    show: false,
    frame: false,
    skipTaskbar: true,
  })
  hiddenWindow.loadURL(`file://${__dirname}/hidden.html`)
}

app.on('ready', () => {
  createTray()
  createHiddenWindow()
})

总结

通过将程序逻辑放在隐藏窗口中，并在托盘图标点击事件中控制隐藏窗口的显示和隐藏，我们可以很方便地将JavaScript程序隐藏在托盘图标上。在实际使用中，我们可以将需要隐藏的程序逻辑放在隐藏窗口中，并通过定时器或者其他方式来控制程序的运行。