Electron创建菜单和基本使用

一、编写菜单模版

在Electron中编写菜单，需要先建立一个模板，这个目标很类似我们JSON或者类的数组。

我们打开项目，在项目的根目录下新建一个文件夹main，意思是主进程中用到的代码我们都写到这里。

然后新建一个menu.js文件,然后编写如下代码。

const { Menu } = require('electron');

var template = [
    {
        label:'凤来怡洗浴会所',
        submenu:[
            {label:'精品SPA'},
            {label:'泰式按摩'}
        ]

    },
    {
        label:'大浪淘沙洗浴中心',
        submenu:[
            {label:'牛奶玫瑰浴'},
            {label:'爱情拍拍手'}
        ]
    }
];

var m = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);

然后再打开主进程main.js文件，在ready生命周期中，直接加入下面的代码，就可以实现自定义菜单了。

require('./main/menu.js')

需要注意的是，Menu属于是主线程下的模块，所以只能在主线程中使用，这个要记清楚。

二、使用菜单打开新窗口

有了菜单之后，可以在菜单中加入click事件，代码如下:

const { Menu ,BrowserWindow} = require('electron');


var template = [
    {
        label:'凤来怡洗浴会所',
        submenu:[
            {
                label:'精品SPA',
                //主要代码--------------start
                click:()=>{
                    win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences:{ nodeIntegration:true}
                    });
                    win.loadFile('yellow.html');
                    win.on('closed',()=>{
                        win = null
                    })

                }
                //主要代码----------------end
            },
            {label:'泰式按摩'}
        ]

    },
    {
        label:'大浪淘沙洗浴中心',
        submenu:[
            {label:'牛奶玫瑰浴'},
            {label:'爱情拍拍手'}
        ]
    }
];

var m = Menu.buildFromTemplate(template);

Menu.setApplicationMenu(m);

这时候我们打开终端输入electron .之后，就可以看到效果了，当然我们还可以绑定快捷键