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