14、 Electron菜单
index.js
/** * 使用模板创建原生应用菜单 * 1、应用菜单（窗口菜单） * Window、Linux和Mac OS X * 2、上下文菜单 * * 1、模板 * 2、代码 * electron-packager * npm install electron-packager -g * electron-packager . firstmenu --electron-version=3.0.0 * dmg(Mac OX X) exe(Window) * * * 通用role undo redo cut copy paste pasteAndMatchStyle selectAll delete minimize:最小化当前窗口 close:关闭当前窗口 quit:退出应用程序 reload:重新装载当前窗口 forceReload:重新装载当前窗口（不考缓存） toggleDevTools:在当前窗口显示开发者工具 toggleFullScreen:全屏显示当前窗口 resetZoom:重新设置当前页面的尺寸为最初的尺寸 zoomIn:将当前页面放大10% zoomOut:将当前页面缩小10% editMenu:整个“Edit”菜单，包括Undo、Copy等。 windowMenu:整个“Window”菜单，包括Minimize、Close等。 下面的角色仅用于Mac OS X系统。 Mac OS X独有的role about:显示“关于”对话框 hide:隐藏 hideOthers:隐藏其他应用程序。 unhide:取消隐藏其他应用程序。 startSpeaking:开始说话。 stopSpeaking:停止说话。 front:映射arrangeInFront动作 zoom:映射performZoom动作 taggleTabBar:显示TabBar. selectNextTab:选择下一个Tab selectPreviousTab:选择前一个Tab mergeAllWindows:合并所有的窗口 moveTabToNewWindow:移动Tab到新有窗口 window:Window的子菜单 help:Help的子菜单 services:Services的子菜单 recentDocuments:Open Recent菜单的子菜单 clearRecentDocuments:清除最近打开的文档 */ /** * 菜单类型 * 1、normal:默认的菜单类型 * 2、separator:分割线 * 3、submenu:子菜单 * 4、checkbox:多选菜单 * 5、radio:单选菜单 */ /** * 为菜单项添加图标 * windows * ico * 其他系统 * png * icon设置图标 * 图标会按照实际大小显示 */ /** * 动态创建菜单 */ /** * 上下文菜单 * */ // const electron = require('electron'); // const app=electron.app; // const BrowserWindow=electron.BrowserWindow; // const Menu=electron.Menu; const {app,BrowserWindow,Menu} = require('electron'); function createWindow(){ win = new BrowserWindow({ //show:false, webPreferences:{ nodeIntegration: true, // 是否集成 Nodejs enableRemoteModule: true, contextIsolation: false, } }); win.loadFile('index.html'); //定义菜单模板 // const template=[ // {label:"文件",submenu:[ // {label:"关于", // //role:'about', // click:()=>{ // var aboutWin=new BrowserWindow({width:300,height:200,parent:win,modal:true}); // aboutWin.loadURL("https://www.baidu.com"); // }}, // {type:"separator"}, // {label:"关闭",accelerator:"Ctrl+Q",click:()=>{win.close();}} // ]}, // {label:"编辑",submenu:[ // {label:"复制",click:()=>{win.webContents.insertText('复制');}}, // {label:"粘贴",click:()=>{win.webContents.insertText('粘贴');}}, // {type:"separator"}, // {label:"查找",accelerator:"Ctrl+F",click:()=>{win.webContents.insertText('查找');}}, // {label:"替换",accelerator:"Ctrl+H",click:()=>{win.webContents.insertText('替换');}} // ]}, // ] // if(process.platform=="darwin"){ // //添加Mac OS X特有的菜单 // } //菜单角色 // const template=[ // {label:"编辑",submenu:[ // {label:"撤销",role:"undo"}, // {label:"重做",role:"redo"}, // {label:"剪切",role:"cut"}, // {label:"复制",role:"copy"}, // {label:"粘贴",role:"paste"}, // ]}, // {label:"调试",submenu:[ // {label:"显示调试工具",role:"toggleDevTools"}, // ]}, // {label:"窗口",submenu:[ // {label:"全屏显示窗口",role:"toggleFullScreen"}, // {label:"窗口放大10%",role:"zoomIn"}, // {label:"窗口缩小10%",role:"zoomOut"}, // ]}, // ] // if(process.platform=="darwin"){ // //添加Mac OS X特有的菜单 // template.unshift( // {label:"Mac",submenu:[ // {label:"关于",role:"about"}, // {label:"开始说话",role:"startSpeaking"}, // {label:"停止说话",role:"stopSpeaking"}, // ]} // ) // } //菜单类型 // const template=[ // {label:"编辑",submenu:[ // {label:"撤销",role:"undo"}, // {label:"重做",role:"redo"}, // {type:"separator"}, // {label:"剪切",role:"cut"}, // {label:"复制",role:"copy"}, // {label:"粘贴",role:"paste"}, // ]}, // {label:"我的菜单",submenu:[ // {label:"多选1",type:"checkbox"}, // {label:"多选2",type:"checkbox"}, // {label:"多选3",type:"checkbox"}, // {label:"单选1",type:"radio"}, // {label:"单选2",type:"radio"}, // {label:"Windows",type:"submenu",role:"windowMenu"} // ]}, // ] //菜单图标 // var icon=""; // if(process.platform=="win32"){ // icon="./images/logn.jpg";//.ico // }else{ // icon="./images/folder.png";//.png // } // const template=[ // {label:"文件",submenu:[ // {label:"打开",icon:icon,role:"undo"}, // {label:"重做",role:"redo"}, // ]}, // ] // console.info(Menu); // const menu=Menu.buildFromTemplate(template); // Menu.setApplicationMenu(menu); win.on("ready-to-show",()=>{ win.show(); }); if(process.platform!="darwin"){ win.setIcon("images\\logn.jpg"); } win.on('closed',()=>{ console.log('closed') win=null; }); } app.on('ready',createWindow); app.on('window-all-closed',()=>{ console.log('window-all-closed'); if(process.platform!='darwin'){ } }); app.on('activate',()=>{ console.log('activate'); if(win==null){ createWindow(); } });
index.html
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>菜单、菜单角色、动态创建菜单</title> <script src="event.js"></script> <body onload="onLoad()"> <button onclick="onClick_ProgressBar()">在任务栏上添加进度条</button> <textarea></textarea> <h1>菜单角色</h1> <textarea style="width:400px;height:300px;"></textarea> <h1>动态创建菜单</h1> <button onclick="onClick_AddOriginMenu()">添加最初菜单</button> <br> 菜单文本：<input id="menuitem" type="text"/> <br> <input id="radio" name="radio" type="radio"/>单选 <input id="checkbox" name="radio" type="radio"/>多选 <br> <button onclick="onClick_AddMenuItem()">动态添加菜单项</button> <h1>上下文菜单</h1> <div id="panel" style="background-color:brown;width:300px;height:200px"></div> </body> </html>
event.js
//const{webFrame}=window.require('electron'); const electron= window.require('electron'); const app=electron.app; const remote=electron.remote; const BrowserWindow=remote.BrowserWindow; const Menu=remote.Menu; const MenuItem=remote.MenuItem; const dialog=remote.dialog; function onClick_ProgressBar() { const win=remote.getCurrentWindow(); win.setProgressBar(0.3); } function saveClick(){ var win=new BrowserWindow({width:300,height:200}); win.loadURL("https://www.baidu.com"); } const customMenu=new Menu(); function onClick_AddOriginMenu(){ const menu=new Menu(); var icon=""; if(process.platform=="win32"){ icon="./images/logn.jpg";//.ico }else{ icon="./images/folder.png";//.png } const menuitemOpen=new MenuItem({label:"打开",icon:icon}); const menuitemSave=new MenuItem({label:"保存",saveClick}); const menuitemDebug=new MenuItem({label:"显示调试工具",role:"toggleDevTools"}); const menuitemFile=new MenuItem({label:"文件",submenu:[menuitemOpen,menuitemSave,menuitemDebug]}); menuitemCustom=new MenuItem({label:"我的菜单",submenu:customMenu}); menu.append(menuitemFile); menu.append(menuitemCustom); Menu.setApplicationMenu(menu); } function onClick_AddMenuItem() { var type="normal"; if(radio.checked){ type="radio" } if(checkbox.checked){ type="checkbox" } customMenu.append(new MenuItem({label:menuitem.value,type:type})); menuitem.value=""; radio.checked=false; checkbox.checked=false; Menu.setApplicationMenu(Menu.getApplicationMenu()); } function onLoad(){ const menu=new Menu(); var icon=""; if(process.platform=="win32"){ icon="./images/logn.jpg";//.ico }else{ icon="./images/folder.png";//.png } const win=remote.getCurrentWindow(); var menuitemOpen=new MenuItem({label:"打开",icon:icon,click:()=>{ var paths=dialog.showOpenDialog({properties:['openFile']}); if(paths!=undefined){ alert(paths[0]) win.setTitle(paths[0]); } }}); var menuitemSave=new MenuItem({label:"保存",saveClick}); var menuitemFile=new MenuItem({label:"文件",submenu:[menuitemOpen,menuitemSave]}); var menuitemInsertImage=new MenuItem({label:"插入图像"}); var menuitemRemoveImage=new MenuItem({label:"删除图像"}); menu.append(menuitemFile); menu.append(menuitemInsertImage); menu.append(menuitemRemoveImage); panel.addEventListener("contextmenu",function(event){ event.preventDefault(); x=event.x; y=event.y; menu.popup({x:x,y:y}); return false; }); }
