前端工程师使用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脚本语法不是很了解,只是修改示例文件达到我想要的结果

 

安装时,实现浏览器自定义协议注册:https://www.cnblogs.com/caoxiaokang/p/17226802.html