從零開始學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模塊，我會在接下來的內容中繼續為大家說一下，先忙工作去了。。。