Electron应用打包：隐藏菜单、设置图标与窗口标题

10 次阅读

Electron作为一款基于Chromium和Node.js的跨平台桌面应用开发框架，能够帮助开发者快速构建Windows、macOS和Linux应用。在实际项目发布过程中，除了完成核心功能开发，还需要对应用外观和用户体验进行优化，例如隐藏默认菜单栏、设置应用图标以及修改窗口标题等。

这些细节看似简单，却直接影响最终应用的专业程度。一个完整的Electron应用通常需要经过打包配置，让用户看到的是一个具有独立品牌标识、简洁界面和符合系统习惯的桌面程序。

Electron默认菜单的问题

Electron创建窗口时，默认情况下会显示顶部菜单栏，其中包含File、Edit、View等基础菜单。

例如：

JavaScript
const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
    width: 1000,
    height: 700
});

运行后，窗口顶部会出现默认菜单。

对于开发阶段，这些菜单可以方便调试。但对于正式发布的软件，默认菜单可能会影响用户体验：

  • 暴露开发框架特征；

  • 占用窗口空间；

  • 与业务应用设计风格不一致；

  • 普通用户很少使用这些功能。

因此，在Electron应用打包发布前，通常需要隐藏默认菜单。

Electron隐藏菜单栏的方法

方法一：创建窗口时设置autoHideMenuBar

Electron提供了autoHideMenuBar属性，可以自动隐藏菜单栏。

示例：

JavaScript
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    autoHideMenuBar: true
});

设置后，窗口启动时不会显示菜单栏。

不过需要注意：

Windows系统中，按下Alt键仍然可能显示菜单栏。

如果希望完全关闭菜单，需要使用下面的方法。

方法二：通过setMenu(null)彻底隐藏

可以在窗口创建后移除菜单：

JavaScript
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
});

mainWindow.setMenu(null);

这种方式会直接删除窗口菜单。

对于企业应用、工具软件、后台管理客户端等场景，这种方式更加常见。

方法三：使用Menu模块清除菜单

如果项目中存在全局菜单配置，可以通过Electron的Menu模块处理。

示例：

JavaScript
const { app, Menu } = require('electron');

app.whenReady().then(() => {
    Menu.setApplicationMenu(null);
});

该方式会影响整个应用的菜单。

适用于：

  • 单窗口应用；

  • 不需要任何菜单交互的软件；

  • 打包后的正式版本。

Electron设置窗口标题

窗口标题通常显示在系统窗口顶部，同时也可能影响任务栏显示名称。

创建窗口时，可以通过title属性设置：

JavaScript
const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    title: '企业管理系统'
});

运行后，窗口标题会显示：

企业管理系统

动态修改窗口标题

部分应用需要根据页面内容动态修改标题，例如：

  • 文档编辑器；

  • 浏览器类应用；

  • 多页面管理系统。

可以调用：

JavaScript
mainWindow.setTitle('用户管理页面');

例如：

JavaScript
ipcMain.on('change-title', (event, title) => {
    mainWindow.setTitle(title);
});

然后通过渲染进程发送标题：

JavaScript
ipcRenderer.send('change-title', '订单中心');

这种方式适合前后端分离架构的Electron项目。

Electron设置应用图标

应用图标是桌面软件的重要标识，包括：

  • 窗口左上角图标；

  • Windows任务栏图标；

  • 安装包快捷方式图标；

  • macOS Dock图标。

Windows设置图标

创建窗口时，通过icon属性指定：

JavaScript
const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    icon: path.join(__dirname, 'logo.ico')
});

其中：

logo.ico

是Windows常用图标格式。

建议：

  • 使用256×256尺寸；

  • 保留透明背景；

  • 使用ICO格式。

macOS设置图标

macOS通常使用.icns格式。

配置：

JavaScript
icon: path.join(__dirname, 'logo.icns')

推荐准备：

logo.icns

文件。

macOS对图标尺寸要求较高，通常需要包含多个分辨率。

Electron打包时配置应用图标

实际发布应用时，仅设置窗口图标还不够，还需要配置打包工具。

常见打包工具包括：

  • electron-builder；

  • electron-packager。

其中electron-builder使用较为广泛。

安装：

Bash
npm install electron-builder --save-dev

electron-builder配置图标

在package.json中添加：

JSON
{
  "build": {
    "appId": "com.example.demo",
    "productName": "DemoApp",
    "win": {
      "icon": "build/icon.ico"
    },
    "mac": {
      "icon": "build/icon.icns"
    }
  }
}

目录结构：

project
│
├── build
│   ├── icon.ico
│   └── icon.icns
│
├── main.js
└── package.json

执行：

Bash
npm run build

生成安装包后，应用会使用指定图标。

Electron窗口标题与打包名称区别

很多开发者容易混淆窗口标题和应用名称。

例如：

JSON
{
  "productName": "MyDesktopApp"
}

它影响：

  • 安装程序名称；

  • 应用目录名称；

  • 快捷方式名称。

而：

JavaScript
title:'用户中心'

影响：

  • 当前窗口显示标题。

两者作用不同。

一个应用可以：

安装名称：企业客户端

窗口标题：订单管理系统

Electron完整窗口配置示例

实际项目中，通常会结合多个配置：

JavaScript
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');

function createWindow(){

    Menu.setApplicationMenu(null);

    const win = new BrowserWindow({
        width:1200,
        height:800,
        title:'数据管理平台',
        icon:path.join(__dirname,'logo.ico'),
        autoHideMenuBar:true,
        webPreferences:{
            nodeIntegration:true,
            contextIsolation:false
        }
    });

    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

该配置实现：

  • 删除默认菜单；

  • 设置窗口标题；

  • 设置窗口图标；

  • 隐藏菜单栏；

  • 加载应用页面。

常见问题与解决方案

1. 设置icon后开发环境有效，打包后无效

原因通常是：

  • 图标路径错误；

  • 打包资源没有包含图标文件。

解决：

检查：

JavaScript
path.join(__dirname,'logo.ico')

并确认文件位于项目目录中。

2. Windows任务栏图标仍然显示默认图标

可能原因：

  • electron-builder没有配置icon；

  • 使用缓存图标。

解决：

配置：

JSON
"win":{
    "icon":"build/icon.ico"
}

重新打包。

必要时删除旧快捷方式重新安装。

3. setMenu(null)没有效果

可能原因：

代码执行时机不正确。

建议：

JavaScript
app.whenReady().then(()=>{
    Menu.setApplicationMenu(null);
    createWindow();
});

确保菜单初始化前完成设置。

4. 标题被网页标题覆盖

如果页面中存在：

HTML
</span><span>首页</span><span class="ͼo">

某些情况下Electron可能显示页面标题。

可以监听：

JavaScript
win.on('page-title-updated',(event)=>{
    event.preventDefault();
});

然后：

JavaScript
win.setTitle('管理系统');

固定窗口标题。

Electron应用发布前的优化建议

除了隐藏菜单、设置图标和标题，还建议进行以下优化：

配置应用唯一标识

JSON
{
 "appId":"com.company.application"
}

避免系统识别冲突。

优化启动窗口

可以使用：

  • 无边框窗口；

  • 自定义标题栏；

  • 启动画面。

提升启动体验。

管理开发和生产环境

开发环境可以保留调试菜单：

JavaScript
if(process.env.NODE_ENV==='production'){
    Menu.setApplicationMenu(null);
}

生产环境隐藏菜单，更符合用户使用习惯。

总结

Electron应用打包过程中，隐藏菜单、设置图标以及修改窗口标题是提升软件品质的重要步骤。

通过setMenu(null)或autoHideMenuBar可以控制菜单显示，通过title和setTitle()能够灵活管理窗口名称，通过icon以及electron-builder配置可以完成应用品牌化设计。

合理配置这些参数，不仅能够让Electron应用更加接近原生桌面软件体验，也能够提升最终发布版本的专业度和用户认可度。

文章标签
Electron Electron打包 Electron窗口设置 electron-builder 桌面应用开发