安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级

nsNiuniuSkin从发布之初，因其简单、简洁、高效，受到了非常多公司的青睐，现在已经越来越多的公司采用我们的这套解决方案来制作安装包了！

从一个安装包UI插件，逐步演化成一套集美观、安全、简洁、自动化为一体的完整的解决方案，实属不易，感谢所有朋友的信任！

前言

网上有不少关于Electron安装包美化的文章，有使用sciter的，有使用QT的，也有基于我们早期版本进行深度或简单集成的；整体看下来，这些方案多少会有一点问题：

• 使用sciter和QT，增加了不少体积
• 没有完整的与Electron打包升级完整整合

而现在Electron应用非常广泛，Electron应用程序的安装包制作，当然少不了我们；在翻看了electron-builder和electron-updater源码后，再结合反解Electron应用程序的安装包脚本，我们了解了其运作的机制，实现了一套与Electron打包无缝对接的方案，完全支持自动化，兼容electron程序的升级。

之前有了解到有一个朋友做Electron安装包的美化，前后花费了一个月时间的，真的让人痛心！希望有了我们的方案，大家能够在一天内完成安装包的制作以及升级功能的对接。

原理

在实际介绍nsNiuniuSkin的Electron安装包制作方案之前，我们需要讲清楚几个原理：

electron-builder在Windows上默认使用NSIS进行打包

electron-builder内置了很多模板化的nsis脚本，在package.json中的关于nsis的设置，将会通过参数的形式，结合模板，最终形成完整的打包脚本，进而生成安装包。 如果你有想不明白的打包与升级的问题，基本都可以在electron-builder的源码中找到相关的答案或者资料。

electron-updater的升级思路

此处我们只讲全量更新，electron-updater升级流程如下：

1. 在electron-builder打包时，通过配置，会在resources目录下生成一个app-update.yml配置文件，其中包含了当前的版本号，以及升级检测的服务端地址；同时会生成一个elevate.exe的程序（用于在升级包需要管理员权限运行时进行提权）
2. electron-builder打包完成后，会同步生成一个叫latest.yml文件，其中写了最新的版本号、大小、文件的SHA512哈希值等信息；这些信息将作为客户端升级校验的基础（打包后需要将latest.yml以及安装包放到指定的服务器上）
3. 客户端运行时，electron-updater下载服务器的latest.yml，与本地的进行对比，判断是否有新版本
4. 下载latest.yml中安装包文件名对应的文件，并校验其SHA512与大小是否与配置文件中一致
5. 退出当前主进程，调用新的安装包，并传递--updated --force-run /S等参数（--force-run /S根据updater配置逐项增加）

我们的实现方案

知道了Electron打包与升级的逻辑，我们的Electron打包方案就变的容易了，处理细节较多，这里我们主要介绍几个技术要点：

1. 自动读取Electron目录下的package.json中的版本号以及guid，这两个信息对于安装包非常重要
2. 支持从外部指定安装包名、安装权限、安装到当前用户还是所有用户等
3. 调用Electron打包命令，生成unpacked files，并复制到我们的打包目录下
4. 安装包打包完成后，自动签名，同时生成latest.yml配置文件，达到完全兼容electron-updater升级的效果
5. 自动处理electron-updater传递过来的命令行参数，将升级行为处理成与原生的electron打包的安装包一致

我们的优势

有人会说Electron自己的打包就是这样，你做的这些有什么意义呢？

意义非常大，且听我道来：

1. 我们的安装包UI高度美观，且可以随意扩展
2. 我们的安装包自带防解包功能，安全性上比Electron自己打出来的更高
3. 我们的安装包方案中，自带一键生成在线安装包，网站上可以只发布非常小的一个预安装程序即可
4. 我们除了生成与electron-updater完全匹配的升级包以外，同时支持更灵活的升级方案
5. 一键式打包，同步生成卸载程序及其签名，防误报

打包示例与效果展示

说了这么多，都是理论性的东西，直接看脚本和效果吧，不需要复杂的配置，直接执行打包脚本即可。

package.json脚本

在打包脚本目录下，我们提供了一份名叫NiuNiuCaptureElectronDemo的electron源码，其中已经包含了基本的打包脚本package.json的配置，以及基本的升级相关的代码。

