自定義electron打包后安裝界面


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM