Electron 学习笔记二

共计 3393 个字符，预计需要花费 9 分钟才能阅读完成。

我们将围绕以下任务进行：

1. 打包 Electron 应用（生成 .exe / .dmg / .AppImage）
2. 实现自动更新功能（基于 electron-updater）
3. 自定义菜单栏（Menu）

💡 前提：你已有一个可运行的 Electron 项目（如上一篇笔记中的基础应用）。

---

一、打包 Electron 应用

推荐使用 Electron Forge（官方推荐，配置简单）或 electron-builder（功能强大，社区广泛）。这里以 Electron Forge 为例。

✅ 1. 安装 Electron Forge

在项目根目录运行：

npm install --save-dev @electron-forge/cli
npx electron-forge import

import 命令会自动修改 package.json，添加 Forge 配置和脚本。

✅ 2. 配置应用信息（可选但建议）

在 package.json 中补充应用元数据：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "author": "Your Name",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "config": {
    "forge": {
      "packagerConfig": {"icon": "./assets/icon.png"  // 可选：设置应用图标（需提供 .icns/.ico/.png）},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {}  // Windows 安装包},
        {
          "name": "@electron-forge/maker-dmg",
          "config": {}  // macOS .dmg},
        {
          "name": "@electron-forge/maker-deb",
          "config": {}  // Linux .deb},
        {
          "name": "@electron-forge/maker-zip",
          "config": {}  // 跨平台压缩包}
      ]
    }
  }
}

✅ 3. 打包并生成安装包

# 仅打包（不生成安装程序）npm run package

# 打包 + 生成各平台安装包（Windows/macOS/Linux）npm run make

生成的文件位于 out/make/ 目录下。

⚠️ 注意：在 Windows 上生成 .exe 需要安装 WiX Toolset；macOS 需要 Apple 开发者证书（签名可选，但未签名可能无法运行）。

---

二、实现自动更新

使用 electron-updater（由 electron-builder 提供），即使你用 Forge，也可以单独引入它。

📌 注意：Forge 默认不集成自动更新，因此更推荐 直接使用 electron-builder 来同时处理打包 + 更新。但为简化，我们仍以 Forge 项目为例，手动集成更新。

✅ 1. 安装依赖

npm install electron-updater

✅ 2. 修改 main.js：添加更新逻辑

// main.js 顶部
const {app, BrowserWindow, Menu} = require('electron')
const {autoUpdater} = require('electron-updater')

// 启用自动下载（默认 true）autoUpdater.autoDownload = true

// 日志（开发时可查看）autoUpdater.logger = require('electron-log')
autoUpdater.logger.transports.file.level = 'info'

// 检查更新
app.whenReady().then(() => {createWindow()

  // 仅在生产环境检查更新（避免开发时触发）if (!require('electron-is-dev')) {autoUpdater.checkForUpdatesAndNotify()
  }

  // 可选：监听更新事件（用于 UI 提示）autoUpdater.on('update-available', () => {console.log('有新版本可用')
  })
  autoUpdater.on('update-downloaded', () => {console.log('更新已下载，将在退出时安装')
  })
})

✅ 3. 配置发布源

electron-updater 默认从 GitHub Releases 检查更新。你需要：

1. 在 package.json 中添加：

{
  "build": {
    "appId": "com.yourname.my-electron-app",
    "productName": "My Electron App",
    "publish": [
      {
        "provider": "github",
        "owner": "your-github-username",
        "repo": "my-electron-app"
      }
    ]
  }
}

2. 将打包后的安装包（如 my-electron-app-1.0.0-mac.zip）上传到 GitHub Releases，并标记版本号（必须与 package.json 中 version 一致）。

🌐 其他发布源：支持 S3、Generic Server 等。

✅ 4. 测试更新

• 修改 package.json 的 version 为 1.0.1
• 重新打包并发布到 GitHub Releases
• 用旧版本（1.0.0）启动应用，它会自动检测并下载更新

💡 更新将在应用 下次启动时生效（或调用 autoUpdater.quitAndInstall() 立即重启安装）。

---

三、自定义菜单栏（Menu）

Electron 允许完全自定义顶部菜单（Windows/macOS）。

✅ 1. 在 main.js 中创建菜单

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

function createMenu() {
  const template = [
    {
      label: '应用',
      submenu: [
        {label: '关于', click: () => console.log('关于应用') },
        {type: 'separator'},
        { 
          label: '退出', 
          accelerator: 'CmdOrCtrl+Q', 
          click: () => app.quit() 
        }
      ]
    },
    {
      label: '编辑',
      submenu: [
        {role: 'undo'},
        {role: 'redo'},
        {type: 'separator'},
        {role: 'cut'},
        {role: 'copy'},
        {role: 'paste'}
      ]
    },
    {
      label: '帮助',
      submenu: [
        {
          label: '检查更新',
          click: () => {if (!require('electron-is-dev')) {autoUpdater.checkForUpdatesAndNotify()
            }
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

✅ 2. 在 app.whenReady() 中调用

app.whenReady().then(() => {createWindow()
  createMenu() // 👈 添加这行
  // ... 其他逻辑
})

🍎 macOS 注意：第一个菜单项会被自动替换为应用名称，且“关于”“退出”等应放在该菜单下以符合系统规范。

---

🧩 补充建议

功能	推荐工具 / 方案
打包 + 更新一体化	electron-builder（比 Forge 更适合生产级更新）
图标	准备 .ico（Windows）、.icns（macOS）
应用签名	macOS 需 Apple Developer ID；Windows 建议代码签名证书
日志调试	使用 electron-log 记录更新、错误日志

---

✅ 总结

功能	关键点
打包	使用 electron-forge 或 electron-builder 生成各平台安装包
自动更新	通过 electron-updater + GitHub Releases 实现静默更新
菜单栏	使用 Menu.buildFromTemplate() 自定义菜单，提升用户体验