在之前的文章我們介紹了一下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，共同進步！