从零开始学Electron笔记（二）

在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用，接下来我们继续说一下Electron的菜单创建和事件绑定。

我们接上一章的代码继续编写，上一章代码 https://www.cnblogs.com/weijiutao/p/13195306.html

上一章我们简单写了一个demo并跑了起来，我们会发现它和我们电脑上的其他程序软件一样有自带的菜单，如下图：

本人使用的是Mac，菜单在吸顶栏上，Windows电脑的话会跟随程序，一般的电脑程序都会有这样的菜单存在，方便我们进行一些快捷操作，接下来我们就对这个菜单栏进行一下创建定制。

官方关于Menu的解释地址：https://www.electronjs.org/docs/api/menu

从官方解释可以看出Menu为主进程的模块，仅在主进程（ main process）中可用, 但您也可以在渲染进程（render process）中通过  remote  模块使用它。下一章我们可以说一下这个 remote 模块。

接上一章的目录下创建一个 menu.js 的文件，目录如下：

 

 

其中 menu.js 代码：

const {Menu} = require('electron');
let template = [
    {
        label: '设置',
        submenu: [
            {label: '快捷键设置'},
            {label: '系统设置'}
        ]
    },
    {
        label: '关于',
        submenu: [
            {label: '关于Electron'},
            {label: '关于Node'}
        ]
    },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

在上面的代码中，我们定一了一个数组，其中label为菜单的名称，submenu为菜单底下的内容，即二级菜单，当然也可以继续嵌套submenu，就像我们平常写的树状结构一样。

然后我们将menu.js 引入到我们到主进程中，即index.js中：

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

function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
    
    
    
    /**
     * 引入 menu.js
     */
    require('./menu');
    
    
    
    
    // 并且为你的应用加载index.html
    win.loadFile('index.html')

    // 打开开发者工具
    win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

至此我们就完成了菜单的修改配置，如下：

需要注意的是我们的Mac电脑菜单的第一个label为系统自定义的名称，所以我们的“设置”二字并没有将其替换掉。

在上面的代码中我们已经重新定义了我们的菜单栏，接下来我们对菜单栏的菜单进行事件绑定，使其能够作为一个真正的功能使用。

官方为我们的每个菜单提供了一个click方法来帮助我们自定义菜单的绑定事件，如下：

const {Menu, dialog} = require('electron');
const pjson = require('./package.json');
let template = [
    {
        label: '设置',
        submenu: [
            {label: '快捷键设置'},
            {label: '系统设置'}
        ]
    },
    {
        label: '关于',
        submenu: [
            {
                label: '关于Electron',
                // 绑定click方法
                click: () => {
                    dialog.showMessageBox({
                        message: '当前版本：' + pjson.version,
                    }).then(result => {
                        console.log(result)
                    })
                }
            },
            {label: '关于Node'},
        ]
    },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

在上面的代码中，我们在其中一个submenu子项中添加了一个click事件，并注册了一个Electron为我们提供的dialog方法来获取到package.json中的version信息，通过对话框的形式为我们展示出来，最后的结果如下：

至此我们就实现来Electron的菜单创建和事件绑定，其中我们提到了remote模块和dialog模块，我会在接下来的内容中继续为大家说一下，先忙工作去了。。。