14-设置系统托盘

芋圆社区 > 编程 > 【项目】桌宠之旅 > 14-设置系统托盘

717

2023-07-08

2023-07-18

Hey、小怪兽

• 在主进程/src/_main/main.js，先导入：Menu，Tray，nativeImage

const { app, screen, ipcMain, Menu, Tray, BrowserWindow, nativeImage } = require("electron");

• 还需要准备一张小一点的图片，我准备的是16x16的：
• 创建一个系统托盘的方法createTray：
- 先创建图标的路径nativeImage.createFromPath，后面是node的方法
- new一个系统托盘new Tray(icon)
- 接着就是系统托盘的菜单配置了
- label就是文本，type是普通类型，有很多类型可以去Electron官网看，enabled是不能被点击，icon就是前面的小图标
- 下面跟着分割线separator
- 然后是一些可以点击的，比如重新加载，click就是点击的方法，点击后窗口reload，这个窗口就是桌宠的窗口
- 退出点击后就是销毁系统托盘和退出应用程序
- 最后设置鼠标悬停系统托盘会显示的文本"TaroPet v1.0"，最后将这个配置给系统托盘

// 系统托盘方法
const createTray = () => {
    const icon = nativeImage.createFromPath(path.resolve(__dirname, "../public/icon/icon@16.png"));
    tray = new Tray(icon);
    const contextMenu = Menu.buildFromTemplate([
        { label: "TaroPet v1.0", type: "normal", enabled: false, icon: icon },
        { type: "separator" },
        {
            label: "重新加载",
            type: "normal",
            click: () => {
                mainWindow.reload();
            },
        },
        {
            label: "退出",
            type: "normal",
            click: () => {
                tray.destroy(); // 销毁托盘
                app.quit(); // 退出应用程序
            },
        },
    ]);

    tray.setToolTip("TaroPet v1.0");
    tray.setContextMenu(contextMenu);
}

• 在whenReady里加入createTray方法：

app.whenReady().then(() => {
    createMainWindow();
    createTray();
});

• 在终端pnpm start后就可以看到系统托盘了，右键可以看到重新加载和退出！
• 主进程/src/_main/main.js完整代码：

const { app, screen, ipcMain, Menu, Tray, BrowserWindow, nativeImage } = require("electron");
const path = require("path");
// 主窗口
let mainWindow = null;
// 拖拽的初始位置
let drapPosition = { x: 0, y: 0 };
// 拖拽定时器
let drapTimer = null;

const createMainWindow = () => {
    // 获取当前桌面的宽度和高度
    const size = screen.getPrimaryDisplay().workAreaSize;
    const { width, height } = size;

    mainWindow = new BrowserWindow({
        width: 390,
        height: 390,
        // 起始位置是屏幕宽度减去窗口宽度，再减去10个像素
        x: width - 390 - 10,
        y: height - 390 - 10,
        // 隐藏菜单栏
        autoHideMenuBar: true,
        // 设置为透明窗口
        transparent: true,
        // 隐藏窗口边框
        frame: false,
        // 窗口置顶
        alwaysOnTop: true,
        // 隐藏任务栏图标
        skipTaskbar: true,
        // 禁止改变窗口大小
        resizable: false,
        // 先隐藏窗口
        show: false,
        // Preload 脚本
        webPreferences: {
            preload: path.resolve(__dirname, "../_preload/preload.js"),
        },
    });

    // 允许鼠标穿透
    mainWindow.setIgnoreMouseEvents(true, { forward: true });

    // 开启调试工具
    mainWindow.webContents.openDevTools();

    mainWindow.loadFile(path.resolve(__dirname, "../index.html"));

    mainWindow.on("ready-to-show", () => {
        mainWindow.show();
    });
};

// 系统托盘方法
const createTray = () => {
    const icon = nativeImage.createFromPath(path.resolve(__dirname, "../public/icon/icon@16.png"));
    tray = new Tray(icon);
    const contextMenu = Menu.buildFromTemplate([
        { label: "TaroPet v1.0", type: "normal", enabled: false, icon: icon },
        { type: "separator" },
        {
            label: "重新加载",
            type: "normal",
            click: () => {
                mainWindow.reload();
            },
        },
        {
            label: "退出",
            type: "normal",
            click: () => {
                tray.destroy(); // 销毁托盘
                app.quit(); // 退出应用程序
            },
        },
    ]);

    tray.setToolTip("TaroPet v1.0");
    tray.setContextMenu(contextMenu);
}

app.whenReady().then(() => {
    createMainWindow();
    createTray();
});

// 鼠标移动监听，用于判断是否需要穿透
ipcMain.on("mouse-move", (event, obj) => {
    if (obj.ignore) {
        mainWindow.setIgnoreMouseEvents(true, { forward: true });
    } else {
        mainWindow.setIgnoreMouseEvents(false);
    }
});

// 桌宠拖动开始，记录点击位置，让窗口粘着鼠标
ipcMain.on("mouse-drap-start", (event, obj) => {
    drapPosition = {
        x: obj.x,
        y: obj.y,
    };
    drapTimer = setInterval(() => {
        const { x, y } = screen.getCursorScreenPoint();
        mainWindow.setPosition(x - drapPosition.x, y - drapPosition.y);
    }, 10);
});

// 桌宠拖动结束，也就是再按一下右键，定时器清空
ipcMain.on("mouse-drap-end", (event, obj) => {
    clearInterval(drapTimer);
});

上一篇：13-实现桌宠词板功能

下一篇：15-实现桌宠模组切换

14-设置系统托盘

回复