使用Menubar项目快速构建Electron菜单栏应用

使用Menubar项目快速构建Electron菜单栏应用

【免费下载链接】menubar 项目地址: https://gitcode.com/gh_mirrors/men/menubar

什么是Menubar项目

Menubar是一个基于Electron的高层封装库，专门用于简化创建系统菜单栏(托盘)应用的过程。开发者只需关注应用的核心功能，Menubar会处理底层的Electron初始化、窗口管理、位置计算等繁琐工作。

核心特性

1. 跨平台支持：完美兼容macOS、Windows和主流Linux发行版
2. 轻量级：压缩后仅3.6KB大小，仅有一个直接依赖项
3. 简单易用：通过简洁的API即可创建功能完整的菜单栏应用
4. 高度可定制：支持自定义图标、窗口大小、位置等参数

快速入门

安装

npm install menubar
# 或
yarn add menubar

基础使用

创建一个简单的菜单栏应用只需几行代码：

const { menubar } = require('menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('应用已准备就绪');
  // 在这里添加你的应用逻辑
});

项目结构

典型项目只需要：

• 一个主JavaScript文件(如app.js)
• 一个HTML文件(默认index.html)
• 应用图标文件(可选)

核心API详解

Menubar实例

menubar()函数返回的实例包含以下重要属性：

• app: 底层的Electron App实例
• window: 关联的BrowserWindow窗口实例
• tray: 系统托盘图标实例
• positioner: 窗口位置计算工具

常用方法：

• showWindow()/hideWindow(): 显示/隐藏应用窗口
• setOption(): 运行时修改配置选项

配置选项

创建Menubar时可传入的配置对象：

const mb = menubar({
  dir: __dirname,  // 应用根目录
  index: 'file://' + __dirname + '/custom.html', // 自定义入口文件
  browserWindow: {
    width: 500,    // 窗口宽度
    height: 300,   // 窗口高度
    alwaysOnTop: true // 窗口置顶
  },
  icon: 'icon.png', // 托盘图标
  tooltip: '我的应用', // 悬停提示文字
  preloadWindow: true, // 预加载窗口提升响应速度
  showOnRightClick: true // 右键点击显示窗口
});

生命周期与事件

Menubar实例是EventEmitter，提供完整生命周期事件：

mb.on('create-window', () => {
  // 窗口创建前
});

mb.on('after-create-window', () => {
  // 窗口创建完成后
  mb.window.openDevTools(); // 例如打开开发者工具
});

mb.on('show', () => {
  // 窗口显示前
});

mb.on('hide', () => {
  // 窗口隐藏前
});

实用技巧

1. 原生菜单集成：通过tray.setContextMenu()添加原生右键菜单
2. 避免窗口闪烁：禁用背景窗口可以提升体验

   mb.app.commandLine.appendSwitch('disable-backgrounding-occluded-windows', 'true');
   

3. 窗口位置控制：使用windowPosition选项精确控制窗口出现位置
4. 多工作区支持：macOS上设置showOnAllWorkspaces: true让窗口在所有工作区可见

兼容性说明

建议使用最新版本的Menubar与Electron搭配：

• Menubar 7.x → Electron 7.x
• Menubar 6.x → Electron 4.x/5.x/6.x(不推荐，存在安全隐患)
• 更旧版本不建议在生产环境使用

总结

Menubar项目极大简化了Electron菜单栏应用的开发流程，让开发者能够专注于应用功能而非底层实现。其轻量级设计、跨平台支持和简洁API使其成为构建系统托盘应用的理想选择。无论是简单的状态指示器还是复杂的后台应用，Menubar都能提供坚实的基础支持。

【免费下载链接】menubar 项目地址: https://gitcode.com/gh_mirrors/men/menubar