基于Electron开发MacOSMenubarapp涉及的主要技术其实就是Electron的TrayAPI。另外，有人对这个API做了一个简单的封装：menubar（github）。基本原理是将Electron的窗口移动到菜单栏对应的app按钮的底部，即点击菜单栏按钮时，获取按钮的位置，然后将窗口显示在菜单栏下按钮。例如，下面是一个将传统的Electron转换为MacOS菜单栏应用程序的示例：//DetectwhetherMacOSdarwinif(platform==='darwin'||tray){consticonPath=join(__dirname,'static/IconTrayMac.png');consttrayIcon=newTray(iconPath);trayIcon.setToolTip(`${app.getName()}`);//点击时显示窗口，并修改窗口的显示位置;const[defaultWidth,defaultHeight]=[width,height].map(x=>Math.round((x*3)/4));constWINDOW_WIDTH=defaultWidth-350;constWINDOW_HEIGHT=defaultHeight;constHORIZ_PADDING=15;constVERT_PADDING=15；constcursorPosition=screen.getCursorScreenPoint()；constprimarySize=screen.getPrimaryDisplay().workAreaSize；consttrayPositionVert=cursorPosition.y>=primarySize.height/2?'bottom':'top';consttrayPositionHoriz=cursorPosition.x>=primarySize.width/2?'右左';win.setPosition(getTrayPosX(),getTrayPosY());如果(win.isVisible()){win.hide();}else{win.show();}//计算位置functiongetTrayPosX(){consthorizBounds={left:cursorPosition.x-(WINDOW_WIDTH/2),right:cursorPosition.x+(WINDOW_WIDTH/2)};if(trayPositionHoriz==='left'){returnhorizBounds.left<=HORIZ_PADDING?HORIZ_PADDING:horizBounds.left;}返回horizBounds.right>=primarySize.width？primarySize.width-HORIZ_PADDING-WINDOW_WIDTH:horizBounds.right-WINDOW_WIDTH;}functiongetTrayPosY(){returntrayPositionVert==='bottom'?cursorPosition.y-WINDOW_HEIGHT-VERT_PADDING:cursorPosition.y+VERT_PADDING;}});返回;}这下就可以了：接下来的问题就是如何实现点击其他地方时窗口自动隐藏这里使用Electron的Blur事件（文档）：aoWindow.on('blur',()=>{if(platform==='darwin'){aoWindow.hide();}});在MacOS系统中，当检测到Blur事件，即窗口未获得焦点时，会调用hide来隐藏窗口。这样一个MacOSMenubar应用就实现了！接下来使用electron-packager将App打包成MacOSdmg包！Tips：使用electron-packager打包过程有个坑，就是如果使用cnpm安装依赖，打包时间会特别长，用npm重新安装即可。Tips：对于MacOS中Tray的图标，一种经验是将图标大小设置为14X14。最后给出我Fork后修改的Github开源微软待办桌面应用程序地址：https://github.com/Anderson-L...原repo地址：https://github.com/klauscfhq/ao界面很有设计感，改造成Menubarapp后效率大大提升！
