頂部菜單
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打開窗口 //軟件默認打開的寬度高度 {width:400,height:400} mainWindow=new BrowserWindow({width: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{
width: 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>