electron系统通知 隐藏到托盘 electron new Tray

可以用 electron 的 Tray 创建一个系统通知区的图标（也叫托盘），控制隐藏或显示

在入口文件添加下面的代码

// src/main/index.js
import { ipcMain, Menu, Tray } from 'electron'
const path = require('path')

// 注意这里是全局定义这个隐藏到系统托盘变量，不然下面 new Tray 会报错
let tray = null


function createWindow() {
  // 已定义了mainWindow = new BrowserWindow({...
  // 在这个主程序的函数里面加
  // 创建系统通知区菜单
  //                        ↓ 这里不能用反斜杠 (对应图标的文件夹，名字)
  tray = new Tray(path.join('src\\renderer\\assets', 'icon.ico')) // 用ico图标格式
  
  // 创建托盘右键选项表
  const contextMenu = Menu.buildFromTemplate([
    {
      // 应用退出
      label: '退出',
      click: () => {
        mainWindow.destroy()
      },
    },
  ])
  tray.setToolTip('梓桐的摸鱼小工具') // 鼠标放在托盘上文本
  tray.setContextMenu(contextMenu)
  // 点击图标触发的事件
  tray.on('click', () => {
    // 这里模拟桌面程序点击通知区图标实现显示或隐藏应用的功能
    // mainWindow.isVisible()
    //   ? (mainWindow.hide(), mainWindow.setSkipTaskbar(false))
    //   : (mainWindow.show(), mainWindow.setSkipTaskbar(true))
    // 或者直接只能显示
    mainWindow.show(), mainWindow.setSkipTaskbar(true)
  })
}
// 隐藏主程序
ipcMain.on('windowHide', function() {
  mainWindow.hide()
  mainWindow.setSkipTaskbar(false)
})

let tray = null
注意创建这个系统通知一定要在这里进行全局定义，不然会报错！

下面是完整代码

import { app, ipcMain, BrowserWindow, Menu, Tray } from 'electron'
const path = require('path')

let tray = null // 在全局定义这个隐藏到系统托盘，不然下面 new Tray 会报错
/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path')
    .join(__dirname, '/static')
    .replace(/\\/g, '\\\\')
}

let mainWindow
let settingWindow
const winURL =
  process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

function createWindow() {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 200,
    // useContentSize: true,// 用户是否可调节窗口大小
    width: 350,
    resizable: false, // 是否可放大窗口
    maximizable: false, // 双击禁止放大窗口

    titleBarStyle: 'hiddenInset',
    frame: false, // 无边框
    transparent: true,
    // backgroundColor: '#2e2c29',
    // opacity: 0.9, // 应用透明度
    setAlwaysOnTop: true,
    webPreferences: {
      webSecurity: false, // 无需同源策略
    },
  })

  mainWindow.loadURL(winURL)

  // 创建系统通知区菜单
  tray = new Tray(path.join('src\\renderer\\assets', 'icon.ico')) //__dirname, 'icon.ico'))
  const contextMenu = Menu.buildFromTemplate([
    {
      // 应用退出
      label: '退出',
      click: () => {
        mainWindow.destroy()
      },
    },
  ])
  tray.setToolTip('梓桐的摸鱼小工具')
  tray.setContextMenu(contextMenu)
  tray.on('click', () => {
    // 这里模拟桌面程序点击通知区图标实现显示或隐藏应用的功能
    // mainWindow.isVisible()
    //   ? (mainWindow.hide(), mainWindow.setSkipTaskbar(false))
    //   : (mainWindow.show(), mainWindow.setSkipTaskbar(true))
    mainWindow.show(), mainWindow.setSkipTaskbar(true)
  })
}

// 窗口关闭
ipcMain.on('window-close', function() {
  mainWindow.destroy()
})

// 窗口保持最前
ipcMain.on('windowOnTop', function(e, arg) {
  mainWindow.setAlwaysOnTop(arg)
})

// 显示主程序
ipcMain.on('windowShow', function() {
  mainWindow.show()
  mainWindow.setSkipTaskbar(true)
})

// 隐藏主窗口
ipcMain.on('windowHide', function() {
  mainWindow.hide()
  mainWindow.setSkipTaskbar(false)
})