购买的网站平台建设服务计入,微信链接的微网站怎么做,电商网站的支付接入该怎么做呢,建设网站相关法律条文nsNiuniuSkin从发布之初#xff0c;因其简单、简洁、高效#xff0c;受到了非常多公司的青睐#xff0c;现在已经越来越多的公司采用我们的这套解决方案来制作安装包了#xff01;
从一个安装包UI插件#xff0c;逐步演化成一套集美观、安全、简洁、自动化为一体的完整的…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升级流程如下
在electron-builder打包时通过配置会在resources目录下生成一个app-update.yml配置文件其中包含了当前的版本号以及升级检测的服务端地址同时会生成一个elevate.exe的程序用于在升级包需要管理员权限运行时进行提权electron-builder打包完成后会同步生成一个叫latest.yml文件其中写了最新的版本号、大小、文件的SHA512哈希值等信息这些信息将作为客户端升级校验的基础打包后需要将latest.yml以及安装包放到指定的服务器上客户端运行时electron-updater下载服务器的latest.yml与本地的进行对比判断是否有新版本下载latest.yml中安装包文件名对应的文件并校验其SHA512与大小是否与配置文件中一致退出当前主进程调用新的安装包并传递--updated --force-run /S等参数--force-run /S根据updater配置逐项增加
我们的实现方案
知道了Electron打包与升级的逻辑我们的Electron打包方案就变的容易了处理细节较多这里我们主要介绍几个技术要点
自动读取Electron目录下的package.json中的版本号以及guid这两个信息对于安装包非常重要支持从外部指定安装包名、安装权限、安装到当前用户还是所有用户等调用Electron打包命令生成unpacked files并复制到我们的打包目录下安装包打包完成后自动签名同时生成latest.yml配置文件达到完全兼容electron-updater升级的效果自动处理electron-updater传递过来的命令行参数将升级行为处理成与原生的electron打包的安装包一致
我们的优势
有人会说Electron自己的打包就是这样你做的这些有什么意义呢
意义非常大且听我道来
我们的安装包UI高度美观且可以随意扩展我们的安装包自带防解包功能安全性上比Electron自己打出来的更高我们的安装包方案中自带一键生成在线安装包网站上可以只发布非常小的一个预安装程序即可我们除了生成与electron-updater完全匹配的升级包以外同时支持更灵活的升级方案一键式打包同步生成卸载程序及其签名防误报
打包示例与效果展示
说了这么多都是理论性的东西直接看脚本和效果吧不需要复杂的配置直接执行打包脚本即可。
package.json脚本
在打包脚本目录下我们提供了一份名叫NiuNiuCaptureElectronDemo的electron源码其中已经包含了基本的打包脚本package.json的配置以及基本的升级相关的代码。
package.json的部分配置如下
{name: TestCapture,version: 1.0.0,main: main.js,description: ,author: supportleeqia.com,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_nameleeqia_general
rem 安装包名前缀
set output_setup_prefixLeeqiaCapture_PC_Setup_rem 主程序名称 (可根据你的项目自行调整)
set main_exe_nameTestCapture.exerem electron程序中打包的guid用于安装在注册表中的key卸载与软件信息
set electron_guid
rem 软件版本号
set electron_app_version
rem 是安装到所有用户下还是安装到当前用户下all/current
set shell_all_user_modeall
rem 安装包的启动权限user/admin
set install_execution_leveladmin
rem electron项目所在目录
set electron_build_path.\NiuNiuCaptureElectronDemo
set electron_unpacked_dir%electron_build_path%\dist\win-unpacked
rem 读取yml文件提取版本号和guid信息
.\Helper\NSISHelper.exe --modeget_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.exelatest.yml
我们将打好的安装包和升级文件复制到e:\testweb\update目录下然后运行之前安装好的1.0.0版本的测试程序 此时将会弹出检测到新版本的安装包是否进行升级的提示点击确认升级就开始了升级完成后会自动再次拉起主程序来。 与旧的Electron应用程序的兼容
如果之前已经通过electron打包发布了的程序替换成由nsNiuniuSkin打的安装包要如何与旧的版本完全兼容呢
这是非常重要的一点也是众多Electron开发者在切换安装包打包工具时的困惑所在。
我们之所以要读取package.json中的guid就是想要实现与旧版本兼容。只要知道了它我们就能够在脚本中定位原来旧的Electron安装包的安装位置可以进一步进行覆盖安装。
当然要处理的细节还是比较多的比如
安装路径的读取与写入 安装位置我们使用的key值是InstPath而Electron使用的key值是InstallLocation我们在接下来会介绍的build-by-external.batbuild-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_keyInstallLocation总结
看完上述的介绍与演示是不是觉得非常简单呢 所有复杂的逻辑以及需要与electron-updater交互的地方都由我们安装包制作方案自动完成提供出统一的接口。
整个过程非常简单配置build-for-electron.bat中的各个参数(如果你的electron-builder的配置文件还没配置好也需要配置下)然后执行此脚本安装包就打包好了。
你对Electron应用的安装包美化和升级还有什么疑惑么有机会一起探讨一下吧。
结语
在安装包安装过程中精美的UI往往能让客户对所安装产品的印象更加深刻更能体现出软件服务商在用户体验上的专注与用心 希望我们的努力能够让安装包制作再容易一点再快乐一点今后Electron程序的打包就交给我们吧^_^
愿天下没有难做的安装包
