electron菜单的基本使用

Posted zhoulifeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
                })
            },
        }

  

以上是关于electron菜单的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

06.electron-(自定义右键菜单)

Android 使用两个不同的代码片段获取当前位置 NULL

vscode代码片段建议bug

如何从 Electron 应用程序中隐藏菜单栏?

Electron setLoginItemSettings 在托盘菜单应用程序上不起作用

上下文菜单不适用于两个片段