顶部菜单
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; function createWindow(){ //创建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="renderer/menu.js"></script>
我是内容
</body>
</html>