1.1.3 Electron的菜单使用

1 创建一个菜单模板

新建main目录，新建menu.js

编写menu.js

const {Menu, BrowserWindow} = require('electron')

//菜单的模板

var template = [{

label: '凤来仪洗浴',

submenu: [{

label: '精品SPA',

click:()=>{

var win=new BrowserWindow({

width:500,

height:500,

webPreferences: {

nodeIntegration: true,

contextIsolation: false,

enableRemoteModule: true

}

})

win.loadFile('yellow.html')

win.on('closed',()=>{

win=null

})

}

},

{ label: '泰式按摩' }

]

},

{

label: '大浪淘沙洗浴',

submenu: [

{label: '牛奶玫瑰' },

{label: '爱情转角'}

]

}

]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)

我们只在 '精品SPA'里面添加了点击时间打开yellow.html 页面

3 修改main.js

在main.js中引入菜单模板

var electron =require('electron')

var app=electron.app

var BrowserWindow=electron.BrowserWindow// 控制窗口的引用

var mainWindow=null//打开的主窗口

app.on('ready',()=>{

mainWindow=new BrowserWindow({

webPreferences: {

nodeIntegration: true,

contextIsolation: false,

enableRemoteModule: true

},

width:800,

height:800

})

require('@electron/remote/main').initialize() //添加语句

require('@electron/remote/main').enable(mainWindow.webContents) //添加语句

mainWindow.loadFile('demo2.html')

require('./main/menu.js')

mainWindow.on('closed',()=>{

mainWindow=null

})

})

4 运行程序