Menu 菜單 · PHP/Python/前端/Linux 等等學習筆記

[TOC] [https://electronjs.org/docs/api/menu](https://electronjs.org/docs/api/menu) ## 技巧 ## 接口 `let menu = new Menu() ` ### 靜態方法 #### [`Menu.setApplicationMenu(menu)`設置菜單](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu)[](https://electronjs.org/docs/api/menu#menusetapplicationmenumenu "Permalink") * 在windows和Linux系統中，使用`null`參數將會移除菜單欄, 但在MacOS系統中則不會有任何效果；注意：這個**API**調用要在程序的`ready`事件模塊之后； #### [`Menu.buildFromTemplate(template)`](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate)[](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate "Permalink") `template` 參數是 `menu` 的數組 #### [`Menu.getApplicationMenu() `](https://electronjs.org/docs/api/menu#menugetapplicationmenu)[](https://electronjs.org/docs/api/menu#menugetapplicationmenu "Permalink") ### 實例方法 #### [`menu.popup(options)`](https://electronjs.org/docs/api/menu#menupopupoptions)[](https://electronjs.org/docs/api/menu#menupopupoptions "Permalink") * `options`Object (可選) * `window`[BrowserWindow](https://electronjs.org/docs/api/browser-window)(可選) - 默認為選中窗口. * `x`數字 (可選)-默認值是當前鼠標光標的位置。如果聲明了`y`, 則必須聲明。 * `y`數字 (可選)-默認值是當前鼠標光標的位置。如果聲明了`x`, 則必須聲明。 * `positioningItem`數字 (可選)*macOS*\-要在指定坐標下的鼠標光標下定位的菜單項的索引。默認值為-1。 * `callback`Function (optional) - 會在菜單關閉后被調用. * 將此菜單作為 browserWindow中的上下文菜單彈出,即在界面中彈出 #### `menu.closePopup([browserWindow])` 關閉`browserWindow`中的上下文菜單。 #### `menu.append(menuItem)` 追加到菜單 * `menuItem`[菜單項](https://electronjs.org/docs/api/menu-item) #### `menu.insert(pos, menuItem)` 將`menuItem`插入菜單的`pos`位置。 * `pos`Integer * `menuItem`[菜單項](https://electronjs.org/docs/api/menu-item) ### 實例事件 #### 'menu-will-show' 調用`menu.popup()`事件時觸發該事件 #### 'menu-will-close' ### 實例屬性 #### menu.items 返回`MenuItem []`數組。 ## 案例 ### 取消菜單欄 ``` const {Menu} = require("electron"); Menu.setApplicationMenu(null); // 設置菜單部分 ``` ### 自定義菜單 main.js ``` const {app,BrowserWindow,Menu,shell} = require("electron"); app.on("ready",()=>{ buildMenu(); createWindow(); }); 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.quit() }) //定義一個創建瀏覽器窗口的方法 function createWindow(){ // 創建一個瀏覽器窗口對象，并指定窗口的大小 mainWindow=new BrowserWindow({ width:1200, height:800, nodeIntegration:true }); if (debug){ mainWindow.webContents.openDevTools(); // mainWindow.maximize();//最大化運行 } // 通過瀏覽器窗口對象加載index.html文件，同時也是可以加載一個互聯網地址的 mainWindow.loadURL('file://'+__dirname+'/demo/hmtl/index.html'); // 同時也可以簡化成：mainWindow.loadURL('./index.html'); // 監聽瀏覽器窗口對象是否關閉，關閉之后直接將mainWindow指向空引用，也就是回收對象內存空間 mainWindow.on("closed",function(){ mainWindow = null; }); } /** * 自定義菜單 */ function buildMenu() { let template = [ { label: 'Edit ( 操作 )', submenu: [{ label: 'Copy ( 復制 )', accelerator: 'CmdOrCtrl+C', role: 'copy' }, { label: 'Paste ( 粘貼 )', accelerator: 'CmdOrCtrl+V', role: 'paste' }, { label: 'Reload ( 重新加載 )', accelerator: 'CmdOrCtrl+R', click: function (item, focusedWindow) { if (focusedWindow) { // on reload, start fresh and close any old // open secondary windows if (focusedWindow.id === 1) { BrowserWindow.getAllWindows().forEach(function (win) { if (win.id > 1) { win.close() } }) } focusedWindow.reload() } } }] }, { label: 'Window ( 窗口 )', role: 'window', submenu: [{ label: 'Minimize ( 最小化 )', accelerator: 'CmdOrCtrl+M', role: 'minimize' }, { label: 'Close ( 關閉 )', accelerator: 'CmdOrCtrl+W', role: 'close' }, { 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: 'Help ( 幫助 ) ', role: 'help', submenu: [{ label: 'FeedBack ( 意見反饋 )', click: function () { shell.openExternal('https://forum.iptchain.net') } },{ label:"測試打印日志", click(){ console.log("測試打印日志"); } } ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu) // 設置菜單部分 /** * 增加更新相關的菜單選項 */ function addUpdateMenuItems (items, position) { if (process.mas) return; const version = app.getVersion(); let updateItems = [{ label: `Version ${version}`, enabled: false }, { label: 'Checking for Update', enabled: false, key: 'checkingForUpdate' }, { label: 'Check for Update', visible: false, key: 'checkForUpdate', click: function () { require('electron').autoUpdater.checkForUpdates() } }, { label: 'Restart and Install Update', enabled: true, visible: false, key: 'restartToUpdate', click: function () { require('electron').autoUpdater.quitAndInstall() } }] items.splice.apply(items, [position, 0].concat(updateItems)) } // 針對Mac端的一些配置 if (process.platform === 'darwin') { const name = electron.app.getName(); template.unshift({ label: name, submenu: [{ label: 'Quit ( 退出 )', accelerator: 'Command+Q', click: function () { app.quit() } }] }) // Window menu. template[3].submenu.push({ type: 'separator' }, { label: 'Bring All to Front', role: 'front' }) addUpdateMenuItems(template[0].submenu, 1) } // 針對Windows端的一些配置 if (process.platform === 'win32') { const helpMenu = template[template.length - 1].submenu; addUpdateMenuItems(helpMenu, 0) } } /** * 自定義菜單 * @returns {*} */ 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; } ```