需求分析:设置主窗口的应用菜单以及鼠标的右击菜单,同时要求实现在应用菜单中开启
打开调试工具
(当用户自定义应用菜单时,应用菜单中的打开调试工具
便会被取代),并设置快捷键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
打开调试工具。
运行效果: