從零開始學Electron筆記（四）

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

在之前的文章我們介紹了一下Electron的這個remote模組，接下來我們繼續說一下Electron的右鍵選單的製作。

在我們日常我們使用的軟體中都會存在右鍵選單的情況，比如我們用到的瀏覽器，開發所用到的程式碼編輯器都有右鍵選單，可以方便我們的日常操作，接下來我們就來看一下用Electron如何實現右鍵選單，接上一章的目錄：

 

 接下來我們要在idnex.html 中使用右鍵選單，右鍵選單其實和我們之前所說過的頂部選單欄其實是差不多的，所以我就引用了一下在介紹選單欄時的一些程式碼並進行了改進，如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hello world</title>
 6 </head>
 7 <body>
 8 <div>
 9     <button id="btn">點我開啟其他頁面</button>
10     <script>
11 
12         const {remote} = require('electron');
13         const pjson = require('./package.json');
14 
15         let rightTemplate = [{
16             label: '設定',
17             submenu: [
18                 {label: '快捷鍵設定'},
19                 {label: '系統設定'}
20             ]
21         }, {
22             label: '關於',
23             submenu: [
24                 {
25                     label: '關於Electron',
26                     // 快捷鍵設定
27                     accelerator: 'command+e',
28                     // 繫結click方法
29                     click: () => {
30                         remote.dialog.showMessageBox({
31                             message: '當前版本：' + pjson.version,
32                         }).then(result => {
33                             console.log(result)
34                         })
35                     },
36 
37                 },
38                 {
39                     label: '關於Node',
40                 },
41             ]
42         },];
43 
44         window.addEventListener('contextmenu', (e) => {
45             e.preventDefault();
46             const menu = remote.Menu.buildFromTemplate(rightTemplate);
47             menu.popup({window:remote.getCurrentWindow()});
48         })
49     </script>
50 </div>
51 </body>
52 </html>

在上面的程式碼中，我們通過window.addEventListerner 來監聽滑鼠右擊事件 contextmenu ，然後用到了我們上一章介紹的 remote 模組，因為我們是在渲染程式 idnex.html 中進行操作，所以必須要用到 remote 模組，我們定義了一個和之前講到的選單欄一樣的一個選單，並切有click事件，此次還新增來一個屬性accelerator的屬性，其實就是一個快捷鍵，由於本人用的是Mac，所以使用的是command的鍵盤按鈕，相當於Windows的ctrl鍵，接下來我們看一下頁面效果：

 

 當我們單擊滑鼠右鍵時便會出現上面的選單，我們可以點選 “關於Electron” 按鈕或者直接使用快捷鍵 “command+e”，執行效果如下：

 

 跟我們之前講選單欄時的效果是一樣的，至此，我們便完成來一個簡單的右鍵選單任務，還是比較簡單的。

如果我們去閱讀Electron官方文件的話會發現裡面還有很多的方法共我們使用，但是閱讀官方文件還是很晦澀的，我們先從簡單的慢慢學習，然後逐步深入，最後達到融匯貫通，本人也是從零開始學習Electron，共同進步！

 

相關文章