electron设置右下角图标和菜单功能

如白驹过隙

已于 2024-03-24 21:33:20 修改

阅读量196

点赞数 2

分类专栏： electron 文章标签： electron javascript 前端

于 2024-03-21 21:21:13 首次发布

本文链接：https://blog.csdn.net/weixin_49722066/article/details/136921146

版权

electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

import { app, BrowserWindow, Tray, Menu } from 'electron'   //需要引入相应模块
const path = require('path') // 引入path模块
 
   function createWindow() {
    win = new BrowserWindow({
    width: 1366,
    height: 768,
    autoHideMenuBar: true,  // 自动隐藏菜单栏, 除非按了Alt键
    // skipTaskbar: true    // 不显示在任务栏
    webPreferences: {
      nodeIntegration: true
    }
  })
      
      //获取图标路径，根目录下的favicon.ico文件，不同的环境路径不同
      let trayIcon
      if (process.env.NODE_ENV === 'development') {   //开发环境
        trayIcon = path.join(__dirname, '../favicon.ico')
      }else{
        trayIcon = path.join(__dirname, './favicon.ico')
      }
    
     //在主对象中新建，初始化程序需要开启
     //新建图标对象
     const tray = new Tray(trayIcon);
     
     //新建菜单内容
        const trayContextMenu = Menu.buildFromTemplate([
            {
                label: '打开',
                icon:  "trayMenu/exit.png",  //图标
                click: () => {
                    //显示的方法
                }
            }, {
                label: '退出',
                icon:  "trayMenu/exit.png",   //图标
                click: () => {
                   //退出的方法
                }
            }
        ]);
        
        //鼠标移入显示内容
        tray.setToolTip('鼠标移入时显示的文字');
         
         //单击左键触发
        tray.on('click', () => {
            //显示窗口的方法
        });
        
        //单机右键触发
        tray.on('right-click', () => {
            //显示菜单列表
            tray.popUpContextMenu(trayContextMenu);
        });
}