場景

用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 menutemplate[1].submenu.push({type: 'separator'},{label: 'Speech',submenu: [{role: 'startspeaking'},{role: 'stopspeaking'}]})// Window menutemplate[3].submenu = [{role: 'close'},{role: 'minimize'},{role: 'zoom'},{type: 'separator'},{role: 'front'}] }const menu = Menu.buildFromTemplate(template)menu.popup();

效果

?

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Electron中实现菜单、子菜单、以及自带操作事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。