​
对electron了解之后，让我们学习创建一个窗口，使用自己的编写的窗口
搭建环境可以看electron环境搭建和使用 - 小周sri的码农 - 博客园

 

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
            })
        },
    }

　　

​