electron关闭页面隐藏到托盘

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

image.png

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

import { Menu, Tray } from 'electron'
// 注意这里是全局定义这个隐藏到系统托盘变量，不然下面 new Tray 会报错
let tray = null
// 运行根路径获取托盘图标
const rootSrc = process.cwd();


function createWindow() {
  const filePath = rootSrc + "\\resources\\bin\\favicon.png";
  // const win = new BrowserWindow({...
  // 在这个主程序的函数里面加
  // 创建系统通知区菜单
   // ************* 系统托盘*********************** 
  // 当我们点击关闭时触发close事件，我们按照之前的思路在关闭时，隐藏窗口，隐藏任务栏窗口
  // event.preventDefault(); 禁止关闭行为(非常必要，因为我们并不是想要关闭窗口，所以需要禁止默认行为)
  win.on('close', (event) => {
    win.hide();
    win.setSkipTaskbar(true);
    event.preventDefault();
  });
  //创建系统通知区菜单
  // 这里filePath是系统托盘的图标路径
  // filePath生产环境和开发环境的路径并不一样
  // 所以很多小伙伴发现本地跑的的时候系统托盘创建没问题，但是打包exe安装之后，托盘就创建失败了
  tray = new Tray(filePath)
  const contextMenu = Menu.buildFromTemplate([
    { label: '退出', click: () => { win.destroy() } },//我们需要在这里有一个真正的退出（这里直接强制退出）
  ])
  tray.setToolTip('设备互联终端')
  tray.setContextMenu(contextMenu)
  tray.on('click', () => { //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能
    win.isVisible() ? win.hide() : win.show()
    win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
  })
}

完整代码

"use strict";
import { app, protocol, BrowserWindow } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
// ************* 系统托盘***********************
import { Menu, Tray } from 'electron'
// 注意这里是全局定义这个隐藏到系统托盘变量，不然下面 new Tray 会报错
let tray = null
// 运行根路径
const rootSrc = process.cwd();
// 1.引入remote模块
const remote = require("@electron/remote/main");
remote.initialize();
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

async function createWindow () {
  const filePath = rootSrc + "\\resources\\bin\\favicon.png";
  // Create the browser window.
  // 使用我们全局定义的的win，因为后面方法外用会用到
  const win = new BrowserWindow({
    // 初始窗口
    width: 1200,
    height: 900,
    // 全屏
    // fullscreen: true,
    autoHideMenuBar: true, //隐藏菜单
    icon: filePath,
    webPreferences: {
      nodeIntegration: true, // 使渲染进程拥有node环境
      //关闭web权限检查，允许跨域
      webSecurity: false,
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
    },
  });
  // 2.启用remote模块，渲染进程就可以使用主程序模块
  remote.enable(win.webContents);
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
  // ************* 系统托盘*********************** 
  // 当我们点击关闭时触发close事件，我们按照之前的思路在关闭时，隐藏窗口，隐藏任务栏窗口
  // event.preventDefault(); 禁止关闭行为(非常必要，因为我们并不是想要关闭窗口，所以需要禁止默认行为)
  win.on('close', (event) => {
    win.hide();
    win.setSkipTaskbar(true);
    event.preventDefault();
  });
  //创建系统通知区菜单
  // 这里filePath是系统托盘的图标路径
  // filePath生产环境和开发环境的路径并不一样
  // 所以很多小伙伴发现本地跑的的时候系统托盘创建没问题，但是打包exe安装之后，托盘就创建失败了
  tray = new Tray(filePath)
  const contextMenu = Menu.buildFromTemplate([
    { label: '退出', click: () => { win.destroy() } },//我们需要在这里有一个真正的退出（这里直接强制退出）
  ])
  tray.setToolTip('设备互联终端')
  tray.setContextMenu(contextMenu)
  tray.on('click', () => { //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能
    win.isVisible() ? win.hide() : win.show()
    win.isVisible() ? win.setSkipTaskbar(false) : win.setSkipTaskbar(true);
  })
}


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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});