安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级

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升级流程如下:

  1. 在electron-builder打包时,通过配置,会在resources目录下生成一个app-update.yml配置文件,其中包含了当前的版本号,以及升级检测的服务端地址;同时会生成一个elevate.exe的程序(用于在升级包需要管理员权限运行时进行提权)
  2. electron-builder打包完成后,会同步生成一个叫latest.yml文件,其中写了最新的版本号、大小、文件的SHA512哈希值等信息;这些信息将作为客户端升级校验的基础(打包后需要将latest.yml以及安装包放到指定的服务器上)
  3. 客户端运行时,electron-updater下载服务器的latest.yml,与本地的进行对比,判断是否有新版本
  4. 下载latest.yml中安装包文件名对应的文件,并校验其SHA512与大小是否与配置文件中一致
  5. 退出当前主进程,调用新的安装包,并传递--updated --force-run /S等参数(--force-run /S根据updater配置逐项增加)

我们的实现方案

知道了Electron打包与升级的逻辑,我们的Electron打包方案就变的容易了,处理细节较多,这里我们主要介绍几个技术要点:

  1. 自动读取Electron目录下的package.json中的版本号以及guid,这两个信息对于安装包非常重要
  2. 支持从外部指定安装包名、安装权限、安装到当前用户还是所有用户等
  3. 调用Electron打包命令,生成unpacked files,并复制到我们的打包目录下
  4. 安装包打包完成后,自动签名,同时生成latest.yml配置文件,达到完全兼容electron-updater升级的效果
  5. 自动处理electron-updater传递过来的命令行参数,将升级行为处理成与原生的electron打包的安装包一致

我们的优势

有人会说Electron自己的打包就是这样,你做的这些有什么意义呢?

意义非常大,且听我道来:

  1. 我们的安装包UI高度美观,且可以随意扩展
  2. 我们的安装包自带防解包功能,安全性上比Electron自己打出来的更高
  3. 我们的安装包方案中,自带一键生成在线安装包,网站上可以只发布非常小的一个预安装程序即可
  4. 我们除了生成与electron-updater完全匹配的升级包以外,同时支持更灵活的升级方案
  5. 一键式打包,同步生成卸载程序及其签名,防误报

打包示例与效果展示

说了这么多,都是理论性的东西,直接看脚本和效果吧,不需要复杂的配置,直接执行打包脚本即可。

package.json脚本

在打包脚本目录下,我们提供了一份名叫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/"
      }
    ]
  }
}

上述打包脚本配置,表示我们的一些核心配置如下:

  • 版本号为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_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,就可以开始打包了,他将会做几件事:

  • 提取package.json中的guid和version字段,传递给后续的打包流程
  • 进入electron应用程序所在目录下,执行打包脚本npm run build
  • 复制dis\win-unpacked下的文件
  • 执行安装包打包(包含卸载程序、安装程序的打包与签名)
  • 生成最终安装包的latest.yml

以下是我们的打包脚本执行过程:

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第1张图片

 

打包完成后,最终打包出来的安装包程序:

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第2张图片

 

安装效果如下:

开始安装:

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第3张图片

 

安装中:

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第4张图片

 

升级效果展示

在上一节中,我们已经打出来了1.0.0版本的安装包LeeqiaCapture_PC_Setup_1.0.0.exe,并且已经安装到电脑上进行使用;接下来我们演示一下打出新的版本,放到升级目录下,触发旧版本的升级。

我们先需要搭建一个简单的静态http服务器,安装http-server模块即可。

安装后,我们新建立目录e:\testweb\update,然后在e:\testweb目录下下执行: http-server 此时升级服务器就算是准备好了。安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第5张图片

我们将package.json中的version字段改为1.0.1,并再次执行build-for-electron.bat进行打包,此时我们会得到两个文件:

  • LeeqiaCapture_PC_Setup_1.0.1.exe
  • latest.yml

我们将打好的安装包和升级文件复制到e:\testweb\update目录下,然后运行之前安装好的1.0.0版本的测试程序:

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第6张图片

 

此时将会弹出检测到新版本的安装包,是否进行升级的提示,点击确认,升级就开始了,升级完成后,会自动再次拉起主程序来。

安装包UI美化之路-通过nsNiuniuSkin来做Electron程序的打包、发布与升级_第7张图片

 

与旧的Electron应用程序的兼容

如果之前已经通过electron打包发布了的程序,替换成由nsNiuniuSkin打的安装包,要如何与旧的版本完全兼容呢?

这是非常重要的一点,也是众多Electron开发者在切换安装包打包工具时的困惑所在。

我们之所以要读取package.json中的guid,就是想要实现与旧版本兼容。只要知道了它,我们就能够在脚本中定位原来旧的Electron安装包的安装位置,可以进一步进行覆盖安装。

当然要处理的细节还是比较多的,比如:

  • 安装路径的读取与写入 安装位置,我们使用的key值是InstPath,而Electron使用的key值是InstallLocation;我们在接下来会介绍的build-by-external.bat(build-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_key=InstallLocation

总结

看完上述的介绍与演示,是不是觉得非常简单呢? 所有复杂的逻辑以及需要与electron-updater交互的地方,都由我们安装包制作方案自动完成,提供出统一的接口。

整个过程非常简单,配置build-for-electron.bat中的各个参数(如果你的electron-builder的配置文件还没配置好,也需要配置下),然后执行此脚本,安装包就打包好了。

你对Electron应用的安装包美化和升级还有什么疑惑么?有机会一起探讨一下吧。

结语

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

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

你可能感兴趣的:(NSIS,安装包,ui,nsis,nsNiuniuSkin,安装包,electron)