Electron中實現菜單、子菜單、以及自帶操作事件

場景

用HTML和CSS和JS構建跨平台桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試后，那么Electron怎樣實現菜單項。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先在renderer.js中引入Menu和MenuItem

const {remote} = require('electron');
const {Menu, MenuItem} = remote;

然后為了觸發按鈕彈出的操作，在index.html中添加一個按鈕，並設置id

<button id="menuItem">彈出菜單</button>

然后在renderer.js中獲取這個按鈕並設置其點擊事件，在點擊事件中添加菜單項

var btnMenuItem=document.getElementById('menuItem');
btnMenuItem.onclick = PopMenu;

function PopMenu()
{
  const template = [
    { label: "公眾號:" },
    { label: "霸道的程序猿" , click: () => {
        console.log("點擊事件OK");
    }},
    { role: "undo"},
    { role: "redo"},
    { label: "旅游", type: "checkbox", checked: true},
    { label: "吃", type: "checkbox", checked: true},
    { label: "逛街", type: "checkbox", checked: false},
    new MenuItem({label: "這是menuItem生成的菜單", click: ()=> {
        console.log("您點擊了menuItem的菜單");
    }}),
    {
        label: "子菜單測試",
        submenu: [
            {label: "子菜單-1"},
            {label: "子菜單-2"},
            {label: "子菜單-3"}
        ]
    }
];
const menu = Menu.buildFromTemplate(template);
menu.popup();
}

效果

 

 

上面的undo就是執行撤銷的操作，redo就是重新執行撤銷的操作，類似的操作還有

const template = [
  {
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {type: 'separator'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
      {role: 'pasteandmatchstyle'},
      {role: 'delete'},
      {role: 'selectall'}
    ]
  },
  {
    label: 'View',
    submenu: [
      {role: 'reload'},
      {role: 'forcereload'},
      {role: 'toggledevtools'},
      {type: 'separator'},
      {role: 'resetzoom'},
      {role: 'zoomin'},
      {role: 'zoomout'},
      {type: 'separator'},
      {role: 'togglefullscreen'}
    ]
  },
  {
    role: 'window',
    submenu: [
      {role: 'minimize'},
      {role: 'close'}
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('https://electron.atom.io') }
      }
    ]
  }
]

if (process.platform === 'darwin') {
  template.unshift({
    label: app.getName(),
    submenu: [
      {role: 'about'},
      {type: 'separator'},
      {role: 'services', submenu: []},
      {type: 'separator'},
      {role: 'hide'},
      {role: 'hideothers'},
      {role: 'unhide'},
      {type: 'separator'},
      {role: 'quit'}
    ]
  })

  // Edit menu
  template[1].submenu.push(
    {type: 'separator'},
    {
      label: 'Speech',
      submenu: [
        {role: 'startspeaking'},
        {role: 'stopspeaking'}
      ]
    }
  )

  // Window menu
  template[3].submenu = [
    {role: 'close'},
    {role: 'minimize'},
    {role: 'zoom'},
    {type: 'separator'},
    {role: 'front'}
  ]
}

const menu = Menu.buildFromTemplate(template)

menu.popup();

 

效果