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