使用 Electron 自定義菜單

時間 2019-11-06

標籤使用 electron 自定義菜單简体版

原文原文鏈接

使用 Electron 自定義菜單

此係列文章的應用示例已發佈於 GitHub: electron-api-demos-Zh_CN. 能夠 Clone 或下載後運行查看. 歡迎 Star .html

使用 Menu 和 MenuItem 模塊可用於建立自定義本地菜單.git

有兩種菜單: 應用程序（頂部）菜單和上下文（右鍵單擊）菜單.github

在瀏覽器中打開完整的 API 文檔 .web

建立應用程序菜單

支持: Win, macOS, Linux | 進程: Mainshell

使用 Menu 和 MenuItem 模塊能夠自定義你的應用程序菜單. 若是沒有設置任何菜單, Electron 將爲您的應用默認生成一個最小的菜單.windows

此應用程序使用下面的代碼設置應用程序菜單. 若是您點擊應用程序菜單中的 "查看" 選項, 而後點擊 "應用程序菜單演示", 則會顯示一個信息框.api

主進程瀏覽器

const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const app = electron.app

let template = [{
  label: '編輯',
  submenu: [{
    label: '撤銷',
    accelerator: 'CmdOrCtrl+Z',
    role: 'undo'
  }, {
    label: '重作',
    accelerator: 'Shift+CmdOrCtrl+Z',
    role: 'redo'
  }, {
    type: 'separator'
  }, {
    label: '剪切',
    accelerator: 'CmdOrCtrl+X',
    role: 'cut'
  }, {
    label: '複製',
    accelerator: 'CmdOrCtrl+C',
    role: 'copy'
  }, {
    label: '粘貼',
    accelerator: 'CmdOrCtrl+V',
    role: 'paste'
  }, {
    label: '全選',
    accelerator: 'CmdOrCtrl+A',
    role: 'selectall'
  }]
}, {
  label: '查看',
  submenu: [{
    label: '重載',
    accelerator: 'CmdOrCtrl+R',
    click: function (item, focusedWindow) {
      if (focusedWindow) {
        // 重載以後, 刷新並關閉全部的次要窗體
        if (focusedWindow.id === 1) {
          BrowserWindow.getAllWindows().forEach(function (win) {
            if (win.id > 1) {
              win.close()
            }
          })
        }
        focusedWindow.reload()
      }
    }
  }, {
    label: '切換全屏',
    accelerator: (function () {
      if (process.platform === 'darwin') {
        return 'Ctrl+Command+F'
      } else {
        return 'F11'
      }
    })(),
    click: function (item, focusedWindow) {
      if (focusedWindow) {
        focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
      }
    }
  }, {
    label: '切換開發者工具',
    accelerator: (function () {
      if (process.platform === 'darwin') {
        return 'Alt+Command+I'
      } else {
        return 'Ctrl+Shift+I'
      }
    })(),
    click: function (item, focusedWindow) {
      if (focusedWindow) {
        focusedWindow.toggleDevTools()
      }
    }
  }, {
    type: 'separator'
  }, {
    label: '應用程序菜單演示',
    click: function (item, focusedWindow) {
      if (focusedWindow) {
        const options = {
          type: 'info',
          title: '應用程序菜單演示',
          buttons: ['好的'],
          message: '此演示用於 "菜單" 部分, 展現如何在應用程序菜單中建立可點擊的菜單項.'
        }
        electron.dialog.showMessageBox(focusedWindow, options, function () {})
      }
    }
  }]
}, {
  label: '窗口',
  role: 'window',
  submenu: [{
    label: '最小化',
    accelerator: 'CmdOrCtrl+M',
    role: 'minimize'
  }, {
    label: '關閉',
    accelerator: 'CmdOrCtrl+W',
    role: 'close'
  }, {
    type: 'separator'
  }, {
    label: '從新打開窗口',
    accelerator: 'CmdOrCtrl+Shift+T',
    enabled: false,
    key: 'reopenMenuItem',
    click: function () {
      app.emit('activate')
    }
  }]
}, {
  label: '幫助',
  role: 'help',
  submenu: [{
    label: '學習更多',
    click: function () {
      electron.shell.openExternal('http://electron.atom.io')
    }
  }]
}]

