閱讀(33.9k) 書簽贊(0) 我要糾錯

Electron menu 模塊

2019-08-14 19:21 更新

menu 類可以用來創(chuàng)建原生菜單，它可用作應(yīng)用菜單和 context 菜單.

這個(gè)模塊是一個(gè)主進(jìn)程的模塊，并且可以通過 remote 模塊給渲染進(jìn)程調(diào)用.

每個(gè)菜單有一個(gè)或幾個(gè)菜單項(xiàng) menu items，并且每個(gè)菜單項(xiàng)可以有子菜單.

下面這個(gè)例子是在網(wǎng)頁(渲染進(jìn)程)中通過 remote 模塊動態(tài)創(chuàng)建的菜單，并且右鍵顯示:

<!-- index.html -->
<script>
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

window.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);
</script>

例子，在渲染進(jìn)程中使用模板api創(chuàng)建應(yīng)用菜單:

var template = [
  {
    label: 'Edit',
    submenu: [
      {
        label: 'Undo',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: 'Redo',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: 'Cut',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: 'Copy',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: 'Paste',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: 'Select All',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      },
    ]
  },
  {
    label: 'View',
    submenu: [
      {
        label: 'Reload',
        accelerator: 'CmdOrCtrl+R',
        click: function(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.reload();
        }
      },
      {
        label: 'Toggle Full Screen',
        accelerator: (function() {
          if (process.platform == 'darwin')
            return 'Ctrl+Command+F';
          else
            return 'F11';
        })(),
        click: function(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
        }
      },
      {
        label: 'Toggle Developer Tools',
        accelerator: (function() {
          if (process.platform == 'darwin')
            return 'Alt+Command+I';
          else
            return 'Ctrl+Shift+I';
        })(),
        click: function(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.toggleDevTools();
        }
      },
    ]
  },
  {
    label: 'Window',
    role: 'window',
    submenu: [
      {
        label: 'Minimize',
        accelerator: 'CmdOrCtrl+M',
        role: 'minimize'
      },
      {
        label: 'Close',
        accelerator: 'CmdOrCtrl+W',
        role: 'close'
      },
    ]
  },
  {
    label: 'Help',
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: function() { require('electron').shell.openExternal('http://electron.atom.io') }
      },
    ]
  },
];

if (process.platform == 'darwin') {
  var name = require('electron').remote.app.getName();
  template.unshift({
    label: name,
    submenu: [
      {
        label: 'About ' + name,
        role: 'about'
      },
      {
        type: 'separator'
      },
      {
        label: 'Services',
        role: 'services',
        submenu: []
      },
      {
        type: 'separator'
      },
      {
        label: 'Hide ' + name,
        accelerator: 'Command+H',
        role: 'hide'
      },
      {
        label: 'Hide Others',
        accelerator: 'Command+Alt+H',
        role: 'hideothers'
      },
      {
        label: 'Show All',
        role: 'unhide'
      },
      {
        type: 'separator'
      },
      {
        label: 'Quit',
        accelerator: 'Command+Q',
        click: function() { app.quit(); }
      },
    ]
  });
  // Window menu.
  template[3].submenu.push(
    {
      type: 'separator'
    },
    {
      label: 'Bring All to Front',
      role: 'front'
    }
  );
}

var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

`new Menu()`

創(chuàng)建一個(gè)新的菜單.

方法

菜單 類有如下方法:

`Menu.setApplicationMenu(menu)`

menu Menu

在 OS X 上設(shè)置應(yīng)用菜單 menu . 在windows 和 linux，是為每個(gè)窗口都在其頂部設(shè)置菜單 menu.

`Menu.sendActionToFirstResponder(action)` OS X

action String

發(fā)送 action 給應(yīng)用的第一個(gè)響應(yīng)器.這個(gè)用來模仿 Cocoa 菜單的默認(rèn)行為，通常你只需要使用 MenuItem的屬性 role.

查看更多 OS X 的原生 action OS X Cocoa Event Handling Guide .

`Menu.buildFromTemplate(template)`

template Array

一般來說，template 只是用來創(chuàng)建 MenuItem 的數(shù)組 參數(shù) .

你也可以向 template 元素添加其它東西，并且他們會變成已經(jīng)有的菜單項(xiàng)的屬性.

實(shí)例方法

menu 對象有如下實(shí)例方法

`menu.popup([browserWindow, x, y, positioningItem])`

browserWindow BrowserWindow (可選) - 默認(rèn)為 null.
x Number (可選) - 默認(rèn)為 -1.
y Number (必須如果x設(shè)置了) - 默認(rèn)為 -1.
positioningItem Number (可選) OS X - 在指定坐標(biāo)鼠標(biāo)位置下面的菜單項(xiàng)的索引. 默認(rèn)為 -1.

