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

14-设置系统托盘

699
0
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-实现桌宠模组切换

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

0-桌宠开发前言

1-搭建环境和创建简单的应用程序

2-修改项目结构

3-创建一个透明的窗口

4-nodemon实现热加载

5-获取桌宠每一帧图片

6-Pixi.js加载桌宠初始动画

7-添加鼠标事件

8-获取区域颜色和判断桌宠本体

9-设置进程通信和鼠标穿透

10-实现桌宠拖拽

11-实现桌宠随机动作

12-实现桌宠播放语音

13-实现桌宠词板功能

14-设置系统托盘

15-实现桌宠模组切换

16-桌宠数据和状态拓展

17-生成ICO图标和准备打包

18-完成开发并打包桌宠应用

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点