安装包UI美化之路-Electron打包出界面美观,功能完善的安装包,这三步就够了

news/2024/10/30 15:24:05/

这篇文章应该说是《安装包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.xmllatest.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如果选择管理员权限,建议安装到所有用户下,
同时默认安装路径选择独立于某个用户的目录

自定义配置宏中,有多个参数相互关联,比如默认安装位置、安装包执行权限、是否安装到所有用户:

  1. 如果安装到所有用户下,那么需要开启安装包管理员执行权限,同时默认安装路径请选择与特定用户无关的路径
  2. 如果安装到当前用户下,那么建议不要开启管理员权限,默认安装路径建议选择: $APPDATA${INSTALL_APPEND_PATH} 或 $LOCALAPPDATA${INSTALL_APPEND_PATH}

相应调整后的配置如下:

根据此配置,按照上述的三步流程的操作,即可打包出来兼容旧版本升级覆盖的安装包啦!

结语

nsNiuniuSkin可视化配置向导中的各个参数,均是与package.py中的命令行参数一一对应的;现在我们提供进一步的说明,生成命令行后,集成到electron-builder的打包流程中,进一步简化打包流程,希望对您打包Electron程序有帮助!

在安装包安装过程中,精美的UI往往能让客户对所安装产品的印象更加深刻,更能体现出软件服务商在用户体验上的专注与用心! 希望我们的努力,能够让安装包制作再容易一点,再快乐一点!

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


http://www.ppmy.cn/news/84188.html

相关文章

Android Permission 权限申请,EasyPermission和其他三方库

在Android的实际开发中,经常会因为需求的实现,需要申请用户权限。 今天总结下Android中常用的权限申请。 一、基本介绍和流程 Android中的权限申请是通过应用程序与操作系统之间的交互实现的。在Android中,每个应用程序都被赋予了一组预定…

智慧水务系统如何进行有效的数据架构整改?三个企业的改造实践分享

在智慧水务系统中,往往需要对设备中产生的液位、电流、水量等实时指标数据进行存储、分析及监控操作,而这些都是典型的时序数据。面对这些数据的处理时,很多企业在前期选择的大都是传统的实时数据库甚至关系型数据库,随着设备数量…

Linux 网络基础(2)应用层(http/https协议、请求格式、响应格式、session、cookie、加密传输)

说明:网络基础2讲解的是应用层的典型协议, 通过对于典型协议的理解,来体会数据的网络传输的软件层面的流程与原理。 面试中网络通信相关问题占了很大的比重,而网络通信相关的问题大多都集中在网络基础2这个单元中 下面是应用层的位…

安卓项目如何做单元测试

前言 先说一下创建篇文章的目的,近期负责搭建公司的单元测试框架,于是查阅了网上的很多文章,以及参考了github上很多的项目例子,并且也进行了相当多的尝试。这其中花费了很多的精力,大约有两三周的时间,远…

xml报文转Java实体

公众号推广: 目前CSDN进行VIP可见,文章可在微信公众号进行免费的阅读。 文章内容经过认证实践,比较的清晰易懂,适合初次接触的人员。 请关注微信公众号:菜鸟编程踩坑之路,进入公众号搜索关键词 xml转实体 需求场景: 因为需要对接一些比较老的系统接口,他们的请求方…

每日一练 | 网络工程师软考真题 Day11

1、以下关于网络存储描述正确的选项是 。 A.SAN系统是将存储设备连接到现有的网络上,其扩展能力有限 B.SAN系统是将存储设备连接到现有的网络上,其扩展能力很强 C.SAN系统使用专用网络,其扩展能力有限 …

MyBatis中使用第三方分页插件PageHelper完成分页功能

文章目录 一、前言二、基于插件拦截方式1、自定义插件2、使用第三方插件完成分页1、分页插件的配置2、分页插件的使用 一、前言 分页是web应用程序非常重要的一个技术。数据库中的数据可能是成千上万的,不可能把这么多的数据一次显示在浏览器上面。一般根据每行数据…

springboot 上传文件常见问题汇总

springboot 上传文件常见问题汇总 AccessDeniedException步骤配置怎么确保应用程序有这个路径及其子路径的访问权限步骤 AccessDeniedException 使用 SpringBoot 上传文件报错 java.nio.file.AccessDeniedException: /xx/xx/xx,这个异常意味着程序在试图访问该目录…