Electron - Menu 菜单

迷南。 2022-10-23 11:21 234阅读 0赞

### 文章目录 ###

*   *  Menu 菜单
     *   *  Menu 静态方法
         *  menu 实例方法
         *  事件
     *  MenuItem 菜单项
     *   *  MenuItem 静态方法
         *  属性值

## 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