package.json的部分配置如下：

{"name": "TestCapture","version": "1.0.0","main": "main.js","description": "","author": "[e-mail]","build": {"appId": "appid","nsis": {"guid": "Test_Capture"  },"extraFiles": ["capture"],"win": {"target": "dir","icon": "app.ico"},"publish": [{"provider": "generic","url": "http://127.0.0.1:8080/upload/"}]}
}

上述打包脚本配置，表示我们的一些核心配置如下：

• 版本号为1.0.0
• 安装包在注册表中的标识key为Test_Capture
• 指定升级包下载路径等
• 我们依赖的electron和electron-builder的版本如上，如果你机器上的版本不一样，请相应调整

build-for-electron.bat脚本

同时我们提供了一份build-for-electron.bat的脚本，默认已经配置成正常打包NiuNiuCaptureElectronDemo下的应用程序；脚本部分代码如下（实际应用中只需要修改大概4-5个字段，output_setup_prefix、electron_build_path、shell_all_user_mode、install_execution_level）：

@rem 打包脚本项目名称
@set project_name=leeqia_general
@rem 安装包名前缀 
@set output_setup_prefix=LeeqiaCapture_PC_Setup_@rem 主程序名称 (可根据你的项目自行调整)
@set main_exe_name=TestCapture.exe@rem electron程序中打包的guid，用于安装在注册表中的key（卸载与软件信息）
@set electron_guid=
@rem 软件版本号
@set electron_app_version=
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=all
@rem 安装包的启动权限，user/admin
@set install_execution_level=admin
@rem electron项目所在目录
@set electron_build_path=.\NiuNiuCaptureElectronDemo
@set electron_unpacked_dir=%electron_build_path%\dist\win-unpacked
@rem 读取yml文件，提取版本号和guid信息
.\Helper\NSISHelper.exe --mode="get_electron_app_info" --src="%electron_build_path%\package.json" --dst=".\get_electron_app_version.bat"
Call get_electron_app_version.bat
@echo %electron_app_version%
@echo %electron_guid%
@rem 完整的安装包名称
@set output_setup_file_name=%output_setup_prefix%%electron_app_version%.exe
@rem 打包，生成unpacked files （如果你的打包脚本是其他的，则修改此处，在具体环境中打包可能报错，需要调整package.json中的electron和electron-builder的版本号）
cd %electron_build_path%
call npm run build

执行build-for-electron.bat，就可以开始打包了，他将会做几件事：

• 提取package.json中的guid和version字段，传递给后续的打包流程
• 进入electron应用程序所在目录下，执行打包脚本npm run build
• 复制dis\win-unpacked下的文件
• 执行安装包打包（包含卸载程序、安装程序的打包与签名）
• 生成最终安装包的latest.yml

以下是我们的打包脚本执行过程：

 

打包完成后，最终打包出来的安装包程序：

 

安装效果如下：

开始安装：

 

安装中：

 

升级效果展示

在上一节中，我们已经打出来了1.0.0版本的安装包LeeqiaCapture_PC_Setup_1.0.0.exe，并且已经安装到电脑上进行使用；接下来我们演示一下打出新的版本，放到升级目录下，触发旧版本的升级。

我们先需要搭建一个简单的静态http服务器，安装http-server模块即可。

安装后，我们新建立目录e:\testweb\update，然后在e:\testweb目录下下执行： http-server 此时升级服务器就算是准备好了。

我们将package.json中的version字段改为1.0.1，并再次执行build-for-electron.bat进行打包，此时我们会得到两个文件：

• LeeqiaCapture_PC_Setup_1.0.1.exe
• latest.yml

我们将打好的安装包和升级文件复制到e:\testweb\update目录下，然后运行之前安装好的1.0.0版本的测试程序：

 

此时将会弹出检测到新版本的安装包，是否进行升级的提示，点击确认，升级就开始了，升级完成后，会自动再次拉起主程序来。

 

与旧的Electron应用程序的兼容

如果之前已经通过electron打包发布了的程序，替换成由nsNiuniuSkin打的安装包，要如何与旧的版本完全兼容呢？

