如何为自研Electron应用添加类似Atom、WhatsApp的安装界面？

Hey there! Great question—those sleek, branded installers you see in apps like Atom and WhatsApp aren't built directly into Electron's core API, but rather handled by packaging tools that integrate seamlessly with Electron projects. Let me walk you through the most reliable ways to set this up:

1. 使用Electron Builder（最推荐方案） #

Electron Builder是目前打包Electron应用的主流工具，它对全平台的自定义安装界面支持非常完善，也是Atom这类应用背后使用的方案。

• 首先在项目中安装依赖：

  npm install electron-builder --save-dev
  

• 接着在package.json中添加配置，以Windows平台常用的NSIS安装器为例，这里可以快速实现自定义界面和功能：

  "build": {
    "win": {
      "target": "nsis",
      "icon": "build/app-icon.ico"
    },
    "nsis": {
      "oneClick": false, // 关闭一键安装，允许用户选择安装目录
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "build/installer-icon.ico",
      "uninstallerIcon": "build/uninstaller-icon.ico",
      "installerHeaderIcon": "build/installer-header.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "MyElectronApp"
    }
  }
  

• 如果需要更深度的定制（比如添加自定义安装页面、专属协议弹窗等），可以编写自己的NSIS脚本，然后在配置中通过"script": "build/custom-installer.nsi"指定，完全掌控安装流程的UI和逻辑。

2. 构建完全自定义的嵌入式安装器（进阶玩法） #

如果NSIS的定制程度还满足不了需求，你可以做一个完全由Electron驱动的安装界面——本质是先运行一个轻量Electron应用作为安装器，由它完成主应用的解压、快捷方式创建等操作。

• 核心思路：
  1. 将你的主Electron应用打包成压缩包（比如ZIP格式）
  2. 开发一个极简的Electron应用作为安装器，设计你想要的所有UI（欢迎页、目录选择器、进度条等）
  3. 让安装器处理用户输入、解压主应用包到目标路径、创建系统快捷方式、写入注册表（Windows）等操作
• 可以借助extract-zip处理解压，用electron-squirrel-startup来跨平台管理快捷方式的创建。

3. 其他工具选项 #

• Electron Installer Windows：针对Windows平台的轻量化安装器生成工具，基于NSIS，配置简单，适合快速搭建基础自定义界面的场景。
• 第三方安装器+Electron打包：如果你用pkg打包Electron应用，可以搭配Inno Setup（Windows）或DMG Canvas（macOS）这类第三方工具制作带自定义UI的安装包，不过需要额外学习这些工具的语法。

小提示 #

你在Electron官方文档里找不到相关内容，是因为安装界面属于打包分发环节，不属于Electron运行时的功能，相关细节都在各类打包工具的专属文档里。

内容的提问来源于stack exchange，提问作者Zir Abiodun G. Quadri