Electron中设置菜单(Menu)，主进程向渲染进程共享数据

需求分析：设置主窗口的应用菜单以及鼠标的右击菜单，同时要求实现在应用菜单中开启打开调试工具(当用户自定义应用菜单时，应用菜单中的打开调试工具便会被取代)，并设置快捷键F12

实现看看主进程main.js:

var electron = require('electron') // 引入electron模块 var app = electron.app // 创建electron引用 var BrowserWindow = electron.BrowserWindow; // 创建窗口引用 var mainWindow = null ; // 声明要打开的主窗口 app.on('ready',()=>{ mainWindow = new BrowserWindow({ //设置打开的窗口大小 width:400, height:400, webPreferences: { nodeIntegration: true, // 集成node环境 enableRemoteModule: true // 开启remote，默认不能使用remote模块 } }) mainWindow.loadFile('index2.html') // 加载那个页面 // 监听关闭事件，把主窗口设置为null mainWindow.on('closed',()=>{ mainWindow = null }) // 分享主进程的数据 global.sharedObject = { mainWindow: mainWindow }; })

在main.js中需要把mainWindow设置为分享数据，因为在渲染进程中，我们需要通过mainWindow打开调试工具

一、创建Menu.js

设置窗口的主菜单

var template = [ { label:'文件', // 一级标题 submenu:[ // 二级标题 { label:'新建文件', accelerator:'ctrl+n', submenu: [ // 三级标题 { label: 'HTML文件' }, { label: 'JS文件' }, { label: 'CSS文件' } ], click:()=>{ } }, { label:'打开文件', accelerator: 'ctrl+o', click:()=>{ } } ] }, { label:'编辑', submenu:[ { label: '撤销', accelerator: 'ctrl+z', click:()=>{ } }, { label: '重做', accelerator: 'ctrl+y', click:()=>{ } } ] }, { label: '工具', submenu: [ { label: '打开调试工具', accelerator: 'f12', click: ()=>{ mainWindow.webContents.openDevTools(); // 通过主进程共享的mainWindow打开调试工具 } } ] } ] // 构建菜单模板 var m = Menu.buildFromTemplate(template) // 设置菜单模板为当前应用的菜单 Menu.setApplicationMenu(m)

二、在渲染进程中引入menu.js文件

const { remote } = require('electron'); const { Menu } = remote; const mainWindow = remote.getGlobal('sharedObject').mainWindow; // 获取主进程中共享的mainWindow /* 设置应用程序菜单 */ require('./renders/menu.js'); // 菜单变量 const menu = [ {label: '复制'}, {label: '粘贴'} ] /* 设置右键菜单 */ // 得到菜单模板 const menuTemp = Menu.buildFromTemplate(menu); // 右击菜单 window.addEventListener('contextmenu',function(e){ // 阻止默认右击事件 e.preventDefault(); // 把菜单模板设置为当前右击菜单 menuTemp.popup({window:remote.getCurrentWindow()}); })

获取mainWindow必须在导入菜单之前，否则menu.js中将无法使用mainWindow打开调试工具。

运行效果: