electron添加右鍵菜單(和webpack使用時又如何)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蜗巧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蕾盯,更是在濱河造成了極大的恐慌幕屹,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異望拖,居然都是意外死亡渺尘,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門说敏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸥跟,“玉大人,你說我怎么就攤上這事盔沫∫阶桑” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵架诞,是天一觀的道長拟淮。 經(jīng)常有香客問我,道長侈贷,這世上最難降的妖魔是什么惩歉? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮俏蛮,結(jié)果婚禮上撑蚌,老公的妹妹穿的比我還像新娘。我一直安慰自己搏屑,他們只是感情好争涌,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辣恋,像睡著了一般亮垫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伟骨,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天饮潦,我揣著相機與錄音,去河邊找鬼携狭。 笑死继蜡,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的逛腿。 我是一名探鬼主播稀并,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼单默!你這毒婦竟也來了碘举?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤搁廓,失蹤者是張志新(化名)和其女友劉穎引颈,沒想到半個月后耕皮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡蝙场,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年明场,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片李丰。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡苦锨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出趴泌,到底是詐尸還是另有隱情舟舒,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布嗜憔,位于F島的核電站秃励,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏吉捶。R本人自食惡果不足惜夺鲜,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望呐舔。 院中可真熱鬧币励,春花似錦、人聲如沸珊拼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽澎现。三九已至仅胞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間剑辫,已是汗流浹背干旧。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留妹蔽,地道東北人椎眯。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像讹开,于是被迫代替她去往敵國和親盅视。 傳聞我的和親對象是個殘疾皇子捐名,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355