electron添加windows托盘图标和菜单

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

const path = require('path');

//托盘对象
var appTray = null;

if (process.env.NODE_ENV !== 'development') {
  global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
}

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,
    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('build/icons/icon.ico'):new Tray(`${__dirname}/static/images/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.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})
以下是React Electron关闭Windows和Mac托盘逻辑代码示例: ```javascript const { app, Tray, Menu, BrowserWindow } = require('electron'); class App extends Component { constructor(props) { super(props); this.state = { tray: null, window: null, }; } componentDidMount() { // 创建系统托盘 const tray = new Tray('/path/to/tray_icon.png'); this.setState({ tray }); // 创建托盘菜单 const contextMenu = Menu.buildFromTemplate([ { label: '显示窗口', click: () => { if (this.state.window) { this.state.window.show(); } else { this.createWindow(); } }, }, { label: '退出', click: () => { app.quit(); }, }, ]); // 设置托盘菜单 tray.setContextMenu(contextMenu); // 创建窗口 this.createWindow(); } createWindow() { // 创建主窗口 const window = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); // 加载应用程序的HTML文件 window.loadURL(`file://${__dirname}/index.html`); // 监听窗口关闭事件 window.on('close', (event) => { event.preventDefault(); window.hide(); }); this.setState({ window }); } componentWillUnmount() { // 从系统托盘中移除 this.state.tray.destroy(); } render() { return <div>{/* 应用程序内容 */}</div>; } } ``` 上述代码中,通过 `Tray` 类创建系统托盘,并使用 `Menu` 类创建托盘菜单。在 `MenuItem` 的 `click` 回调函数中,可以处理窗口显示和退出应用程序的逻辑。 在 `createWindow` 方法中,通过 `BrowserWindow` 类创建主窗口,并通过 `window.on('close', ...)` 监听窗口关闭事件。在关闭事件中,通过 `event.preventDefault()` 阻止窗口的默认行为,并将窗口隐藏。 在组件将要销毁时,通过 `tray.destroy()` 方法从系统托盘中移除托盘图标
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值