继续案例electron系列文章,本篇文章的内容是篇小小的水文。不过,苏南大叔就是想写这样的一篇水文。哈哈~ 讲述的内容是:如何在electron的渲染进程中,定义右键菜单?当然书面语上来说的话,就是上下文菜单。在阅读本篇内容之前,请阅读下面的前置阅读内容:

苏南大叔:electron程序,如何在渲染进程中定义上下文菜单? - electron-context-menu-renderer
electron程序,如何在渲染进程中定义上下文菜单?(图2-1)

本文测试环境:macelectron@5.0.8.在官方的范例里面,上下文菜单都是在主进程中定义的,但是是在渲染进程中触发的。两者使用ipc进行关联处理。那么,本文中,苏南大叔的假设就是:包括上下文菜单的定义,上述代码都写定义在渲染进程中,这就是本文的内容。

基本代码

在渲染进程中定义上下文菜单的范例代码如下:

const { remote } = require('electron');
const { Menu, MenuItem } = remote;

//右键餐单
const menu = new Menu();
menu.append(new MenuItem({
    label: '菜单一',
    click: function () {
        console.log('点击了菜单一')
    }
}));
menu.append(new MenuItem({
    type: 'separator'
}));
menu.append(new MenuItem({
    label: '菜单二',
    click: function () {
        console.log('点击了菜单二')
    }
}));
window.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.popup({
        window: remote.getCurrentWindow()
    })
}, false)

苏南大叔:electron程序,如何在渲染进程中定义上下文菜单? - electron-menu-renderer-code
electron程序,如何在渲染进程中定义上下文菜单?(图2-2)

相关链接

结束语

目前来看,菜单的定义,可以从template定义,也可以从menuitem定义。同时,可以从主进程定义,也可以从渲染进程定义。细节上略有不同,但是大道至简。基本上原理类似。

更多electron相关代码文章,请查看苏南大叔的博客链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: