nsNiuniuSkin从发布之初,因其简单、简洁、高效,受到了非常多公司的青睐,现在已经越来越多的公司采用我们的这套解决方案来制作安装包了!
从一个安装包UI插件,逐步演化成一套集美观、安全、简洁、自动化为一体的完整的解决方案,实属不易,感谢所有朋友的信任!
网上有不少关于Electron安装包美化的文章,有使用sciter的,有使用QT的,也有基于我们早期版本进行深度或简单集成的;整体看下来,这些方案多少会有一点问题:
而现在Electron应用非常广泛,Electron应用程序的安装包制作,当然少不了我们;在翻看了electron-builder和electron-updater源码后,再结合反解Electron应用程序的安装包脚本,我们了解了其运作的机制,实现了一套与Electron打包无缝对接的方案,完全支持自动化,兼容electron程序的升级。
之前有了解到有一个朋友做Electron安装包的美化,前后花费了一个月时间的,真的让人痛心!希望有了我们的方案,大家能够在一天内完成安装包的制作以及升级功能的对接。
在实际介绍nsNiuniuSkin的Electron安装包制作方案之前,我们需要讲清楚几个原理:
electron-builder内置了很多模板化的nsis脚本,在package.json中的关于nsis的设置,将会通过参数的形式,结合模板,最终形成完整的打包脚本,进而生成安装包。 如果你有想不明白的打包与升级的问题,基本都可以在electron-builder的源码中找到相关的答案或者资料。
此处我们只讲全量更新,electron-updater升级流程如下:
知道了Electron打包与升级的逻辑,我们的Electron打包方案就变的容易了,处理细节较多,这里我们主要介绍几个技术要点:
有人会说Electron自己的打包就是这样,你做的这些有什么意义呢?
意义非常大,且听我道来:
说了这么多,都是理论性的东西,直接看脚本和效果吧,不需要复杂的配置,直接执行打包脚本即可。
在打包脚本目录下,我们提供了一份名叫NiuNiuCaptureElectronDemo的electron源码,其中已经包含了基本的打包脚本package.json的配置,以及基本的升级相关的代码。
package.json的部分配置如下:
{
"name": "TestCapture",
"version": "1.0.0",
"main": "main.js",
"description": "",
"author": "[email protected]",
"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/"
}
]
}
}
上述打包脚本配置,表示我们的一些核心配置如下:
同时我们提供了一份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,就可以开始打包了,他将会做几件事:
以下是我们的打包脚本执行过程:
打包完成后,最终打包出来的安装包程序:
安装效果如下:
开始安装:
安装中:
在上一节中,我们已经打出来了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进行打包,此时我们会得到两个文件:
我们将打好的安装包和升级文件复制到e:\testweb\update目录下,然后运行之前安装好的1.0.0版本的测试程序:
此时将会弹出检测到新版本的安装包,是否进行升级的提示,点击确认,升级就开始了,升级完成后,会自动再次拉起主程序来。
如果之前已经通过electron打包发布了的程序,替换成由nsNiuniuSkin打的安装包,要如何与旧的版本完全兼容呢?
这是非常重要的一点,也是众多Electron开发者在切换安装包打包工具时的困惑所在。
我们之所以要读取package.json中的guid,就是想要实现与旧版本兼容。只要知道了它,我们就能够在脚本中定位原来旧的Electron安装包的安装位置,可以进一步进行覆盖安装。
当然要处理的细节还是比较多的,比如:
不光如此,类似的其他方案制作的安装包,要无缝的切换成我们的安装包方案,也是很简单的:
我们在脚本中内置了注册表key的默认值,只需要将其修改成您旧的程序写的key即可确保读写用的是同一个键值。
在我们的打包方案中,我们提供了两种形式的打包脚本,同时兼顾不同场景的打包需求:
之所以称之为主动打包,是因为打包的触发入口是在我们的打包入口脚本中,我们提供了一个叫build-for-electron.bat脚本,在其中只要配置好以下几点,就可以开始打包了(上面的示例已经介绍):
被动打包的意思是说打包的触发点不在我们这边,而是有其他流程已经打出来了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程序的打包,就交给我们吧!^_^
愿天下没有难做的安装包!