您的位置:首页 > 其它

electron菜单的基本使用

2020-02-29 21:24 113 查看

对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 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: