Electron托盘图标

发表于 | 分类于
Electron托盘图标

Electron托盘图标

添加引用

1
2
const {app, Menu, Tray} = require("electron");
const path = require("path");

设置托盘图标及菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let tray = null

tray = new Tray(path.join(__dirname, 'app.ico'));
const contextMenu = Menu.buildFromTemplate([
    {
        label: '退出', click: () => {
            app.quit();
        }
    },
])
tray.setToolTip('直播')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
    //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能

})

不显示任务栏图标

1
win.setSkipTaskbar(true)

但是这样配置会导致任务栏会遮挡窗口，就算设置窗口置顶也没用，暂时没找到解决方法。

所以我这里用的是下面的方式，这样就算点击任务栏也不会隐藏窗口。

点击任务栏不隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let homeWin = new BrowserWindow({
    width: 1280,
    height: 768,
    fullscreen: true,
    simpleFullscreen: true,
    minimizable: false,
    frame: false,
    resizable: false,
    transparent: true,
    webPreferences: {
        nodeIntegration: true,
        enableRemoteModule: true,
        webSecurity: false,
        contextIsolation: false,
    },
});
homeWin.setFullScreen(true);
homeWin.setAlwaysOnTop(true, "pop-up-menu");

只设置simpleFullscreen: true,和homeWin.setAlwaysOnTop(true, "pop-up-menu");的话,虽然窗口全屏了，但是一点击任务栏上的图标，界面就隐藏了，所以一定要添加上

1
homeWin.setFullScreen(true);

可能你会说直接隐藏任务栏图标不就行了

1
homeWin.setSkipTaskbar(true)

但是这样配置会导致任务栏会遮挡窗口，就算设置窗口置顶也没用，暂时没找到解决方法。