前端工程师使用electron可以跨应用做的桌面客户端,但是打包后的安装界面很不美观
查找资料得知需要编写NSIS脚本更改安装界面,但是通关百度找到了一个NSIS-UI,集成于NSIS的插件,采用Duilib开发,效果图如下:
在控件的资源中,采用的是通过TAB控件来实现不同阶段的安装界面,比如:选择路径、许可协议、安装进度、完成、卸载等,在实际使用中,通过NSIS脚本来设置当前需要显示的TAB页,即可完美的呈现出需要的界面UI了。
插件官网地址:http://www.ggniu.cn/
示例程序包及说明文档下载地址:
http://www.ggniu.cn/download/Niuniu_NSIS_SetupSkin.zip
http://www.ggniu.cn/download/Description_of_NiuniuSetupSkin.doc
下载后解压后得到以下目录:
其中: FilesToInstall目录是需要打包的内容,对应electron打包完成后的win-unpacked目录
Outptu是通过NSIS打包后的安装包所在目录
SetupScripts是配置安装界面的目录
在当前目录下,有示例文件夹,可通过直接修改示例文件夹达到你想要的结果
示例文件夹下:后缀.nsi脚本记录当前项目信息
后缀.nsh 安装界面需要的ui,例如需要展示用户协议、安装路径等
build.bat是执行打包的脚本(双击即可执行)
(可以通过把这些文件复制到项目当中,使用webpack执行一个命令打包完成(使用node复制文件到打包))
注:本人对nsis脚本语法不是很了解,只是修改示例文件达到我想要的结果