前端工程師使用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腳本語法不是很了解,只是修改示例文件達到我想要的結果