这是非常重要的一点，也是众多Electron开发者在切换安装包打包工具时的困惑所在。

我们之所以要读取package.json中的guid，就是想要实现与旧版本兼容。只要知道了它，我们就能够在脚本中定位原来旧的Electron安装包的安装位置，可以进一步进行覆盖安装。

当然要处理的细节还是比较多的，比如：

• 安装路径的读取与写入 安装位置，我们使用的key值是InstPath，而Electron使用的key值是InstallLocation；我们在接下来会介绍的build-by-external.bat（build-for-electron.bat也是调用这个脚本）中，预留了可以设置此值的参数，并且指定为InstallLocation，所以Electron程序打包默认都会指定这个值，也就与旧版本匹配了。
• 快捷方式的替换 快捷方式比较简单，只要前后的快捷方式名称一致，且与旧版本安装包的安装配置（是安装到所有用户还是当前用户）一致即可
• 开始菜单的处理 与快捷方式同理

不光如此，类似的其他方案制作的安装包，要无缝的切换成我们的安装包方案，也是很简单的：

我们在脚本中内置了注册表key的默认值，只需要将其修改成您旧的程序写的key即可确保读写用的是同一个键值。

灵活的集成方案，兼顾不同的打包方式与场景

在我们的打包方案中，我们提供了两种形式的打包脚本，同时兼顾不同场景的打包需求：

主动打包

之所以称之为主动打包，是因为打包的触发入口是在我们的打包入口脚本中，我们提供了一个叫build-for-electron.bat脚本，在其中只要配置好以下几点，就可以开始打包了（上面的示例已经介绍）：

• electron应用程序所在的目录
• electron应用程序主程序的文件名
• electron应用程序的安装包名前缀等

被动打包

被动打包的意思是说打包的触发点不在我们这边，而是有其他流程已经打出来了unpacked files，并且已经复制到了我们要打包的目录下，需要调用我们的脚本打包成最终的安装包，同时生成latest.yml文件。 如果当前已经有了较为完整的打包自动化流程，只是想切换到nsNiuniuSkin的打包方案中，可以试着在你们的流程中调用build-by-external.bat脚本，并传递指定的参数即可，脚本参数较多，如下：

Call build-by-external.bat project_name electron_guid electron_app_version output_setup_file_name shell_all_user_mode install_execution_level file_pack_path main_exe_name gen_latest

脚本部分代码如下（命令行参数每个参数的解释都在脚本代码中了）：

@rem 此脚本表示外部已经打好electron的unpacked files，并且已经复制到我们的FilesToInstall下，我们只需要相应的打包成最终的安装包即可 
@rem 打包脚本名称，如leeqia_simple，对于于SetupScripts目录下的具体文件夹名称
@set project_name=%1
@rem electron中配置的guid，用于指定注册表中的key
@set electron_guid=%2
@rem 软件版本号
@set electron_app_version=%3
@rem 完整的安装包名
@set output_setup_file_name=%4
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=%5
@rem 安装包的启动权限，user/admin
@set install_execution_level=%6
@rem 等待打包文件所在目录名，默认为FilesToInstall
@set file_pack_path=%7
@rem 主程序EXE名称
@set main_exe_name=%8
@rem 是否生成latest.yml，用于electron相关程序的打包 
@set gen_latest=%9
@rem 注册表中安装包位置存储的key值
@set install_location_key=InstallLocation

总结

看完上述的介绍与演示，是不是觉得非常简单呢？ 所有复杂的逻辑以及需要与electron-updater交互的地方，都由我们安装包制作方案自动完成，提供出统一的接口。

整个过程非常简单，配置build-for-electron.bat中的各个参数(如果你的electron-builder的配置文件还没配置好，也需要配置下)，然后执行此脚本，安装包就打包好了。

你对Electron应用的安装包美化和升级还有什么疑惑么？有机会一起探讨一下吧。

结语

在安装包安装过程中，精美的UI往往能让客户对所安装产品的印象更加深刻，更能体现出软件服务商在用户体验上的专注与用心！ 希望我们的努力，能够让安装包制作再容易一点，再快乐一点！今后Electron程序的打包，就交给我们吧！^_^

愿天下没有难做的安装包！