electron添加windows托盘图标和菜单

目录结构

import { 
  app, 
  BrowserWindow,
  Menu,
  Tray
} from 'electron'

const path = require('path');

//托盘对象
var appTray = null;

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

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 560,
    width: 800,
    icon: NODE_ENV === 'development' ? path.join(__dirname, '../public/icons/icon.ico') : path.join(__dirname, '../dist/icons/icon.ico'), // 左上角图标
    center: true, // 是否出现在屏幕居中的位置
    useContentSize: true,
    frame:true,//设置为 false 时可以创建一个无边框窗口
    resizable:true,//窗口是否可以改变尺寸
    autoHideMenuBar:true,//是否隐藏菜单栏
    backgroundColor:'#fff',// 窗口的背景颜色为十六进制值
    titleBarStyle:'hidden',//窗口标题栏的样式
    webPreferences:{//网页功能的设置
      // devTools:false//是否开启 DevTools
      // webSecurity: false//是否禁用同源策略
    }
  });
  mainWindow.loadURL(winURL)
  // mainWindow.webContents.openDevTools();//打包后可打开调试窗口
  
  mainWindow.on('closed', () => {
    mainWindow = null
  });
    
  if(process.platform === 'win32'){
      //设置托盘图标和菜单
      var trayMenuTemplate = [
        {
          label: '打开',
          click: () => {
            mainWindow.show();
          }
        },
        {
          label: '退出',
          click: () => {
            app.quit();
            app.quit();//因为程序设定关闭为最小化，所以调用两次关闭，防止最大化时一次不能关闭的情况
          }
        }
      ];
      //系统托盘图标
      appTray = process.env.NODE_ENV === 'development' ? new Tray('public/icons/icon.ico') : new Tray(path.join(__dirname, '../dist/icons/icon.ico'));
      //图标的上下文菜单
      const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
      //设置此托盘图标的悬停提示内容
      appTray.setToolTip('我的托盘图标');
      //设置此图标的上下文菜单
      appTray.setContextMenu(contextMenu);
      //单击右下角小图标显示应用左键
      appTray.on('click',function(){
        mainWindow.show();
      })
      //右键
      appTray.on('right-click', () => {
        appTray.popUpContextMenu(trayMenuTemplate);
      });
  };
};

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {  
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})