【高频考点精讲】Electron桌面应用开发：从打包到自动更新的完整方案

Electron桌面应用开发：从打包到自动更新的完整方案

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊Electron——这个让前端工程师也能轻松开发跨平台桌面应用的神器。很多同学可能用过Electron打包应用，但真正上线后怎么让用户无感自动更新？怎么处理不同平台的签名问题？今天我就带大家走完从打包到自动更新的完整链路，全是实战干货，建议先收藏再细看。

为什么Electron应用需要特殊处理？

Electron本质是Chromium + Node.js的套壳浏览器，但用户期望它像原生应用一样：

安装包不能是几百MB的文件夹（直接asar打包会被杀毒软件误报）
要有应用图标、开始菜单项（Windows）或Dock栏图标（Mac）
版本更新不能让用户重新下载安装包

这就引出了今天三大核心问题：打包优化、代码签名、自动更新。

实战：从零构建可更新的Electron应用

1. 基础项目结构

your-app/
├── main.js          # 主进程代码
├── package.json
├── src/             # 前端代码
└── builder-config/  # 各平台打包配置

关键package.json配置（全栈老李提示：注意build字段）：

{
            
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
            
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
            
    "appId": "com.yourcompany.yourapp",
    "productName": "你的应用",
    "copyright": "Copyright © 2023 全栈老李",
    "mac": {
            
      "category": "public.app-category.developer-tools",
      "target": ["dmg", "zip"]
    },
    "win": {
            
      "target": ["nsis", "portable"]
    },
    "nsis": {
            
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

2. 打包优化实战

直接electron-builder打包会有两个问题：

安装包体积过大（默认包含整个Chromium）
无签名会被系统拦截

解决方案：

# 安装依赖
npm install electron-builder --save-dev

# 打包命令（全栈老李提示：用--config参数指定平台配置）
npm run dist -- --config ./builder-config/mac.json

示例mac.json配置：

{
            
  "afterPack": "./scripts/notarize.js", // Mac公证脚本
  "compression": "maximum", 
  "extraResources": [
    {
            
      "from": "assets/icons",
      "to": "icons"
    }
  ]
}

3. 代码签名避坑指南

各平台签名要求：

平台	工具	成本	必要性
Windows	signtool	￥2000+/年	无签名会被SmartScreen拦截
Mac	Xcode + App Store	$99/年	无签名无法运行
Linux	无要求	免费	建议但不强制

签名后的效果对比：

# 未签名应用
Windows: "此应用来自未知发布者"
Mac:    "无法验证开发者"

# 已签名应用
Windows: "已验证发布者"
Mac:     "已通过公证"

4. 自动更新实现方案

核心逻辑流程图：

sequenceDiagram
    应用启动->>更新服务器: 检查版本
    更新服务器-->>应用: 返回最新版本号
    应用->>本地版本: 对比
    alt 需要更新
        应用->>更新服务器: 下载增量包
        更新服务器-->>应用: 返回.delta文件
        应用->>本地: 应用更新
    else 已是最新
        应用->>用户: 正常启动
    end

代码实现（主进程）：

const {
             autoUpdater } = require('electron-updater')

function checkUpdates() {
            
  autoUpdater.autoDownload = false // 手动控制下载
  
  autoUpdater.on('update-available', (info) => {
            
    dialog.showMessageBox({
            
      type: 'info',
      message: '发现新版本',
      detail: `当前版本: ${
              app.getVersion()}
最新版本: ${
              info.version}`,
      buttons: ['立即更新', '下次再说']
    }).then(({
              response }) => {
            
      if (response === 0) {
            
        autoUpdater.downloadUpdate()
      }
    })
  })

  autoUpdater.on('update-downloaded', () => {
            
    autoUpdater.quitAndInstall() // 全栈老李提示：这里会重启应用
  })

  autoUpdater.checkForUpdates()
}

真实场景案例

某金融公司桌面客户端的更新策略：

小版本更新（v1.0.0 → v1.0.1）：静默下载增量包（约2MB）
大版本更新（v1.0.0 → v2.0.0）：弹窗引导用户下载完整安装包
紧急热修复：通过Electron的webContents.executeJavaScript动态注入补丁

他们的版本控制规则：

版本号格式: 主版本.次版本.修订号-环境标识
示例: 
- 生产环境: 2.1.3
- 测试环境: 2.1.3-beta.1

课后作业：Electron面试题

题目：
在Electron应用中，以下代码会输出什么？为什么？

// 主进程
const {
             BrowserWindow } = require('electron')

let win1 = new BrowserWindow({
             show: false })
win1.loadURL('https://example.com')

let win2 = new BrowserWindow({
             show: false })
win2.loadURL('https://example.com')

console.log(win1.webContents.getTitle(), win2.webContents.getTitle())

选项：
A. “Example Domain” “Example Domain”
B. “” “”
C. 报错
D. 不确定

（欢迎在评论区留下你的答案，我会随机抽几位同学详细点评。正确答案下期揭晓！全栈老李友情提示：注意事件时序问题）