。

菜单可以帮助用户快速找到和执行命令#xff0c;而不需要记住复杂的快捷键#xff0c;通过将相关功能组织在一起#xff0c;用户可以更容易地发现和使用应用程序…

完成初始应用的创建Electron桌面应用开发创建应用随后我们就可以自定义软件的菜单了。

菜单可以帮助用户快速找到和执行命令而不需要记住复杂的快捷键通过将相关功能组织在一起用户可以更容易地发现和使用应用程序的各种特性。

同时菜单允许开发者提供更多的功能选项而不必担心界面会因此变得拥挤或难以导航比如下拉菜单、弹出菜单等可以在有限的空间内提供大量的选项。

取消顶部菜单显示

这里可以使用两种常用的方法第一种是在窗口创建函数中设置frame:

false

true},});win.loadFile(index.html);win.on(closed,

{win

createWindow);app.on(window-all-closed,

{if

});这样大小化和关闭按钮、标题也全部消失了所以只适合个别情况使用。

第二种是在创建窗口函数中加入Menu.setApplicationMenu(null);设置这样可以保留标题等内容:

const

true},});win.loadFile(index.html);Menu.setApplicationMenu(null);win.on(closed,

{win

createWindow);app.on(window-all-closed,

{if

这里我们可以在主文件main.js中直接添加自定义菜单的代码也可以新建一个menu.js文件随后在main.js中进行引用(个人推荐做法)

const

{console.log(菜单被点击了);}},在main.js中直接添加菜单代码的格式如下

const

true},});win.loadFile(index.html);win.on(closed,

{win

require(electron).shell.openExternal(https://example.com/help)

];const

Menu.buildFromTemplate(template);

Menu.setApplicationMenu(menu);app.on(ready,

createWindow);app.on(window-all-closed,

{if

});这里我们还是推荐使用将创建菜单的代码转移到其他文件中比如新建一个menu.js这样可以更加方便的进行代码编写和问题排查

main.js:

true},});win.loadFile(index.html);win.on(closed,

{win

Menu.buildFromTemplate(menuTemplate(win));Menu.setApplicationMenu(menu);

}app.on(ready,

createWindow);app.on(window-all-closed,

{if

require(electron)module.exports

function

require(electron).shell.openExternal(https://example.com/help)

}}]return

上下文菜单通常在用户右键点击某个元素时显示通常通过监听事件来创建和显示上下文菜单。

const

./preload.js},});win.loadFile(index.html);const

menu

Menu.buildFromTemplate(menuTemplate(win));Menu.setApplicationMenu(menu);win.on(closed,

{win

createWindow);app.on(window-all-closed,

{if

document.addEventListener(DOMContentLoaded,

});使用preload脚本处理上下文菜单的preload.js

用于安全地暴露API给渲染进程:

require(electron);contextBridge.exposeInMainWorld(electronAPI,

{send:

向主进程发送消息ipcRenderer.send(channel,

data);},receive:

接收来自主进程的消息ipcRenderer.on(channel,

(event,

require(electron)module.exports

function

require(electron).shell.openExternal(https://example.com/help)

}}]return

href./style.csstitleGGBond勇猛无敌/title

/head

在使用nodeIntegration时需要禁用contextIsolationpreload:

__dirname

使用preload脚本处理上下文菜单},});win.loadFile(index.html);win.on(closed,

{win

Menu.buildFromTemplate(menuTemplate(win));Menu.setApplicationMenu(menu);

设置为应用菜单

createWindow);app.on(window-all-closed,

{if

});使用preload脚本处理上下文菜单的preload.js使用contextBridge来安全地暴露API给渲染进程允许渲染进程调用showPopupMenu方法。

:

const

require(electron);contextBridge.exposeInMainWorld(electronAPI,

{showPopupMenu:

{ipcRenderer.invoke(show-popup-menu,

y);}

document.addEventListener(DOMContentLoaded,

{document.body.addEventListener(click,

(event)

{window.electronAPI.showPopupMenu(event.x,

event.y);});

require(electron)module.exports

function

require(electron).shell.openExternal(https://example.com/help)

}}]return

href./style.csstitleGGBond勇猛无敌/title

/head