Electron Windows增加托盘悬浮框功能

更新日期: 2020-01-31阅读: 1.8k标签: Electron分享

复制链接

新浪微博

QQ 好友

扫一扫分享

背景

在做Electron Windows 桌面应用时候，做鼠标悬浮到托盘图标上时显示一个悬浮框（例如做消息提醒），但因为Windows没有提供托盘mouse-enter/mouse-leave事件，无法直接做这个功能，考虑到还有mouse-move事件，弄个间接的方式实现。

实现步骤

1、监听mouse-move事件，当触发时，即也相当触发mouse-enter事件。

2、开始定时（100ms）获取托盘位置和鼠标位置，判断鼠标是否还在托盘图标里，当已不在时，触发mouse-leave事件并停止定时查询。

//判断鼠标是否还在托盘图标
trayBounds = tray.getBounds();
point = screen.getCursorScreenPoint();
if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y  + trayBounds.height))){
//已不在托盘，触发mouse-leave                    
}

3、当mouse-enter时，显示悬浮窗口到托盘上方，当mouse-enter，隐藏悬浮窗口。

PS：悬浮窗口需要设置置顶属性，且不显示在任务栏。

具体代码

var leaveInter,
    trayBounds,
    point,
    isLeave = true;

function checkTrayLeave(){
    clearInterval(leaveInter)
    leaveInter = setInterval(function(){
        trayBounds = tray.getBounds();
        point = screen.getCursorScreenPoint();
        if(!(trayBounds.x < point.x && trayBounds.y < point.y && point.x < (trayBounds.x + trayBounds.width) && point.y < (trayBounds.y  + trayBounds.height))){
            //触发mouse-leave
            clearInterval(leaveInter);
            isLeave = true;
        }
    }, 100)
}

tray.on('mouse-move', () => {
    if (isLeave) {
        //触发mouse-enter
        isLeave = false;
        checkTrayLeave();
    }
})

链接: https://www.fly63.com/article/detial/8814

Electron Windows增加托盘悬浮框功能

使用 Electron 打包 Vue 项目

electron阻止应用关闭

如何在Electron中调用Dll

electron_pcMain模块、ipcRenderer模块

electron将web应用构建跨平台桌面应用

Electron怎么启动并行的子任务

Electron应用打包、自动升级

基于Electron开发Hosts切换工具的“踩坑”之旅