在 browserWindow 中彈出 context menu .你可以選擇性地提供指定的 x, y 來設(shè)置菜單應(yīng)該放在哪里,否則它將默認(rèn)地放在當(dāng)前鼠標(biāo)的位置.

`menu.append(menuItem)`

menuItem MenuItem

添加菜單項(xiàng).

`menu.insert(pos, menuItem)`

pos Integer
menuItem MenuItem

在制定位置添加菜單項(xiàng).

`menu.items()`

獲取一個(gè)菜單項(xiàng)數(shù)組.

OS X Application 上的菜單的注意事項(xiàng)

相對于windows 和 linux, OS X 上的應(yīng)用菜單是完全不同的style，這里是一些注意事項(xiàng)，來讓你的菜單項(xiàng)更原生化.

標(biāo)準(zhǔn)菜單

在 OS X 上，有很多系統(tǒng)定義的標(biāo)準(zhǔn)菜單，例如 Services and Windows 菜單.為了讓你的應(yīng)用更標(biāo)準(zhǔn)化，你可以為你的菜單的 role 設(shè)置值，然后 electron 將會識別他們并且讓你的菜單更標(biāo)準(zhǔn):

window
help
services

標(biāo)準(zhǔn)菜單項(xiàng)行為

OS X 為一些菜單項(xiàng)提供了標(biāo)準(zhǔn)的行為方法，例如 About xxx, Hide xxx, and Hide Others. 為了讓你的菜單項(xiàng)的行為更標(biāo)準(zhǔn)化，你應(yīng)該為菜單項(xiàng)設(shè)置 role 屬性.

主菜單名

在 OS X ，無論你設(shè)置的什么標(biāo)簽，應(yīng)用菜單的第一個(gè)菜單項(xiàng)的標(biāo)簽始終未你的應(yīng)用名字.想要改變它的話，你必須通過修改應(yīng)用綁定的 Info.plist 文件來修改應(yīng)用名字.更多信息參考About Information Property List Files .

為制定瀏覽器窗口設(shè)置菜單 (Linux Windows)

瀏覽器窗口的[setMenu 方法][setMenu] 能夠設(shè)置菜單為特定瀏覽器窗口的類型.

菜單項(xiàng)位置

當(dāng)通過 Menu.buildFromTemplate 創(chuàng)建菜單的時(shí)候，你可以使用 position and id 來放置菜單項(xiàng).

MenuItem 的屬性 position 格式為 [placement]=[id]，placement 取值為 before, after, 或 endof 和 id， id 是菜單已經(jīng)存在的菜單項(xiàng)的唯一 ID:

before - 在對應(yīng)引用id菜單項(xiàng)之前插入. 如果引用的菜單項(xiàng)不存在，則將其插在菜單末尾.
after - 在對應(yīng)引用id菜單項(xiàng)之后插入. 如果引用的菜單項(xiàng)不存在，則將其插在菜單末尾.
endof - 在邏輯上包含對應(yīng)引用id菜單項(xiàng)的集合末尾插入. 如果引用的菜單項(xiàng)不存在, 則將使用給定的id創(chuàng)建一個(gè)新的集合，并且這個(gè)菜單項(xiàng)將插入.

當(dāng)一個(gè)菜檔項(xiàng)插入成功了，所有的沒有插入的菜單項(xiàng)將一個(gè)接一個(gè)地在后面插入.所以如果你想在同一個(gè)位置插入一組菜單項(xiàng)，只需要為這組菜單項(xiàng)的第一個(gè)指定位置.

例子

模板:

[
  {label: '4', id: '4'},
  {label: '5', id: '5'},
  {label: '1', id: '1', position: 'before=4'},
  {label: '2', id: '2'},
  {label: '3', id: '3'}
]

菜單:

- 1
- 2
- 3
- 4
- 5

模板:

[
  {label: 'a', position: 'endof=letters'},
  {label: '1', position: 'endof=numbers'},
  {label: 'b', position: 'endof=letters'},
  {label: '2', position: 'endof=numbers'},
  {label: 'c', position: 'endof=letters'},
  {label: '3', position: 'endof=numbers'}
]

菜單:

- ---
- a
- b
- c
- ---
- 1
- 2
- 3

[setMenu]: http://m.o2fo.com/electronmanual/electronmanual-browser-window.html

以上內(nèi)容是否對您有幫助：

← Electron ipcMain 模塊

Electron MenuItem 模塊 →

寫筆記

我要補(bǔ)充

Electron menu 模塊

類: Menu

new Menu()

方法

Menu.setApplicationMenu(menu)

Menu.sendActionToFirstResponder(action) OS X

Menu.buildFromTemplate(template)