用于切换菜单栏 show/hide 的电子全局快捷方式

Question

我正在尝试向我的 Electron 应用程序添加一个全局快捷方式来切换 showing/hiding 它。我的应用是使用 maxogden/menubar 和 React.

构建的菜单栏应用

我有以下代码。为了简洁起见，我省略了一些内容，但这就是我设置全局快捷方式的方式。

我认为注意 maxogden/menubar Readme 上的提示之一也很重要：

Use mb.on('after-create-window', callback) to run things after your app has loaded

const { globalShortcut } = require('electron');
const keyboardShortcuts = {
  open: 'CommandOrControl+Shift+g',
  close: 'CommandOrControl+Shift+g'
}

menu.on('after-create-window', () => {
  globalShortcut.register(keyboardShortcuts.open, () => {
    menu.window.show();
  });
});

menu.on('after-show', () => {
  globalShortcut.unregister(keyboardShortcuts.open);
  globalShortcut.register(keyboardShortcuts.close, () => {
    menu.window.hide();
  });
});

menu.on('focus-lost', () => {
  globalShortcut.unregister(keyboardShortcuts.close);
  globalShortcut.register(keyboardShortcuts.open, () => {
    menu.window.show();
  });
});

菜单栏首次打开后，我的快捷方式即已注册并可用于显示该应用程序。但是，我为 unregister 快捷方式实施的代码，并重新注册它以隐藏应用程序（显示时），似乎不起作用。

我不确定我的重新注册快捷方式的代码是否设置在正确的事件处理程序中，即 after-show 和 focus-lost。我有一种感觉，我正在使用的这些事件处理程序与我的 menu 而不是 menu.window 直接相关。这可以解释为什么没有重新注册快捷方式，但我不确定。

有谁知道我如何明智地设置全局快捷方式切换到 open/close 我的菜单栏应用程序？

Answer 1

在菜单栏文档 (https://github.com/maxogden/menubar) 中，菜单栏实例公开了以下方法：

{
  app: the electron require('app') instance,
  window: the electron require('browser-window') instance,
  tray: the electron require('tray') instance,
  positioner: the electron-positioner instance,
  setOption(option, value): change an option after menubar is created,
  getOption(option): get an menubar option,
  showWindow(): show the menubar window,
  hideWindow(): hide the menubar window
}

使用 menu.showWindow() 和 menu.hideWindow() 代替 menu.window.show() 和 menu.window.hide() 会起作用。

我进一步建议您使用内置事件来管理您的状态，从而简化您的代码和实现：

const { globalShortcut } = require('electron');

let isShown = false;
menu
  .on('after-show', () => { isShown = true })
  .on('after-hide', () => { isShown = false })
  .on('focus-lost', () => { isShown = false });

globalShortcut.register('CommandOrControl+Shift+g', () => {
  isShown ? menu.hideWindow() : menu.showWindow()
});

用于切换菜单栏 show/hide 的电子全局快捷方式

Electron global shortcut to toggle show/hide of menubar

javascript

keyboard-shortcuts

menubar

reactjs

electron