摘要：
顶部菜单main/menu.js//创建菜单/*varelectron=require;varMenu=electron.Menu;vscode里面实现代码提示功能：在当前项目安装一下electron模块。=='darwin'){app.quit();}});//macosapp.on;右键菜单render/menu.js//创建菜单/*vscode里面实现代码提示功能：在当前项目安装一下electron模块。
顶部菜单
main/menu.js
//创建菜单/* var electron=require('electron'); var Menu=electron.Menu; vscode里面实现代码提示功能： 在当前项目安装一下 electron模块。 "dependencies": { "electron": "^2.0.4" } https://electronjs.org/docs/api/menu-item */ const { Menu } = require('electron'); //订单菜单 var template =[ { label: '文件', submenu: [ { label: '新建文件', accelerator: 'ctrl+n', click: function() { console.log('ctrl+n'); } }, { label: '新建窗口', click: function() { console.log('new window'); } } ] }, { label: '编辑', submenu: [ { label: '复制', role: 'copy'}, { label: '截切', role: 'cut'} ] } ] var m =Menu.buildFromTemplate(template); Menu.setApplicationMenu(m);
引入menu.js到主进程index.js
//主进程 //引入electron模块 var electron =require('electron'); //nodejs中的path模块 var path=require('path'); //创建electron引用 控制应用生命周期的模块 var app=electron.app; //创建electron BrowserWindow的引用 窗口相关的模块 var BrowserWindow=electron.BrowserWindow; //变量 保存对应用窗口的引用 var mainWindow=null; functioncreateWindow(){ //创建BrowserWindow的实例 赋值给mainWindow打开窗口 //软件默认打开的宽度高度 {400,height:400} mainWindow=new BrowserWindow({800,height:600,webPreferences: { nodeIntegration: true}}); mainWindow.loadURL(path.join('file:',__dirname,'index.html')); //开启渲染进程中的调试模式 mainWindow.webContents.openDevTools(); console.log(path.join('file:',__dirname,'index.html')); mainWindow.on('closed',()=>{ mainWindow=null; }) //执行设置菜单操作 require('./main/menu.js'); } app.on('ready',createWindow) //当所有的窗口被关闭后退出应用 Quit when all windows are closed. app.on('window-all-closed', () =>{ //On OS X it is common for applications and their menu bar //to stay active until the user quits explicitly with Cmd + Q //对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出 if (process.platform !== 'darwin') { app.quit(); } }); //macos app.on('activate', () =>{ //对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他 if (mainWindow === null) { createWindow(); } });
右键菜单
render/menu.js
//创建菜单/*vscode里面实现代码提示功能： 在当前项目安装一下 electron模块。 "dependencies": { "electron": "^2.0.4" } https://electronjs.org/docs/api/menu-item */ var remote=require('electron').remote; const Menu=remote.Menu; //定义菜单 var template=[ { label:'文件', submenu:[ { label:'新建文件', accelerator:'ctrl+n', click:function(){ console.log('ctrl+n'); } }, { label:'新建窗口', click:function(){ console.log('new window'); } } ] }, { label:'编辑', submenu:[ { label:'复制', role:'copy'}, { label:'截切', role:'cut'} ] } ] var m=Menu.buildFromTemplate(template); Menu.setApplicationMenu(m); //右键菜单 window.addEventListener('contextmenu',function(e){ //alert('1212') //阻止当前窗口默认事件 e.preventDefault(); //在当前窗口点击右键的时候弹出 定义的菜单模板 m.popup({window:remote.getCurrentWindow()}) },false)
引入到：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>.content{
100%;
height: 400px;
background: orange;
overflow-y: auto;
}
</style>
</head>
<body>
<button id="btn">打开新窗口
</button>
<input type="text" />
<br>
<p> 我是一个测试内容</p>
<script src="http://t.zoukankan.com/renderer/menu.js"></script>
我是内容
</body>
</html>