作者：梁棒棒

1.簡介

菜單主要分為應(yīng)用程序菜單、上下文菜單，在tray和dock中也有用到菜單，本節(jié)主要介紹前兩種。文檔地址

1.1 應(yīng)用程序菜單

mac和windows都在左上角，但是一個在屏幕左上角一個在應(yīng)用程序視圖左上角。
mac是這樣的：

mac-menu.png

windows長這樣：

win-menu.png

如果windows下沒有顯示菜單，在當(dāng)前窗口按alt鍵即會出現(xiàn)。

1.2 上下文菜單

即右鍵菜單。

2. 創(chuàng)建菜單

2.1 創(chuàng)建應(yīng)用程序菜單

接下來我們創(chuàng)建應(yīng)用程序菜單。如下步驟：

1. 引入Menu類
2. 定義一個菜單模板
3. 調(diào)用Menu類的buildFromTemplate方法，該方法會根據(jù)傳入的模板創(chuàng)建對應(yīng)的菜單
4. 調(diào)用Menu類的setApplicationMenu方法

此四步即可創(chuàng)建應(yīng)用程序菜單，先來看下效果圖。

create-menu.gif

附上代碼：

// 步驟一
const { Menu, dialog, app } = require('electron')

// 步驟二
const template = [
  {
    label: 'app', // macOS下第一個標(biāo)簽是應(yīng)用程序名字，此處設(shè)置無效
    submenu: [
      { label: '退出', click: () => { app.quit() } },
      { label: '關(guān)于', click: () => { app.showAboutPanel() } }
    ]
  },
  {
    label: '文件',
    submenu: [
      {
        label: '子菜單', 
        click: () => {
          // 調(diào)用了dialog（彈窗模塊），演示效果
          dialog.showMessageBoxSync({
            type: 'info',
            title: '提示',
            message: '點擊了子菜單'
          })
        }
      }
    ]
  }
]

// 步驟三
const menu = Menu.buildFromTemplate(template)

// 步驟四
Menu.setApplicationMenu(menu)

2.2 創(chuàng)建上下文菜單

即創(chuàng)建右鍵點擊菜單，前三步與創(chuàng)建應(yīng)用程序菜單相同，最后一步需監(jiān)聽窗口context-menu事件展示菜單選項。
監(jiān)聽事件context-menu文檔

先上效果圖。

create-context-menu.gif

附上代碼：

// 步驟一
const { Menu, BrowserWindow } = require('electron')

// 步驟二
const template = [
  {
    label: 'app', // macOS下第一個標(biāo)簽是應(yīng)用程序名字，此處設(shè)置無效
    submenu: [
      { role: 'quit' },
      { role: 'about' }
    ]
  },
  {
    label: '編輯',
    role: 'editMenu'
  }
]

// 步驟三
const contextMenu = Menu.buildFromTemplate(template)

// 步驟四
// 主進程，渲染進程可使用window.addEventListener設(shè)置監(jiān)聽事件
BrowserWindow.getFocusedWindow().webContents.on('context-menu', () => {
  contextMenu.popup()
})

可能你已經(jīng)發(fā)現(xiàn)，這個例子的代碼比上個例子少，實現(xiàn)的菜單卻更多，而且這個role又是干嘛的呢，別急，往下看。

3. 設(shè)置菜單屬性

上節(jié)說到，這個role是干嘛的呢？
其實創(chuàng)建菜單行為有兩種方式，一種是自定義，即1.1中實現(xiàn)方式，另外一種是預(yù)定義即role。

role是MenuItem的屬性，是electron的預(yù)定義行為。文檔說：最好給任何一個菜單指定 role去匹配一個標(biāo)準(zhǔn)角色, 而不是嘗試在 click 函數(shù)中手動實現(xiàn)該行為。 內(nèi)置的 role 行為將提供最佳的原生體驗。使用 role 時, label 和 accelerator 值是可選的, 并為每個平臺，默認為適當(dāng)值。

這就是說，你只要設(shè)置好role屬性，那么這個菜單的文案、快捷鍵、事件行為都已內(nèi)部實現(xiàn)，而且比自定義的行為體驗更好。

const { Menu, BrowserWindow } = require('electron')

const templateCustom = [
  {
    label: 'app', // macOS下第一個標(biāo)簽是應(yīng)用程序名字，此處設(shè)置無效
    submenu: [
      { label: 'quit', role: 'quit' },
      {label: '關(guān)于', role: 'about', accelerator: 'CommandOrControl + shift + H' }
    ]
  },
  {
    label: '編輯',
    submenu: [
      {role: 'editMenu'},
      {type: 'separator'},
      {label: '自定義', click: () => {
        const win = new BrowserWindow()
        win.loadURL('https://electronjs.org')
      } }
    ]
  }
]

const customMenu = Menu.buildFromTemplate(templateCustom)

Menu.setApplicationMenu(customMenu)

上述代碼line8的accelerator是設(shè)置快捷鍵的屬性。

4. 隱藏菜單

如果我們在開發(fā)中使用了一些菜單，但是不想讓用戶看到，還要在線上保留這個功能，比如調(diào)試窗口，方便線上查找bug，那么這個隱藏菜單的屬性visible就可以派上用場了。

看下效果圖：

hide-menu.gif

const { Menu } = require('electron')
const menu = Menu.getApplicationMenu()

// 獲取要隱藏的菜單將其屬性visible設(shè)置為false
menu.items[3].submenu.items[2].visible = false;

如圖所示：剛開始可以看到view的子菜單Toggle Developer Tools切換調(diào)試窗口，點擊執(zhí)行隱藏該菜單，這時通過快捷鍵cmd+option+I(windows下ctrl+shift+I)切換調(diào)試窗口。

我們是曉黑板前端，歡迎關(guān)注我們的知乎、Segmentfault、CSDN、簡書、開源中國、博客園賬號。