这篇文章应该说是《安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导》的延伸与进一步应用，在可视配置的基础之上，生成供electron-builder打包的脚本！
一直有朋友反馈，不知道如何将nsNiuniuSkin与Electron打包结合起来；我综合整理了一下，大家的担心无外乎以下几点：
- 如何将elecron-builder的打包流程与nsNiuniuSkin的打包流程整合起来，形成一个统一的流程？
- nsNiuniuSkin打包出来的安装包，如何与electron-updater的升级流程对接上？
- 使用nsNiuniuSkin打包出来的安装包，如何与之前electron-builder打包出来的安装包兼容？
原理理论
今天我们就来一次把这几个问题聊个透，先看前两个问题，我们通过三个最简单的步骤来实现完整的与electron-builder整合在一起的打包流程。
使用Electron开发软件，发布时一般采用electron-builder来进行文件打包与发布，同时其相应的ci/cd流程也都是在这个基础上进一步施行；基于此，我们可以将nsNiuniuSkin打包的配置生成一个打包的脚本，然后嵌入到electron-builder的scripts中；这样一来，对于原始的打包流程没有任何影响，只需要简单三步就可以配置好了。
三步打包出来功能完善，界面美观的安装包
1. 在可视化配置界面上，配置基础打包参数，以及与Electron相关的配置
有几个需要注意的地方：
- 基础配置的各个细节，请参考《安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导》
- 几个特殊参数的配置说明
| 配置名称 | 用途 | 备注 |
|---|---|---|
| 打包模式 | 要打的安装包类型及压缩方式 | 7z：先压缩成app.7z，再进行打包 nozip：直接使用nsis打包 online：打在线安装包 此处选择7z模式，这样打出来的安装包比较小 |
| 是否打包Electron | 表示是否是要打包Electron程序 | 此时固定为0值，因为我们是被electron-builder调用 |
| 是否生成latest.xml | 是否打包完成后，生成用于electron-updater的latest.xml | latest.xml中包含安装包文件名、版本号以及安装包的sha512的值，此处选择1 |
| 软件安装注册表标识 | 在注册表中，安装信息保存的位置，如： [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Leeqia_Capture] "InstPath"="C:\Program Files (x86)\Leeqia_Capture" |
如果开启Electron打包，将会以package.json中的guid来使用，此时我们自己根据产品信息来指定 |
| 安装路径注册表Key | 在注册表中，安装路径保存的位置，如： [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Leeqia_Capture] "InstPath"="C:\Program Files (x86)\Leeqia_Capture" |
Electron相关打包，请使用InstallLocation |
| 安装包名称 | 最终打出来的安装包的文件名，如： Watercurtain_Setup_v2.5.0.exe |
此处我们配置成 "TestCapture_Setup_v%npm_package_version%.exe" |
| 产品版本号 | 产品版本号，如： 2.5.0.0 |
此处我们配置成 %npm_package_version% |
特殊说明：
一个软件的安装包，其他的信息都是相对固定的，只有版本号会随着代码的增加而进行调整；所以我们将软件名称、安装包名称前缀等都固定设置，进一步将产品版本号与安装包后缀指定为electron-builder的环境变量，由electron-builder在打包的时候，自动的从package.json配置所形成的环境变量中读取相应的变量值，来得到最终的版本号和安装包名称。
配置设置好后，点击保存配置（此时由于是用来生成供electron-builder来集成，所以用了环境变量，此时在界面上点击生成安装包将会报错）。
2. 将生成的命令行参数复制到package.json的scripts配置脚本中
经过上一步的配置，将会在gui_package.bat所在目录下生成一个名叫generate_leeqia_mountain_7z_cmdline.txt的文件，打开此文件，内容如下：
python ../package.py --project_name=\"leeqia_mountain\" --package_mode=1 --need_sign=False --build_for_electron=False --generate_latest_file=True --files_toinstall_name=\"FilesToInstall\" --uninst_file_name=\"uninst.exe\" --src_files_dir=\"./NiuNiuCaptureElectronDemo/dist/win-unpacked\" --PRODUCT_NAME=\"利洽科技截图控件\" --PRODUCT_NAME_EN=\"Leeqia ScreenCapture\" --INSTALL_OUTPUT_NAME=\"TestCapture_Setup_v%npm_package_version%.exe\" --PRODUCT_VERSION=\"%npm_package_version%\" --EXE_NAME=\"TestCapture.exe\" --INSTALL_LOCATION_KEY=\"InstallLocation\" --INSTALL_APPEND_PATH=\"Leeqia_Capture\" --PRODUCT_PATHNAME=\"Leeqia_Capture\" --INSTALL_DEFALT_SETUPPATH=\"$PROGRAMFILES32\\${INSTALL_APPEND_PATH}\" --INSTALL_DEFAULT_SHOTCUT=1 --INSTALL_DEFAULT_AUTORUN=0 --INSTALL_EXECUTION_LEVEL=\"admin\" --INSTALL_MODE_ALL_USERS=\"all\" --INSTALL_DOWNLOAD_BASEURL=\"http://www.ggniu.cn/test_online_install/\" --PRODUCT_LEGAL=\"Leeqia Copyright（c）2020\" --PRODUCT_PUBLISHER=\"Leeqia\" --TEST_SLEEP=0
复制内容，粘贴到package.json的scripts脚本中的指定位置，如下：
{
"name": "TestCapture",
"version": "1.0.0",
"main": "main.js",
"description": "",
"author": "support@leeqia.com",
"build": {
"appId": "appid",
"nsis": {
"guid": "Test_Capture"
},
"extraFiles": [
"capture"
],
"win": {
"icon": "app.ico"
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080/update/"
}
]
},
"devDependencies": {
"electron": "8.5.5",
"electron-builder": "23.6.0"
},
"dependencies": {
"electron-log": "^5.0.0-beta.16",
"electron-updater": "^5.3.0"
},
"scripts": {
"pack": "npm run clear-dist & npm run build ",
"clear-dist": "rmdir dist /s /q",
"build": "electron-builder --win && python ../package.py --project_name=\"leeqia_mountain\" --package_mode=1 --need_sign=False --build_for_electron=False --generate_latest_file=True --files_toinstall_name=\"FilesToInstall\" --uninst_file_name=\"uninst.exe\" --src_files_dir=\"./NiuNiuCaptureElectronDemo/dist/win-unpacked\" --PRODUCT_NAME=\"利洽科技截图控件\" --PRODUCT_NAME_EN=\"Leeqia ScreenCapture\" --INSTALL_OUTPUT_NAME=\"TestCapture_Setup_v%npm_package_version%.exe\" --PRODUCT_VERSION=\"%npm_package_version%\" --EXE_NAME=\"TestCapture.exe\" --INSTALL_LOCATION_KEY=\"InstallLocation\" --INSTALL_APPEND_PATH=\"Leeqia_Capture\" --PRODUCT_PATHNAME=\"Leeqia_Capture\" --INSTALL_DEFALT_SETUPPATH=\"$PROGRAMFILES32\\${INSTALL_APPEND_PATH}\" --INSTALL_DEFAULT_SHOTCUT=1 --INSTALL_DEFAULT_AUTORUN=0 --INSTALL_EXECUTION_LEVEL=\"admin\" --INSTALL_MODE_ALL_USERS=\"all\" --INSTALL_DOWNLOAD_BASEURL=\"http://www.ggniu.cn/test_online_install/\" --PRODUCT_LEGAL=\"Leeqia Copyright（c）2020\" --PRODUCT_PUBLISHER=\"Leeqia\" --TEST_SLEEP=0",
"dist": "electron-builder --win "
}
}
到这一步，所有的配置都已经配置好了，electron-builder打包的过程中，将会从package.json中的version字段的值替换到脚本中，以此来完成最终的打包，是不是特别简单呢？
再次提醒，其他的一些基本参数，比如是否开机启动，是否创建桌面快捷方式这些，请参考《安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导》来进行配置。
3. 执行打包，等待结果
执行打包指令：
npm run build
这个流程将会全自动地做如下几件事情：
- electron-builder打包，生成unpacked files
- 从unpacked files目录复制文件到nsNiuniuSkin的待打包文件目录下
- 执行nsNiuniuSkin的打包流程，打包出界面美观，功能完善的安装包
- 根据安装包名称和版本号，生成latest.yml文件
耐心等待后，最终生成的安装包如下：
此时我们生成了安装包，同时生成了供electron-updater升级检测时使用的latest.yml，只需要将安装包和latest.yml发布到服务器上，自动升级流程就能无缝衔接了。
运行效果如下：
使用nsNiuniuSkin打包出来的安装包，如何与之前electron-builder打包出来的安装包兼容
如果是一个全新的项目，在此之前并没有使用electron-builder制作出来的原生安装包进行过发布，则不需要关注这部分内容。
如果线上已经有旧的由electron-builder制作出来的安装包发布了，接下来由nsNiuniuSkin制作出来的安装包还需要兼容的话，需要考虑如下几个问题：
- 安装信息在注册表中的注册表项
- 是安装到当前用户还是所有用户，安装包是否以管理员权限启动
- 扩展安装路径（确保安装路径的最后一层一致，这个可以使用旧的安装包安装后，找到其安装路径即可获取）
要实现与旧版本的兼容，其实非常简单，就是获取到旧的安装包的上述核心安装信息，设置到我们的可视化配置向导中即可。
1. 获取旧安装包的配置信息
如果上述信息都能够在原始的package.json中找到明确的配置值，那直接将这些值配置应用到可视化配置向导中即可；如果没有配置，则需要将旧的安装包利用7zip来解压，得到一个nsi文件，从这个文件中进行提取（除了“安装信息在注册表中的注册表项”外，其他的应该都能够在package.json中有配置，或有特定的默认值）。
解压后，我们搜索SetShellVarContext，将会看到如下一段脚本代码：
StrCpy $_18_ CurrentUser
SetShellVarContext current
ReadRegStr $_19_ HKCU Software\Test_Capture InstallLocation
StrCmp $_19_ "" label_321
StrCpy $INSTDIR $_19_
其中：
- SetShellVarContext current 表示安装到当前用户下，这个其实也间接表示此安装包是以非管理员权限启动
- Software\后面的Test_Capture 表示软件安装信息在注册表中的面的名称，与我们package.json中的guid匹配，如果没配置guid，此处可能是一个GUID字符串
有了上述信息，现在我们需要的所有信息都得到了：
- 安装到当前用户下
- 安装包以普通用户权限启动
- 软件安装信息在注册表中的项的名称为Test_Capture
- 软件安装路径在注册表中的Key的名称为InstallLocation（所有Electron程序默认的值）
2. 兼容旧安装包的可视化配置项说明
| 配置名称 | 用途 | 备注 |
|---|---|---|
| 扩展路径名称 | 安装时要追加的文件夹名称，如： Leeqia_Capture |
扩展文件夹是为了安装的文件都在我们特定的目录下 |
| 软件安装注册表标识 | 在注册表中，安装信息保存的位置，如： [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Leeqia_Capture] "InstPath"="C:\Program Files (x86)\Leeqia_Capture" |
如果开启Electron打包，将会以package.json中的guid来使用 |
| 安装路径注册表Key | 在注册表中，安装路径保存的位置，如： [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Leeqia_Capture] "InstPath"="C:\Program Files (x86)\Leeqia_Capture" |
Electron相关打包，请使用InstallLocation |
| 默认安装路径 | 安装包首次打开时，默认的安装路径： $PROGRAMFILES32${INSTALL_APPEND_PATH} |
需要结合是否是安装到所有用户下，以及安装包执行权限来决定默认路径 |
| 安装包执行权限 | 是否以管理员权限启动安装包：admin/user | 如果选择管理员权限，建议安装到所有用户下， 同时默认安装路径选择独立于某个用户的目录 |
| 安装到当前用户 还是所有用户 |
安装到当前用户还是所有用户：all/current | 如果选择管理员权限，建议安装到所有用户下， 同时默认安装路径选择独立于某个用户的目录 |
自定义配置宏中，有多个参数相互关联，比如默认安装位置、安装包执行权限、是否安装到所有用户：
- 如果安装到所有用户下，那么需要开启安装包管理员执行权限，同时默认安装路径请选择与特定用户无关的路径
- 如果安装到当前用户下，那么建议不要开启管理员权限，默认安装路径建议选择： $APPDATA${INSTALL_APPEND_PATH} 或 $LOCALAPPDATA${INSTALL_APPEND_PATH}
相应调整后的配置如下：
根据此配置，按照上述的三步流程的操作，即可打包出来兼容旧版本升级覆盖的安装包啦！
结语
nsNiuniuSkin可视化配置向导中的各个参数，均是与package.py中的命令行参数一一对应的；现在我们提供进一步的说明，生成命令行后，集成到electron-builder的打包流程中，进一步简化打包流程，希望对您打包Electron程序有帮助！
在安装包安装过程中，精美的UI往往能让客户对所安装产品的印象更加深刻，更能体现出软件服务商在用户体验上的专注与用心！ 希望我们的努力，能够让安装包制作再容易一点，再快乐一点！文章来源：https://www.toymoban.com/news/detail-470910.html
愿天下没有难做的安装包！文章来源地址https://www.toymoban.com/news/detail-470910.html
到了这里，关于安装包UI美化之路-Electron打包出界面美观，功能完善的安装包，这三步就够了的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
