使用 Electron 自定義菜單

MageekChiu 發(fā)布于2019-08-20 14:32 / 1889人閱讀

摘要：使用自定義菜單此系列文章的應(yīng)用示例已發(fā)布于可以或下載后運行查看歡迎使用和模塊可用于創(chuàng)建自定義本地菜單有兩種菜單應(yīng)用程序頂部菜單和上下文右鍵單擊菜單在瀏覽器中打開完整的文檔創(chuàng)建應(yīng)用程序菜單支持進(jìn)程使用和模塊可以自定義你的應(yīng)用程序菜單如果

使用 Electron 自定義菜單

此系列文章的應(yīng)用示例已發(fā)布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下載后運行查看. 歡迎 Star .

使用 Menu 和 MenuItem 模塊可用于創(chuàng)建自定義本地菜單.

有兩種菜單: 應(yīng)用程序（頂部）菜單和上下文（右鍵單擊）菜單.

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

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

支持: Win, macOS, Linux | 進(jìn)程: Main

使用 Menu 和 MenuItem 模塊可以自定義你的應(yīng)用程序菜單. 如果沒有設(shè)置任何菜單, Electron 將為您的應(yīng)用默認(rèn)生成一個最小的菜單.

此應(yīng)用程序使用下面的代碼設(shè)置應(yīng)用程序菜單. 如果您點擊應(yīng)用程序菜單中的 "查看" 選項, 然后點擊 "應(yīng)用程序菜單演示", 則會顯示一個信息框.

主進(jìn)程

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: "復(fù)制",
    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) {
        // 重載之后, 刷新并關(guān)閉所有的次要窗體
        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: "切換開發(fā)者工具",
    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: "應(yīng)用程序菜單演示",
    click: function (item, focusedWindow) {
      if (focusedWindow) {
        const options = {
          type: "info",
          title: "應(yīng)用程序菜單演示",
          buttons: ["好的"],
          message: "此演示用于 "菜單" 部分, 展示如何在應(yīng)用程序菜單中創(chuàng)建可點擊的菜單項."
        }
        electron.dialog.showMessageBox(focusedWindow, options, function () {})
      }
    }
  }]
}, {
  label: "窗口",
  role: "window",
  submenu: [{
    label: "最小化",
    accelerator: "CmdOrCtrl+M",
    role: "minimize"
  }, {
    label: "關(guān)閉",
    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: "學(xué)習(xí)更多",
    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: `關(guān)于 ${name}`,
      role: "about"
    }, {
      type: "separator"
    }, {
      label: "服務(wù)",
      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
})

高級技巧

了解操作系統(tǒng)菜單的差異.

在為多個操作系統(tǒng)設(shè)計應(yīng)用程序時, 請務(wù)必注意應(yīng)用程序菜單在每個操作系統(tǒng)上的不同約定之處。

例如, 在 Windows 上, 加速器設(shè)置為＆ . 命名約定也有所不同, 如 "設(shè)置" 或 "首選項". 下面是學(xué)習(xí)操作系統(tǒng)特定標(biāo)準(zhǔn)的資源:

macOS

Windows.aspx)

Linux

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

支持: Win, macOS, Linux | 進(jìn)程: Main

可以使用 Menu 和 MenuItem 模塊創(chuàng)建上下文或右鍵單擊菜單. 您可以右鍵單擊此應(yīng)用程序中的任何位置, 或單擊示例按鈕以查看示例上下文菜單.

在這個示例中, 我們使用 ipcRenderer 模塊來展示從渲染器進(jìn)程顯式調(diào)用它時的上下文菜單.

有關(guān)所有可用的屬性請查看上下文菜單事件文檔 .

主進(jìn)程

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)
})

渲染器進(jìn)程

const ipc = require("electron").ipcRenderer

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

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