Electron - Menu 菜单

Menu 菜单

引入 Menu 模块

const { Menu } = require('electron')

Menu 静态方法

静态方法就是一些 Menu 提供的内置方法

• 设置菜单
• 参数：menu 实例、null
• 返回：void

// 方法接受 menu 对象，展示 menu 实例内容；传入 null，将会禁用默认菜单功能(win\linux)；如果不传值，展示默认菜单
Menu.setApplicationMenu(menu | null)

• 获得菜单
• 参数：null
• 返回：menu 实例、null

// 如果设置了菜单则得到一个 menu 实例，如果没有设置菜单，返回一个 null
// 默认获取的是系统级菜单
Menu.getApplicationMenu()

• 格式化构建一个 menu 实例
• 参数：template 对象，一个数组，用于构建 menu 实例
• 返回：menu 实例

// 如果设置了菜单则得到一个 menu 实例，如果没有设置菜单，返回一个 null
Menu.buildFromTemplate(template)

// template 示例
let template = [{
    label: `Version ${version}`,
    enabled: false
  }, {
    label: 'Checking for Update',
    enabled: false,
    key: 'checkingForUpdate'
  }, {
    label: 'Check for Update',
    visible: false,
    key: 'checkForUpdate',
    click: () => {
      require('electron').autoUpdater.checkForUpdates()
    }
  }, {
    label: 'Restart and Install Update',
    enabled: true,
    visible: false,
    key: 'restartToUpdate',
    click: () => {
      require('electron').autoUpdater.quitAndInstall()
    }
  }]

• 发送一个相应事件（macOS）
• 参数：action 是 String 类型
• 返回：null

// 将 action 发送到应用程序的第一个响应方。 这用于模拟默认的 macOS 菜单行为。 通常你可以使用MenuItem的role属性
Menu.sendActionToFirstResponder(action)

menu 实例方法

menu 实例中内置的方法

• 得到一个实例

// 1
const menu = new Menu()
// 2
const menu = Menu.buildFromTemplate(template)
// 3 实例可以被修改属性，但是不支持增删
const menu = Menu.getApplicationMenu()

• 弹出菜单
• 参数：window 窗口实例、x、y 显示位置、positioningItem 菜单项的位置、callback 回调方法
• 返回：null

menu.pupop(window | x | y | positioningItem(macOS) | callback)

• 关闭菜单
• 参数：window 可选项，默认当前窗口
• 返回：null

menu.closePopup(window)

• 追加菜单
• 参数：MenuItem 实例
• 返回：null

// 在 menu 实例被展示前可以进行修改，通过 Menu 静态方法获取的实例对象无法增删
menu.append(MenuItem)

• 获取指定的菜单
• 参数：id 设置菜单时指定的唯一属性值，如果没有设置，系统会按照默认的顺序进行标号 commandId
• 返回：menu 实例

menu.getMenuItemById(id)

• 插入菜单
• 参数：position 位置信息，integer 类型，0 为开始；MenuItem 菜单实例
• 返回：null

// 菜单展示前操作，可自定义插入位置，如果不指定 position ，默认 append 方法
menu.insert(position, MenuItem)

• 属性值
• 获取 menu 的菜单内容

menu.items

事件

• 展示事件

app.on('menu-will-show', (event) => {
  // do something
  // menu.popup() emit
})

• 关闭事件

app.on('menu-will-close', (event) => {
  // do something
  // menu.closePopup() emit
})

MenuItem 菜单项

引入 MenuItem 模块

const { menuItem } = require('electron') 

MenuItem 静态方法

• 创建一个 MenuItem 实例

let menuitem = new MenuItem({
  id: '', // 唯一属性值，可以不设，
  label: 'test', // 菜单的展示名称
  sublabel: '', // 菜单名称下的弱文字
  accelerator: 'CmdOrCtrl+Z', // 加速器，用于设定快捷键
  icon: '', // 菜单图标，接受 NativeImage 对象或者 relative path
  enabled: '', // 是否可用
  visible: '', // 是否可见
  submenu: '', // 子菜单属性，只有 type 为 submenu 时使用，接受 Menu 对象，如果不是 Menu 对象，自动 Menu.buildFromTemplate() 转
  checked: '', // 选择属性，只为 type 为 checkbox 和 radio 时可用
  type: '', // 菜单类型，normal、separator、submenu、checkbox 或 radio
  role: '', // 角色，为这个菜单定义一个预设行为。使用 role 时, label 和 accelerator 值是可选的, 并为每个平台，将默认为适当值
  after: [''], // 定位操作，指定目标之后
  before: [''], // 定位操作，指定目标之前
  afterGroupContaining: [''], // 定位操作，指定目标小组之后
  beforeGroupContaining: [''], // 定位操作，指定目标小组之前
  // macOS
  toolTip: '', // 该菜单项的悬停文本
  acceleratorWorksWhenHidden: '', // 如果菜单被禁用，快捷键是否可以用。默认是 true
  // win linux
  registerAccelerator:'', // 是否注册快捷键，默认 true，如果 false，不会进行注册也不会显示
  click: (menuitem, browserWindow, event) => {
    // do something
    // menuitem 是当前菜单项
    // browserWindow 是当前焦点窗口
    // event 事件 { shiftKey: false, ctrlKey: false, altKey: false, metaKey: false }
  }
});

Tips:

对定位操作的一些补充：

// 菜单位置
// 一般情况是，菜单的顺序都是自己定好的；但是如果需要通过某些条件来限定菜单的加载顺序，那就需要对菜单的位置选项进行了解
// before, after, beforeGroupContaining, afterGroupContaining 和 id
// 顺序执行，如果已经存在id属性，会按照id属性排序，如果id属性不存在，则按照原始位置顺序排序

let template = [
  { id: '1', label: 'one', after: ['1'] },
  { type: 'separator' },
  { id: '3', label: 'three', beforeGroupContaining: ['1'] },
  { id: '4', label: 'four', afterGroupContaining: ['2'] },
  { type: 'separator' },
  { id: '2', label: 'two', before: ['3'] }
];

属性值

实例属性值，基本上所有能够设置的属性都是可以通过对应的名称获取到的，below 我们将会补充一些其他的内容

• 菜单标识位

// 菜单项对应的顺序 id
menuitem.commandId

• 菜单的一部分

// 一部分菜单
menuitem.menu