Electron实战之基坑

最新推荐文章于 2025-06-18 18:12:52 发布

原创最新推荐文章于 2025-06-18 18:12:52 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#electron-vue #NSIS #任务栏图标 #系统托盘 #桌面端

ELECTRON 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用Electron框架进行桌面应用开发的过程，包括任务栏图标配置、系统托盘图标及其菜单设置、预览窗口的图标和标题调整，以及应用的打包流程。通过实例展示了如何创建和管理应用图标，设置托盘菜单，并分享了打包工具的使用经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、任务栏图标（可配置 | | 可设置）

    //系统托盘图标目录
    const iconPath = path.join(__dirname, '../../static/imgs/logo.ico')
    const emptyPath = path.join(__dirname, '../../static/imgs/empty.ico')
    const trayUrl = nativeImage.createFromPath(iconPath);
    const emptyUrl = nativeImage.createFromPath(emptyPath);

    //（配置）
    let mainWindow = new BrowserWindow({
        height: 600,
        width: 1000,
        minHeight: 600,
        minWidth: 800,
        useContentSize: true,
        frame: false,
        backgroundColor: '#eeeeee',
        icon: trayUrl,
        title: '金淘返利客服机器人'
    });

    //（设置）
    mainWindow.setIcon(trayUrl);

2、系统托盘图标及菜单
系统托盘，即在电脑屏幕右下角的程序图标。

    //系统托盘右键菜单
    let trayMenuTemplate = [
        {
            label: '退出4',
            click: function () {
                mainWindow.destroy()
            }
        }
    ];

    let tray = new Tray(trayUrl);
    
    //设置鼠标hover时显示的标题
    tray.setToolTip('金淘返利客服机器人')

    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
    // 设置此图标的上下文菜单
    tray.setContextMenu(contextMenu)
    // 单击此图标显示窗口
    tray.on('click', () => {
        //清除消息提醒
        clearInterval(timer)
        count = 0;
        tray.setImage(trayUrl)
        mainWindow.flashFrame(false)

        if (!mainWindow.isVisible()) {
            mainWindow.show();
            mainWindow.setSkipTaskbar(false);
            tray.setHighlightMode('never');
        } else if (mainWindow.isMinimized() || !mainWindow.isFocused()) {
            mainWindow.restore()
            mainWindow.focus()
        }
    })

3、任务栏预览窗口的图标和标题

这个困扰了我很久，new BrowserWindow时配置title属性和用mainWindow.setTitle("自定义预览窗口标题")均不起作用。
原因可能是因为我把原生的应用菜单给隐藏掉了，用的是我自定义的顶部菜单：

后来发现，原来预览窗口的图标和标题其实就是当前网页的图标和标题，所以只需设置下document.title为自定义标题即可。至于图标怎么设置，我还没弄好，不知道这个打包工具是怎么给我加上去的，导致路径不对，一直显示不出来。

4、记录一下打包的流程吧，别忘了~~

流程：
1、npm run build
2、然后用NSIS打包，选取这个目录下的.exe文件和当前目录，然后走下去就可以了。
具体NSIS的安装与用法，可以仔细看下下面这个教程。
(附：win7下nsis打包exe安装程序教程：https://blog.youkuaiyun.com/arvin0/article/details/56482370)