使用 Invox Setup 实现 Electron 安装包界面美化

介绍

项目介绍

Electron Invox 是基于 Invox Setup 的 Electron 安装界面美化，支持一键打包 Electron 应用，使用 DuiLib UI + C++ 实现，安装包体积仅 2MB+，无需额外依赖，内置 Analytics 支持，可追踪安装/卸载行为，采用类 HTML 的 XML 布局方式，易于定制，支持中英文等多语言切换。

下载安装包体验：InvoxSetup-1.0.0.exe

项目原理

本安装程序采用模块化设计，各组件职责明确：

UI 层：基于 DuiLib 框架构建用户界面，构建快速安装和自定义安装、卸载界面
逻辑层：C++ 实现完整的安装/卸载流程控制和错误处理机制
资源打包：将目标应用程序打包为 app.7z 压缩包，嵌入安装程序资源中

安装流程：

用户选择安装路径（快速安装使用默认路径，自定义安装可自由选择）
安装程序将内置的 app.7z 压缩包解压到目标目录
创建开始菜单和桌面快捷方式（可选）
写入注册表卸载信息
安装完成后可选择立即启动主程序（默认为 InvoxApp.exe，由 APP_EXE_NAME 宏定义）

技术特性：

支持 7z 格式高压缩比，减小安装包体积
完整的回滚机制，安装失败或用户取消时自动清理
多语言支持，根据系统语言自动切换界面
安装过程实时进度反馈
磁盘空间和权限预检查，避免安装失败

界面预览

快速安装	自定义安装	卸载界面

使用说明

安装 Visual Studio 2022 构建环境

下载安装工具：Visual Studio Community
选择勾选：使用 C++ 的桌面开发、C++ ATL for latest v143 build tools (x86 & x64)
执行下载安装

运行 Electron 示例模版

下载源码

1	$ git clone --recurse-submodules git@github.com:sanonz/electron-invox.git

安装依赖

1	$ npm install

构建应用

一行命令即可构建 Electron 和 Invox Setup

1 2	$ npm run build:invox

运行 dist/InvoxSetup-1.0.0.exe 查看效果

在已有 Electron 项目中添加

添加 Invox Setup 为子仓库

1	$ git submodule add git@github.com:sanonz/invox-setup.git invox

导入构建脚本到项目

下载 build-invox.bat 构建脚本，在 package.json 汇总添加构建命令

{
  
  "scripts": {
    "build": "electron-vite build",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:invox": "npm run build:unpack && build-invox.bat"
  },
  
}

运行命令构建

1	$ npm run build:invox

配置说明

配置 Config.h

编辑 Config.h 中相关配置，改为自己的配置

应用程序配置

配置项	值	说明
`APP_NAME`	`InvoxApp`	应用程序名称
`APP_PRODUCT_NAME`	`1.0.0.0`	产品名称
`APP_VERSION`	`1.0.0.0`	完整版本号字符串
`APP_PUBLISHER`	`YourCompany`	发布者/公司名称
`APP_EXE_NAME`	`InvoxApp.exe`	主程序可执行文件名
`APP_UNINSTALL_NAME`	`Uninstaller.exe`	卸载程序文件名

版权信息

APP_DESCRIPTION: InvoxApp Installer & Uninstaller

用于显示在安装程序界面和应用程序属性中

网络端点

PRIVACY_URL: https://yourcompany.com/privacy.html
- 隐私政策页面
ANALYTICS_ENDPOINT: https://api.yourcompany.com/analytics
- 数据分析上报接口
- 用于收集安装/使用统计信息

压缩率配置

这里的是指程序打包为 app.7z 的压缩率，选择不同压缩率会影响安装包大小

压缩率列表

目标	参数
极致压缩率（小体积优先）	`-t7z -m0=lzma2 -mx=9 -mfb=273 -md=64m -ms=on -mmt=on`
平衡速度与压缩率	`-t7z -m0=lzma2 -mx=7 -md=32m -mmt=on -ms=on`
快速压缩（打包分发）	`-t7z -mx=3 -mmt=on -ms=off`

默认压缩率

默认使用 平衡速度与压缩率，可在 build-invox.bat#L77 中修改压缩率，压缩率越高占用 CPU、内存也越大

UI 界面排版

可使用 DuiEditor 工具可视化排版，可查看 XML 结构，更改组件属性，不同属性的值可通过下拉选择修改，能很方便查看不同属性的类型及支持的值，改完实时预览最终展示效果，比古法手写 XML 要方便不少

注意事项

安装完成不会打开应用，检查 Config.h 中的 APP_EXE_NAME 和 app.7z 中主程序一致
DuiLib 的颜色为 0xAARRGGBB (Alpha, Red, Green, Blue) 格式，背景支持 Alpha 透明，字体不支持
使用 DuiLib 中的 Label 组件点击内容时不会触发 Notify 事件，需改为 Button 或者 Text 组件
在修改 Invox Setup 的 C++ 文件时注意保存的编码格式，一定要用 UTF-8 with BOM 格式，否则会出现编译报错以及乱码

推荐订阅源

Sanonz

介绍