function addUpdateMenuItems (items, position) {
  if (process.mas) return

  const version = electron.app.getVersion()
  let updateItems = [{
    label: `Version ${version}`,
    enabled: false
  }, {
    label: '正在檢查更新',
    enabled: false,
    key: 'checkingForUpdate'
  }, {
    label: '檢查更新',
    visible: false,
    key: 'checkForUpdate',
    click: function () {
      require('electron').autoUpdater.checkForUpdates()
    }
  }, {
    label: '重啓並安裝更新',
    enabled: true,
    visible: false,
    key: 'restartToUpdate',
    click: function () {
      require('electron').autoUpdater.quitAndInstall()
    }
  }]

  items.splice.apply(items, [position, 0].concat(updateItems))
}

function findReopenMenuItem () {
  const menu = Menu.getApplicationMenu()
  if (!menu) return

  let reopenMenuItem
  menu.items.forEach(function (item) {
    if (item.submenu) {
      item.submenu.items.forEach(function (item) {
        if (item.key === 'reopenMenuItem') {
          reopenMenuItem = item
        }
      })
    }
  })
  return reopenMenuItem
}

if (process.platform === 'darwin') {
  const name = electron.app.getName()
  template.unshift({
    label: name,
    submenu: [{
      label: `關於 ${name}`,
      role: 'about'
    }, {
      type: 'separator'
    }, {
      label: '服務',
      role: 'services',
      submenu: []
    }, {
      type: 'separator'
    }, {
      label: `隱藏 ${name}`,
      accelerator: 'Command+H',
      role: 'hide'
    }, {
      label: '隱藏其它',
      accelerator: 'Command+Alt+H',
      role: 'hideothers'
    }, {
      label: '顯示所有',
      role: 'unhide'
    }, {
      type: 'separator'
    }, {
      label: '退出',
      accelerator: 'Command+Q',
      click: function () {
        app.quit()
      }
    }]
  })

  // 窗口菜單.
  template[3].submenu.push({
    type: 'separator'
  }, {
    label: '前置全部',
    role: 'front'
  })

  addUpdateMenuItems(template[0].submenu, 1)
}

if (process.platform === 'win32') {
  const helpMenu = template[template.length - 1].submenu
  addUpdateMenuItems(helpMenu, 0)
}

app.on('ready', function () {
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
})

app.on('browser-window-created', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = false
})

app.on('window-all-closed', function () {
  let reopenMenuItem = findReopenMenuItem()
  if (reopenMenuItem) reopenMenuItem.enabled = true
})

高級技巧

瞭解操做系統菜單的差別.app

在爲多個操做系統設計應用程序時, 請務必注意應用程序菜單在每一個操做系統上的不一樣約定之處。electron

例如, 在 Windows 上, 加速器設置爲 ＆ . 命名約定也有所不一樣, 如 "設置" 或 "首選項". 下面是學習操做系統特定標準的資源:

建立上下文菜單

支持: Win, macOS, Linux | 進程: Main

能夠使用 Menu 和 MenuItem 模塊建立上下文或右鍵單擊菜單. 您能夠右鍵單擊此應用程序中的任何位置, 或單擊示例按鈕以查看示例上下文菜單.

在這個示例中, 咱們使用 ipcRenderer 模塊來展現從渲染器進程顯式調用它時的上下文菜單.

有關全部可用的屬性請查看上下文菜單事件文檔 .

主進程

const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const Menu = electron.Menu
const MenuItem = electron.MenuItem
const ipc = electron.ipcMain
const app = electron.app

const menu = new Menu()
menu.append(new MenuItem({ label: 'Hello' }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))

app.on('browser-window-created', function (event, win) {
  win.webContents.on('context-menu', function (e, params) {
    menu.popup(win, params.x, params.y)
  })
})

ipc.on('show-context-menu', function (event) {
  const win = BrowserWindow.fromWebContents(event.sender)
  menu.popup(win)
})

渲染器進程

const ipc = require('electron').ipcRenderer

// 告訴主進程在單擊示例按鈕時顯示菜單
const contextMenuBtn = document.getElementById('context-menu')
contextMenuBtn.addEventListener('click', function () {
  ipc.send('show-context-menu')
})

若是這邊文章對您有幫助, 感謝下方點贊或 Star GitHub: electron-api-demos-Zh_CN 支持, 謝謝.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。