深入解析max-mapper/menubar项目：Electron菜单栏应用开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00219/article/details/148465769

深入解析max-mapper/menubar项目：Electron菜单栏应用开发指南

menubar ➖ high level way to create menubar desktop applications with electron 项目地址: https://gitcode.com/gh_mirrors/me/menubar

项目概述

max-mapper/menubar是一个基于Electron的高层封装库，专门用于简化菜单栏(menubar)应用程序的开发流程。它为开发者提供了创建系统托盘应用的标准模板，只需关注核心业务逻辑的实现，而无需处理底层复杂的Electron API调用。

核心特性

跨平台支持：完美兼容macOS、Windows和主流Linux发行版
轻量高效：压缩后仅3.6KB大小，性能开销极小
简单易用：只需提供HTML入口文件即可快速搭建应用
完整生命周期：提供从创建到销毁的完整事件监听机制
高度可定制：支持自定义图标、窗口位置、大小等各类参数

快速入门

安装步骤

yarn add menubar

基础示例

创建两个基本文件：

index.html - 应用界面
app.js - 主逻辑文件

// app.js
const { menubar } = require('menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('应用程序已就绪');
  // 在此处添加应用逻辑
});

运行应用：

electron app.js

核心API详解

Menubar类实例

通过menubar()函数返回的实例包含以下重要属性和方法：

app：Electron的App实例
window：BrowserWindow实例，代表应用窗口
tray：系统托盘图标实例
positioner：窗口定位工具
showWindow()/hideWindow()：显示/隐藏窗口
setOption()/getOption()：动态修改/获取配置

配置选项

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

const mb = menubar({
  dir: process.cwd(), // 应用根目录
  index: 'file://path/to/index.html', // 入口HTML路径
  browserWindow: {
    width: 400,
    height: 400,
    alwaysOnTop: false
  },
  icon: 'icon.png', // 托盘图标
  tooltip: '应用提示', // 悬停文字
  preloadWindow: false, // 是否预加载窗口
  showOnAllWorkspaces: true, // 多工作区显示
  windowPosition: 'trayCenter' // 窗口位置
});