【Electron Playground 系列】菜單篇

做者： 梁棒棒

1.簡介

菜單主要分爲應用程序菜單、上下文菜單，在tray和dock中也有用到菜單，本節主要介紹前兩種。文檔地址

1.1 應用程序菜單

mac和windows都在左上角，可是一個在屏幕左上角一個在應用程序視圖左上角。
mac是這樣的：

windows長這樣：

若是windows下沒有顯示菜單，在當前窗口按alt鍵即會出現。

1.2 上下文菜單

即右鍵菜單。

2. 建立菜單

2.1 建立應用程序菜單

接下來咱們建立應用程序菜單。以下步驟：

1. 引入Menu類
2. 定義一個菜單模板
3. 調用Menu類的buildFromTemplate方法，該方法會根據傳入的模板建立對應的菜單
4. 調用Menu類的setApplicationMenu方法

此四步便可建立應用程序菜單，先來看下效果圖。

附上代碼：

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

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

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

// 步驟四
Menu.setApplicationMenu(menu)

2.2 建立上下文菜單

即建立右鍵點擊菜單，前三步與建立應用程序菜單相同，最後一步需監聽窗口context-menu事件展現菜單選項。
監聽事件context-menu文檔

先上效果圖。

附上代碼：

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

// 步驟二
const template = [
  {
    label: 'app', // macOS下第一個標籤是應用程序名字，此處設置無效
    submenu: [
      { role: 'quit' },
      { role: 'about' }
    ]
  },
  {
    label: '編輯',
    role: 'editMenu'
  }
]

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

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

可能你已經發現，這個例子的代碼比上個例子少，實現的菜單卻更多，並且這個role又是幹嗎的呢，別急，往下看。

3. 設置菜單屬性

上節說到，這個role是幹嗎的呢？
其實建立菜單行爲有兩種方式，一種是自定義，即1.1中實現方式，另一種是預約義即role。

role是MenuItem的屬性，是electron的預約義行爲。文檔說：最好給任何一個菜單指定 role去匹配一個標準角色, 而不是嘗試在 click 函數中手動實現該行爲。 內置的 role 行爲將提供最佳的原生體驗。使用 role 時, label 和 accelerator 值是可選的, 併爲每一個平臺，默認爲適當值。

這就是說，你只要設置好role屬性，那麼這個菜單的文案、快捷鍵、事件行爲都已內部實現，並且比自定義的行爲體驗更好。

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

const templateCustom = [
  {
    label: 'app', // macOS下第一個標籤是應用程序名字，此處設置無效
    submenu: [
      { label: 'quit', role: 'quit' },
      {label: '關於', 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是設置快捷鍵的屬性。

4. 隱藏菜單

若是咱們在開發中使用了一些菜單，可是不想讓用戶看到，還要在線上保留這個功能，好比調試窗口，方便線上查找bug，那麼這個隱藏菜單的屬性visible就能夠派上用場了。

看下效果圖：

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

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

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

咱們是曉黑板前端，歡迎關注咱們的 知乎、 Segmentfault、 CSDN、 簡書、 開源中國、 博客園帳號。