安装包UI美化之路-Electron打包出界面美观,功能完善的安装包,这三步就够了
这篇文章应该说是《安装包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往往能让客户对所安装产品的印象更加深刻,更能体现出软件服务商在用户体验上的专注与用心! 希望我们的努力,能够让安装包制作再容易一点,再快乐一点!
愿天下没有难做的安装包!
安装包UI美化之路-Electron打包出界面美观,功能完善的安装包,这三步就够了相关推荐
- 安装包UI美化之路-nsNiuniuSkin安装包制作配置说明
为方便客户对安装包制作过程中的配置进行更好地理解与应用,我们对nsNiuniuSkin的配置进行如下整理,从手工配置,到全自动集成,做全覆盖的说明与解释! 我们以leeqia_mountain模板为例 ...
- 安装包UI美化之路-nsNiuniuSkin安装包制作可视化配置向导
这篇文章应该说是上一篇<安装包UI美化之路-nsNiuniuSkin安装包制作配置说明>的延伸,在python命令行接口的基础上,支持可视化的配置界面与说明! 一直以来,nsNiuniuS ...
- 安装包UI美化之路-升级安装与静默安装一键打包
在实际应用中,除了产品安装外,还需要能够持续升级到新的版本,这时候升级方案就显得比较重要:而还有一些使用场景,需要咱们的安装包在安装时,不要显示安装界面,直接在后台进行安装! 这些业务功能,都是非常实 ...
- 安装包UI美化之路-打包过程中自动给安装包签名(防误报)
总是有朋友反馈说,打包出来的程序会被360报毒! 嗯... 这是一个问题,360误报不是一天两天了. 原因及理论 被误报,一般是两个原因: 没添加代码签名 没有提交360认证(就是这么...) 问题即 ...
- 安装包UI美化之路-nsNiuniuSkin多语言配置
今天给大家带来的多语言配置功能,算是nsNiuniuSkin的一次质的提升,希望对大家有所帮助. nsNiuniuSkin通过自研多语言配置引擎,让安装包的多语言配置不再复杂,直接设置语言翻译配置文件 ...
- 安装包UI美化之路-nsNiuniuSkin安装包模板介绍-新模板上线啦
利洽安装包UI新模板上线啦! 今天,nsNiuniuSkin安装包解决方案迎来了6套全新的模板,简洁.清爽的设计,同时保持了良好的元素可替换.可扩展等特性! 接下来我们逐一介绍一下,由于gif录制的图 ...
- 安装包UI美化之路-nsNiuniuSkin界面在线设计引擎
一年多前,我们自己开发了一个用于编辑.预览.调试nsNiuniuSkin的UI界面工具,越来越觉得好用,忍不住想要分享出来! 今天我把这个工具重新整理了一下,功能又完善了一些:下面就介绍一下这个工具的 ...
- 安装包UI美化之路-在线安装包
在一些安装场景中,由于完整的安装包很大,下载时间长,且下载后需要人工干预来进行安装,这样会一定程度的降低用户使用体验:nsNiuniuSkin安装包制作解决方案提供了一种在线版本的安装包,支持将实际要 ...
- 安装包UI美化之路-nsNiuniuSkin安装包模板介绍
今天这篇文章,咱们不做功能讲解了,来介绍一下nsNiuniuSkin的几套安装包模板的UI效果和设计理念! 前言 经常有朋友会问,nsNiuniuSkin的几套模板都有些什么区别呀,我拿到模板后,如果 ...
最新文章
- 先进先出置换算法(FIFO)
- python1000个常用代码-1000个常用的Python库和示例代码
- 【机器学习】为什么GBDT可以超越深度学习
- Xamarin Evolve 2016 Keynote回顾
- 设置文本区域大小_数据验证基本设置技巧
- fragment中嵌套viewpager,vierpager中有多个fragment,不显示 .
- 苹果手机说明书_知科技新鲜事 | 华为Mate40系列手机壳曝光:3.5mm耳机孔
- spring-boot 加载本地静态资源文件路径配置
- 学习之路二十七:三种序列化方式的一些注意点
- 基于MATLAB的柱状图画法及特殊柱状图画法总结
- IOS移动应用跳转微信小程序
- Office2021专业增强版激活报错0xc004f074以及尝试办法
- Python趣味篇:字符串中的趣味瞬间
- 收藏!AI从业者必备表情包!
- C++智能指针shared_ptr、unique_ptr以及weak_ptr
- 【Arduino】基于阿里云的体感手柄
- 【51NOD 1737】配对
- scrapy爬虫之爬取汽车之家奥迪Q7高清图片
- 什么软件可以图片转文字?这几个软件值得收藏
- python+mitmdump爬取汽车之家汽车信息
热门文章
- openwrt 应用后台运行、开机自启动,一次安装永久启动
- PostgreSQL安装配置参考文档
- 【C语言】简单三子棋游戏/井字棋游戏
- 手机远程控制电脑?让cpolar帮你完美实现
- mysql注入带外通道攻击_防止SQL注入攻击的方法
- Google Earth Engine(GEE)计算长时序的月VCI和TCI
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...
- Nginx实战篇:图片资源加水印
- 利用Python实现《姜子牙》和《哪吒》的票房对比和评价分析
- 高仿360手机卫士——Android源码