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