Electron Windows增加托盤懸浮框功能

背景

在做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：懸浮窗口需要設置置頂屬性，且不顯示在任務欄。

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

具體代碼

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(); } })