基于Electron快速開發MacOS Menubar app

Aldous 發布于2019-08-26 12:10 / 702人閱讀

摘要：基于開發主要涉及的技術其實就是的。此外也有人將這個做了簡單的封裝。這里要用到的是的事件文檔在系統中，檢測到事件，也就是未聚焦于窗口時，調用把窗口隱藏掉。用于中的，有個經驗是將大小設置為。

基于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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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