electron借助瀏覽器和nodejs可以實現(xiàn)跨平臺的桌面應(yīng)用屠凶，這個優(yōu)點還是很吸引人的助赞。所以想著用electron打包個桌面玩玩熬拒，誰曾想打包后的頁面狂點某個input框的右鍵语御，居然不能顯示右鍵菜單峻贮，進行復(fù)制粘貼。真的氣人应闯。
去官方文檔翻了翻纤控，看的一頭霧水，搜下前輩們的經(jīng)驗碉纺，發(fā)現(xiàn)網(wǎng)上的也是亂七八糟船万，沒有找到想要的。不過骨田，經(jīng)過一方摸索耿导，大致知道了該怎么實現(xiàn)了。
- 實現(xiàn)思路
在要實現(xiàn)右鍵菜單的標(biāo)簽上實現(xiàn)右鍵點擊后态贤，調(diào)用一個函數(shù)舱呻，借助electron提供的主進程（ipcMain）和渲染進程（ipcRenderer）通信的兩個模塊（ipc通信），將點擊事件發(fā)送到主進程悠汽，主進程在win上渲染出右鍵菜單箱吕。
- 步驟
1、在html頁面上對html標(biāo)簽元素柿冲，捕捉想要實現(xiàn)菜單的標(biāo)簽的右鍵點擊事件殖氏，我這里要實現(xiàn)的是input標(biāo)簽，所以捕捉事件：oncontextmenu姻采，如下：
<input type="url" oncontextmenu="showRightClickMenu()" />雅采，
然后在頁面調(diào)用的js文件里或<script>里實現(xiàn)showRightClickMenu函數(shù)爵憎，我這里是html頁面調(diào)用了一個js文件，所以以這個為例婚瓜，在js文件中宝鼓，添加如下代碼：
const {ipcRenderer} = require('electron')
window.showRightClickMenu = function ()
{
console.log('1232300')
ipcRenderer.send('sigShowRightClickMenu');
}
對了，這里還有一個坑要注意巴刻，因為通過electron打包后的愚铡，這里html和js是獨立的，直接showRightClickMenu = function ()這樣定義函數(shù)胡陪，html頁面調(diào)不到沥寥，會提示函數(shù)未定義，所以需要定義到全局里柠座，使用window關(guān)鍵字
2邑雅、上面通過ipcRenderer.send將事件發(fā)送到主進程，主進程需要去進行捕捉妈经，然后添加菜單淮野，代碼如下：
const {app, ipcMain, BrowserWindow, Menu, MenuItem} = require('electron')
ipcMain.on('sigShowRightClickMenu', (event) => {
// 生成菜單
const menu = new Menu();
menu.append(new MenuItem({label:'復(fù)制', role: 'copy' }));
menu.append(new MenuItem({label:'粘貼', role: 'paste' }));
menu.append(new MenuItem({label:'剪切', role: 'cut' }));
menu.append(new MenuItem({ label:'全選', role: 'selectall' }));
const win = BrowserWindow.fromWebContents(event.sender);
menu.popup(win);
});
- 注意，如果是使用了webpack+electron組合開發(fā)的話吹泡，還要一個關(guān)鍵點要注意骤星，就是需要在webpack.config.js里修改target，將node改為electron-renderer爆哑，否者會報錯（大致是提示你需要重新安裝electron洞难，搞得一頭霧水，真實原因是用到了ipc通信揭朝，所有的告訴webpack這個信息）队贱。如下：
var path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
// target: 'node',
target: 'electron-renderer',
}
這里和指定target為node是一個道理，因為nodejs里若是用到了fs等模塊萝勤，同樣露筒，不指定為node的話呐伞，也會提示錯誤
這樣就實現(xiàn)了在input標(biāo)簽點擊鼠標(biāo)右鍵彈出菜單的功能了敌卓。
官方也提供了另外一種方式，通過remote模塊伶氢，看起來也挺簡單的趟径，但是我沒去試。
菜單添加項癣防，參考官方：
https://electronjs.org/docs/api/menu
