Electron 创建菜单和基本使用

Question

一、编写菜单模版

在 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 . 之后，就可以看到效果了，当然我们还可以绑定快捷键