Electron   发布时间:2019-10-11  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了electron实现最小化到托盘大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

当我们在无边框下使用关闭按钮时,我们可能并不是想关闭应用,而只想他最小化在托盘中,随时等待唤醒,还好,electron依旧给我们提供了这个功能。

一、主进程

主进程中监听窗口关闭事件,在这,我们需要使用到electron的menu模块来创建菜单以及tray托盘模块。

const electron = require('electron');
const Menu = electron.Menu;
const Tray = electron.Tray;

当托盘最小化后,右击时是有个菜单显示的,此处仅创建一个含有退出的菜单,

let traymenuTemplate = [{//系统托盘图标目录
    label:'退出',
    click: function () {
        app.quit();
    }
}];

下面我们创建托盘实例,并且给实例增加上一些属性和菜单,

leticonPath=path.join(__dirname, 'app.png');
appTray = new Tray(iconPath);
const contextMenu = Menu.buildFromTemplate(traymenuTemplatE);
// 设置托盘悬浮提示
appTray.setToolTip('never forget');
// 设置托盘菜单
appTray.setContextMenu(contextMenu);

当我们左键托盘时,是需要显示应用的,所以再增加个点击事件就完工啦。

appTray.on('click', function(){
    // 显示主程序
    mainWindow.show();
    // 关闭托盘显示
    appTray.destroy();
});

附上托盘的整个代码。

const electron = require('electron');
let appTray = null;   // 引用放外部,防止被当垃圾回收

// 隐藏主窗口,并创建托盘,绑定关闭事件
function setTray () {
    // 用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区
    //  ,通常被添加到一个 context menu 上.
    const Menu = electron.Menu;
    const Tray = electron.Tray;
    // 系统托盘右键菜单
    let traymenuTemplate = [{     // 系统托盘图标目录
        label: '退出',
        click: function () {
            app.quit();
        }
    }];
    // 当前目录下的app.ico图标
    let iconPath = path.join(__dirname, 'app.png');
    appTray = newTray(iconPath);
    // 图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(traymenuTemplatE);
    // 隐藏主窗口
    mainWindow.hide();
    // 设置托盘悬浮提示
    appTray.setToolTip('never forget');
    // 设置托盘菜单
    appTray.setContextMenu(contextMenu);
    // 单击托盘小图标显示应用
    appTray.on('click', function(){
        // 显示主程序
        mainWindow.show();
        // 关闭托盘显示
        appTray.destroy();
    });
};


大佬总结

以上是大佬教程为你收集整理的electron实现最小化到托盘全部内容,希望文章能够帮你解决electron实现最小化到托盘所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。