Electron开发笔记----前端小白开发桌面应用之路（三）顶部菜单和右键菜单的创建

顶部菜单的编辑

---

桌面应用的菜单是我们很常用的一个功能，大到各种应用，小到一个小小的记事本，都有自己的菜单，那么接下来就看看如何实现一个菜单

传入模板生成菜单

Electron提供了一个模块Menu来实现菜单功能，我们直接通过一个demo来演示

首先创建如图的目录

这里menu文件夹下的menu.js是用来写菜单的信息，包括菜单的内容，以及菜单的点击事件触发的回调，这里实际上是在主进程中调用的，但是为了可以区分功能和复用，我写在menu.js中，并在主进程中require它

主进程index.js

const {
    app, BrowserWindow } = require('electron')
    // app：管理Electron应用程序的声明周期
    // BrowserWindow负责创建窗口

let mainWindow = null // 要打开的主窗口应用

app.on('ready', () => {
    // 监听准备事件
    mainWindow = new BrowserWindow({
    // 传入对象设置窗口参数，这里设置了宽和高以及允许使用node的API
        width: 500,
        height: 500,
        webPreferences: {
   
            nodeIntegration: true
        }
    })
    require('./menu/menu.js')
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', () => {
    // 监听关闭时间
        mainWindow = null // 将窗口置为null，否则的话内存会一直被占用
    })
})

这里menu.js也不做过多解释了，其实看代码也已经很清晰了，唯一要说的是setApplicationMenu方法，它在macOS环境和Windows/Linux环境中的表现不同，在macOS中，会把传入的菜单menu设置为应用程序菜单，而在Windows/Linux中，menu会被设置为每个应用的顶部菜单。
menu.js

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

let template = [{
   
    label: '文件',
    submenu: [{
   
            label: '新建窗口',
            click: () => {
    // 添加点击对应的操作，这里为打开新的窗口
                let newWin = new BrowserWindow({
   
                    width: 500,
                    height: 500,
                    webPreferences: {
   
                        nodeIntegration: true
                    }
                })
                newWin.loadFile('index2.html')
                newWin.on('closed',