0
点赞
收藏
分享

微信扫一扫

Electron教程(六)应用菜单设置例子

Electron教程(六)应用菜单设置例子

Electron教程(一)什么是 Electron,由来、适用场景 和 Electron 的环境搭建

Electron教程(二)启动过程:主进程,渲染进程是什么

Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程

Electron教程(四)使用 Vue Browser 版,创建小工具应用

Electron教程(五)读取本地文件内容, icpMain icpRenderer 之间的交互

Electron教程(六)应用菜单设置例子

Electron教程(七)结语

官方文档说明: ​​https://www.electronjs.org/docs/latest/api/menu​​

这里放一个我写的一个项目的菜单例子,用作参考

app.on('ready', ()=>{
createMainWindow() // 执行创建主窗口的一些动作
createMenu() // 创建菜单
})
// 创建 menu
function createMenu() {
let menuStructure = [
{
label: '配置',
submenu: [
{
label: '配置',
click() {
createConfigWindow()
}
},
{
label: '刷新', // 刷新页面
click() {
refreshWindows()
}
},
{
label: '打开调试窗口',
click(menuItem, targetWindow) {
targetWindow.openDevTools()
}
},
{
label: '关闭调试窗口',
click(menuItem, targetWindow) {
targetWindow.closeDevTools()
}
},
]
},
{
label: '编辑',
role: 'editMenu'
},
{
label: '文件夹',
submenu: [
{label: '打开 Rime 配置文件夹', click() {shell.openPath(getRimeConfigDir())}},
{label: '打开 Rime 程序文件夹', click() {shell.openPath(getRimeExecDir())}},
{
label: '打开工具配置文件夹', click() {
let configDir = path.join(os.homedir(), CONFIG_FILE_PATH)
shell.openPath(configDir)
}
},
]
},
{
label: '码表处理工具',
submenu: [
{
label: '码表处理工具',
click() {
showToolWindow()
}
},
]
},
{
label: '关于',
submenu: [
{label: '最小化', role: 'minimize'},
{label: '关于', role: 'about'},
{type: 'separator'},
{label: '退出', role: 'quit'},
]
},
]
let menu = Menu.buildFromTemplate(menuStructure)
Menu.setApplicationMenu(menu)
}

效果如下:
Electron教程(六)应用菜单设置例子_配置文件


举报

相关推荐

0 条评论