electron菜单的基本使用
对electron了解之后,让我们学习创建一个窗口,使用自己的编写的窗口
搭建环境可以看https://www.cnblogs.com/zhoulifeng/p/12306050.html
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 }) }, }