electron 创建无边框透明窗口隐藏托盘

在需要做一些桌面特效:如雪花飘落效果的时候,需要窗体保持透明且在所有窗口顶层

窗体基本代码如下

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

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    fullscreen: true,
    transparent: true, // 窗口透明
    frame: false, // 无边框
  });

  win.setIgnoreMouseEvents(true); // 鼠标穿透
  win.setAlwaysOnTop(true); // 保持置顶

  win.setSkipTaskbar(true); // 无任务栏图标

  win.loadFile("./app.html"); // 这里替换成有特效网页

  //创建系统通知区菜单(右下角托盘)
  tray = new Tray(path.join(__dirname, "1.jpg"));
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        win.destroy();
      },
    }, //我们需要在这里有一个真正的退出(这里直接强制退出)
  ]);
  tray.setToolTip("透明窗口托盘测试");
  tray.setContextMenu(contextMenu);
}

app.whenReady().then(createWindow);

然后win.loadFile("./app.html")替换成有特效的网页就OK了

阅读 154

推荐阅读