当前位置: 代码迷 >> 综合 >> electron开发跨多平台Mac、Windows 和 Linux的桌面应用之自定义头部菜单以及右键菜单(八)
  详细解决方案

electron开发跨多平台Mac、Windows 和 Linux的桌面应用之自定义头部菜单以及右键菜单(八)

热度:80   发布时间:2024-01-24 07:16:04.0

1.在主进程中自定义头部菜单:

//创建main/menu.js文件
const electron=require("electron");
let Menu=electron.Menu;let template=[{label:"文件",submenu:[{label:"打开",click:()=>{console.log("我点击了")}}]},{label:"编辑",submenu:[{label:"复制",role:'copy'},{label:"粘贴",accelerator:'ctrl+v'},]}
]let m=Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);
//在主进程main.js中
const electron=require("electron");
let app=electron.app;
let BrowserWindow=electron.BrowserWindow;
let win=null;
app.on("ready",()=>{win=new BrowserWindow({width:800,height:800,webPreferences: {nodeIntegration: true  //设置该属性为true,否则可能报错ReferenceError: require is not defined}})win.loadFile("index.html");win.webContents.openDevTools();win.on("closed",()=>{win=null;})require("./main/menu.js")   //引入./main/menu.js自定义头部菜单文件
})

2.在渲染进程中自定义头部菜单并自定义右键菜单:

//render/render-menu.js
const remote=require("electron").remote;  //渲染进程通过remote模块调用主进程方法
let Menu=remote.Menu;let template=[{label:"文件",submenu:[{label:"打开",click:()=>{console.log("我点击了")}}]},{label:"编辑",submenu:[{label:"复制",role:'copy'},{label:"粘贴",accelerator:'ctrl+v'},]}
]let m=Menu.buildFromTemplate(template);
Menu.setApplicationMenu(m);window.addEventListener('contextmenu',(e)=>{e.preventDefault();m.popup({window:remote.getCurrentWindow()})
})
<!--在index.html中引入render/render-menu.js-->
<!DOCTYPE html><body><div>测试</div><script src="render/render-menu.js"></script>     </body>
</html>

 

 

 

 

 

 

 

  相关解决方案