基于Electron快速开发MacOS Menubar app

Aldous 发布于2019-08-26 12:10 / 657人阅读

摘要：基于开发主要涉及的技术其实就是的。此外也有人将这个做了简单的封装。这里要用到的是的事件文档在系统中，检测到事件，也就是未聚焦于窗口时，调用把窗口隐藏掉。用于中的，有个经验是将大小设置为。

基于electron开发MacOS Menubar app主要涉及的技术其实就是Electron的 Tray API。

此外也有人将这个API做了简单的封装：menubar(github) 。

其基本原理就是将Electron的窗口挪到menubar对应app按钮的下面，也就是点击menu bar按钮时，在获取按钮的位置，然后在按钮的下方显示窗口。

比如在这里有一个将传统Electron改造为MacOS Menubar application的例子：

// 检测是否MacOS darwin
if (platform === "darwin" || tray) {
    const iconPath = join(__dirname, "static/IconTrayMac.png");
    const trayIcon = new Tray(iconPath);
    trayIcon.setToolTip(`${app.getName()}`);
    // 点击时显示窗口，并修改窗口的显示位置
    trayIcon.on("click", () => {
      const {screen} = electron;
      const {width, height} = screen.getPrimaryDisplay().workAreaSize;
      const [defaultWidth, defaultHeight] = [width, height].map(x => Math.round((x * 3) / 4));
      const WINDOW_WIDTH = defaultWidth - 350;
      const WINDOW_HEIGHT = defaultHeight;
      const HORIZ_PADDING = 15;
      const VERT_PADDING = 15;

      const cursorPosition = screen.getCursorScreenPoint();
      const primarySize = screen.getPrimaryDisplay().workAreaSize;
      const trayPositionVert = cursorPosition.y >= primarySize.height / 2 ? "bottom" : "top";
      const trayPositionHoriz = cursorPosition.x >= primarySize.width / 2 ? "right" : "left";
      win.setPosition(getTrayPosX(), getTrayPosY());
      if (win.isVisible()) {
        win.hide();
      } else {
        win.show();
      }
      // 计算位置
      function getTrayPosX() {
        const horizBounds = {
          left: cursorPosition.x - (WINDOW_WIDTH / 2),
          right: cursorPosition.x + (WINDOW_WIDTH / 2)
        };
        if (trayPositionHoriz === "left") {
          return horizBounds.left <= HORIZ_PADDING ? HORIZ_PADDING : horizBounds.left;
        }
        return horizBounds.right >= primarySize.width ? primarySize.width - HORIZ_PADDING - WINDOW_WIDTH : horizBounds.right - WINDOW_WIDTH;
      }
      function getTrayPosY() {
        return trayPositionVert === "bottom" ? cursorPosition.y - WINDOW_HEIGHT - VERT_PADDING : cursorPosition.y + VERT_PADDING;
      }
    });
    return;
  }

这个时候就有了效果：

接下来还有一个问题，就是怎么实现 点击其他地方时，该窗口自动隐藏 。
这里要用到的是Electron的 Blur 事件(文档)：

aoWindow.on("blur", () => {
    if (platform === "darwin") {
      aoWindow.hide();
    }
  });

在MacOS系统中，检测到Blur事件，也就是未聚焦于窗口时，调用 hide 把窗口隐藏掉。

这样，就实现了一个MacOS的Menubar application!

接下来就用 electron-packager 将该App打包成MacOS的dmg包就行了！

Tips: 使用electron-packager打包过程有个坑，就是使用cnpm安装依赖的话，会导致打包时间极为漫长，用npm重新安装就好了。
Tips: 用于MacOS中Tray的icon，有个经验是将icon大小设置为14X14。

最后给出一个我Fork后修改的Github开源Microsoft To-Do desktop app应用的地址：https://github.com/Anderson-L...
原repo地址：https://github.com/klauscfhq/ao

界面很有设计感，经过改造为Menubar app后效率更是大幅提升！

GPU云服务器云服务器基于安卓app开发基于区块链的app开发基于docker快速部署微服务 Menubar

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108154.html

使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

摘要：是一个使用和等技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制，大项目首选状态管理的最佳实践肯定不是，目前首选，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

Caicloud 2019-08-30 11:01 评论0 收藏0
使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

摘要：是一个使用和等技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制，大项目首选状态管理的最佳实践肯定不是，目前首选，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

Me_Kun 2019-08-23 17:55 评论0 收藏0
使用 Electron 获取应用和用户系统信息

摘要：使用获取应用和用户系统信息此系列文章的应用示例已发布于可以或下载后运行查看欢迎使用几个和模块您可以收集有关用户系统应用程序或屏幕的信息相关文档的链接位于下面的示例中获取应用信息支持进程主进程的模块可用于获取应用程序在用户计算机上的位置使用 Electron 获取应用和用户系统信息此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 ...

xuxueli 2019-08-21 16:58 评论0 收藏0
Electron 快速入门

摘要：当一个实例被销毁后，相应的渲染进程也会被终止。之所以命名为，主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后，会返回处理结果。简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰...

Drummor 2019-08-20 17:49 评论0 收藏0