electron菜单的基本使用

对electron了解之后，让我们学习创建一个窗口，使用自己的编写的窗口
搭建环境可以看 查看

Menu菜单

创建一个menu.js文件，编写一下代码，结构相当于JSON格式的

const {
Menu
} = require('electron')
const template = [{
label: '首页'
},
{
label: '新闻资讯',
submenu: [{
label: '国内新闻',
submenu: [{
label: '北京新闻'
}, {
label: '河南新闻'
}]
}, {
label: '国际新闻'
}]
},
{
label: '娱乐',
submenu: [{
label: '音乐'
}, {
label: '电影'
}, {
label: '综艺'
}]
},
{
label: '科技',
submenu: [{
label: 'Al'
}, {
label: '手机'
}, {
label: '互联网'
}]
}
]

var list = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(list)

创建主入口文件main.js文件

在ready生命周期中，直接加入下面的代码，

const electron = require('electron') //引入electron模块
var app = electron.app //创建electron引用
var BrowserWindow = electron.BrowserWindow; //创建窗口引用

require(’./openMenu/menu.js’)

主入口js
var mainWindow = null; //声明要打开的主窗口
app.on('ready', () => {
//设置窗口的大小
mainWindow = new BrowserWindow({
width: 900,
height: 900,
webPreferences: {
nodeIntegration: true
}
})
require('./openMenu/menu.js')
mainWindow.loadFile('menu.html'); //要加载的文件

//监听关闭事件，在把主窗口设置位null
mainWindow.on('closed', () => {
mainWindow = null;
})
})

这时候我们打开终端输入

electron .

之后，就可以看到效果了，

如果想给菜单绑定点击事件，在menu.js引入

BrowserWindow

模块
如果要打开新的窗口，就必须要创建新的html文件

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

对需要的菜单绑定事件

{
label: '国际新闻',
click: () => {
var open = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
nodeIntegration: true
}
})
open.loadFile('yellow.html')
open.on('close', () => {
open = null
})
},
}
```
当我们点击国际新闻的时候
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200214133257946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvdmVybjY2,size_16,color_FFFFFF,t_70)
这就是菜单的时候效果

• 点赞 1
• 收藏
• 分享
• 文章举报

小周sri的码农 发布了72 篇原创文章 · 获赞 65 · 访问量 1294 私信 关注