從零開始學Electron筆記（二）

豐寸發表於2020-07-08
筆記

在之前的文章我們簡單介紹了一下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 程式碼：

 1 const {Menu} = require('electron');
 2 let template = [
 3     {
 4         label: '設定',
 5         submenu: [
 6             {label: '快捷鍵設定'},
 7             {label: '系統設定'}
 8         ]
 9     },
10     {
11         label: '關於',
12         submenu: [
13             {label: '關於Electron'},
14             {label: '關於Node'}
15         ]
16     },
17 ];
18 
19 const menu = Menu.buildFromTemplate(template);
20 Menu.setApplicationMenu(menu);

在上面的程式碼中，我們定一了一個陣列，其中label為選單的名稱，submenu為選單底下的內容，即二級選單，當然也可以繼續巢狀submenu，就像我們平常寫的樹狀結構一樣。

然後我們將menu.js 引入到我們到主程式中，即index.js中：

 1 const {app, BrowserWindow} = require('electron')
 2 
 3 function createWindow() {
 4     // 建立瀏覽器視窗
 5     const win = new BrowserWindow({
 6         width: 800,
 7         height: 600,
 8         webPreferences: {
 9             nodeIntegration: true
10         }
11     })
12     
13     
14     
15     /**
16      * 引入 menu.js
17      */
18     require('./menu');
19     
20     
21     
22     
23     // 並且為你的應用載入index.html
24     win.loadFile('index.html')
25 
26     // 開啟開發者工具
27     win.webContents.openDevTools()
28 }
29 
30 // Electron會在初始化完成並且準備好建立瀏覽器視窗時呼叫這個方法
31 // 部分 API 在 ready 事件觸發後才能使用。
32 app.whenReady().then(createWindow)
33 
34 //當所有視窗都被關閉後退出
35 app.on('window-all-closed', () => {
36     // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
37     // 否則絕大部分應用及其選單欄會保持啟用。
38     if (process.platform !== 'darwin') {
39         app.quit()
40     }
41 })
42 
43 app.on('activate', () => {
44     // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
45     // 通常在應用程式中重新建立一個視窗。
46     if (BrowserWindow.getAllWindows().length === 0) {
47         createWindow()
48     }
49 })
50 
51 // 您可以把應用程式其他的流程寫在在此檔案中
52 // 程式碼 也可以拆分成幾個檔案，然後用 require 匯入。

至此我們就完成了選單的修改配置，如下：

需要注意的是我們的Mac電腦選單的第一個label為系統自定義的名稱，所以我們的“設定”二字並沒有將其替換掉。

在上面的程式碼中我們已經重新定義了我們的選單欄，接下來我們對選單欄的選單進行事件繫結，使其能夠作為一個真正的功能使用。

官方為我們的每個選單提供了一個click方法來幫助我們自定義選單的繫結事件，如下：

 1 const {Menu, dialog} = require('electron');
 2 const pjson = require('./package.json');
 3 let template = [
 4     {
 5         label: '設定',
 6         submenu: [
 7             {label: '快捷鍵設定'},
 8             {label: '系統設定'}
 9         ]
10     },
11     {
12         label: '關於',
13         submenu: [
14             {
15                 label: '關於Electron',
16                 // 繫結click方法
17                 click: () => {
18                     dialog.showMessageBox({
19                         message: '當前版本：' + pjson.version,
20                     }).then(result => {
21                         console.log(result)
22                     })
23                 }
24             },
25             {label: '關於Node'},
26         ]
27     },
28 ];
29 
30 const menu = Menu.buildFromTemplate(template);
31 Menu.setApplicationMenu(menu);

在上面的程式碼中，我們在其中一個submenu子項中新增了一個click事件，並註冊了一個Electron為我們提供的dialog方法來獲取到package.json中的version資訊，通過對話方塊的形式為我們展示出來，最後的結果如下：

至此我們就實現來Electron的選單建立和事件繫結，其中我們提到了remote模組和dialog模組，我會在接下來的內容中繼續為大家說一下，先忙工作去了。。。

 

相關文章