electron添加右键菜单（和webpack使用时又如何）

2019-06-22 本文已影响0人旅行者xy

electron借助浏览器和nodejs可以实现跨平台的桌面应用，这个优点还是很吸引人的。所以想着用electron打包个桌面玩玩，谁曾想打包后的页面狂点某个input框的右键，居然不能显示右键菜单，进行复制粘贴。真的气人。

去官方文档翻了翻，看的一头雾水，搜下前辈们的经验，发现网上的也是乱七八糟，没有找到想要的。不过，经过一方摸索，大致知道了该怎么实现了。

实现思路

在要实现右键菜单的标签上实现右键点击后，调用一个函数，借助electron提供的主进程（ipcMain）和渲染进程（ipcRenderer）通信的两个模块（ipc通信），将点击事件发送到主进程，主进程在win上渲染出右键菜单。

步骤
1、在html页面上对html标签元素，捕捉想要实现菜单的标签的右键点击事件，我这里要实现的是input标签，所以捕捉事件：oncontextmenu，如下：
<input type="url" oncontextmenu="showRightClickMenu()" />，
然后在页面调用的js文件里或<script>里实现showRightClickMenu函数，我这里是html页面调用了一个js文件，所以以这个为例，在js文件中，添加如下代码：

const {ipcRenderer} = require('electron')
window.showRightClickMenu = function ()
{
    console.log('1232300')
    ipcRenderer.send('sigShowRightClickMenu');
}

对了，这里还有一个坑要注意，因为通过electron打包后的，这里html和js是独立的，直接showRightClickMenu = function ()这样定义函数，html页面调不到，会提示函数未定义，所以需要定义到全局里，使用window关键字
2、上面通过ipcRenderer.send将事件发送到主进程，主进程需要去进行捕捉，然后添加菜单，代码如下：

const {app, ipcMain, BrowserWindow, Menu, MenuItem} = require('electron')
ipcMain.on('sigShowRightClickMenu', (event) => {
    // 生成菜单
  const menu = new Menu();
  menu.append(new MenuItem({label:'复制', 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组合开发的话，还要一个关键点要注意，就是需要在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的话，也会提示错误

这样就实现了在input标签点击鼠标右键弹出菜单的功能了。

官方也提供了另外一种方式，通过remote模块，看起来也挺简单的，但是我没去试。

菜单添加项，参考官方：
https://electronjs.org/docs/api/menu

electron添加右键菜单（和webpack使用时又如何）

猜你喜欢

热点阅读