Menubar是一个基于Electron的高层次菜单栏应用程序开发库,它提供了创建桌面菜单栏应用所需的完整API参考。这个全面的API手册将帮助开发者深入理解Menubar的所有功能模块和配置选项。🎯
Menubar类详解
Menubar类是整个库的核心,继承自EventEmitter,提供了创建和管理菜单栏应用程序的所有功能。
构造函数参数
app: Electron App实例options?: 可选的配置选项,类型为Partial<Options>
访问器属性
- app: 返回Electron App实例,定义在
src/Menubar.ts:47 - positioner: 窗口位置管理器实例,定义在
src/Menubar.ts:56 - tray: 系统托盘实例,定义在
src/Menubar.ts:69 - window: 浏览器窗口实例,定义在
src/Menubar.ts:83
核心方法
- getOption : 获取指定配置选项的值
- hideWindow: 隐藏菜单栏窗口
- setOption : 设置配置选项的值
- showWindow: 显示菜单栏窗口
Options接口配置详解
Options接口定义了Menubar的所有可配置选项,让开发者能够精细控制应用程序的行为。
主要配置属性
- dir: 应用程序源目录路径
- index: 要加载的HTML文件URL,可以是本地文件或远程地址
- browserWindow: 传递给BrowserWindow构造函数的选项
- icon: 菜单栏图标的路径或NativeImage对象
- tooltip: 托盘图标的工具提示文本
高级配置选项
- preloadWindow: 预加载窗口以提高响应速度
- showDockIcon: 控制应用程序坞图标的可见性
- showOnAllWorkspaces: 使窗口在所有工作区可用
- showOnRightClick: 右键点击显示窗口
- windowPosition: 设置窗口位置,支持多种定位方式
事件系统完整说明
Menubar类是一个事件发射器,提供了丰富的事件监听机制:
- ready: 当菜单栏的托盘图标创建并初始化完成时触发
- create-window: 在创建新BrowserWindow之前触发
- before-load: 创建窗口后,加载URL之前触发
- after-create-window: 所有窗口初始化代码完成后触发
- show: 在window.show()调用之前触发
- after-show: 在window.show()调用之后触发
- hide: 在window.hide()调用之前触发(窗口失去焦点时)
- after-hide: 在window.hide()调用之后触发
- after-close: 在.window属性被删除后触发
- focus-lost: 当设置了always-on-top选项且用户点击其他区域时触发
实用技巧与最佳实践
窗口管理技巧
使用mb.on('after-create-window', callback)在应用加载后执行操作,例如打开开发者工具或加载不同URL。
性能优化建议
- 使用
preloadWindow: true预加载窗口以提高响应速度 - 设置合适的窗口尺寸避免资源浪费
- 利用图标缓存机制提高渲染性能
跨平台兼容性说明
Menubar支持macOS、Windows和大多数Linux发行版。下表展示了不同系统下的运行效果:
![]() | ![]() | ![]() |
|---|---|---|
| macOS Mojave 10.14 | Windows 10 | Ubuntu 18.04 |
配置示例与使用场景
基础配置示例
const mb = menubar({
dir: __dirname,
index: 'file://' + __dirname + '/index.html',
browserWindow: {
width: 400,
height: 400,
alwaysOnTop: true
},
icon: path.join(__dirname, 'IconTemplate.png')
});
高级功能配置
- 原生菜单集成
- 多工作区支持
- 自定义窗口定位
- 响应式图标处理
这个完整的API参考手册为开发者提供了Menubar库的全面技术文档,帮助您快速上手并构建功能丰富的菜单栏应用程序。🚀
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考






