ElectronによるMacOS Menubarアプリの開発
2933 ワード
electronに基づいてMacOS Menubar apを開発する主な技術は、ElectronのTray APIです.
また、このAPIを簡単にパッケージ化した人もいます.
基本的な原理は、Electronのウィンドウをmenuar対応アプリボタンの下、つまりmenu barボタンをクリックすると、ボタンの位置を取得し、ボタンの下にウィンドウが表示されます.
例えばここでは、伝統的なElectronをMacOS Menubar apprationに変換する例があります.
次にもう一つの問題があります.どのように他の場所をクリックしたら、このウィンドウは自動的に隠しますか?ここで使うのはElectronのBlurイベントです.
これで、MacOSのMenubarアプリが実現しました.
次に
最後に私のForkを修正したGithubオープンソースMicrosoft To-Do desktopアプリのアドレスを与えます.https://github.com/Anderson-L...元のレポートアドレス:https://github.com/klauscfhq/ao
インタフェースはとてもデザイン感があります.Menubar apに改造したら、効率が大幅に上がります.
また、このAPIを簡単にパッケージ化した人もいます.
基本的な原理は、Electronのウィンドウをmenuar対応アプリボタンの下、つまりmenu barボタンをクリックすると、ボタンの位置を取得し、ボタンの下にウィンドウが表示されます.
例えばここでは、伝統的なElectronをMacOS Menubar apprationに変換する例があります.
// 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アプリが実現しました.
次に
electron-packager
を使って、このアプリをMacOSのdmgバッグに包んでください.Tips:
を使ってelectron-packager
を包装する過程に穴があります.cnpmを使ってインストールに依存すると、包装時間がとても長くなります.npmで再インストールすればいいです.Tips:
は、MacOSのTrayのiconに使用され、iconサイズを14 X 14に設定した経験があります.最後に私のForkを修正したGithubオープンソースMicrosoft To-Do desktopアプリのアドレスを与えます.https://github.com/Anderson-L...元のレポートアドレス:https://github.com/klauscfhq/ao
インタフェースはとてもデザイン感があります.Menubar apに改造したら、効率が大幅に上がります.