Electron實戰:創建ELectron開發的window應用安裝包


前言:研究electron自動更新的時候,在electron的官方文檔auto-updater 中,提到了在幾個平台mac,Linuxwindows下electron 的自動更新方法,其中windsow平台上面,文章中建議先用grunt-electron-installer 模塊來創建windows安裝包,grunt這個工具是由Squirrel集成的。進而了解下Squirrel這個工具, 一個可以用來給electron應用的安裝更新卸載添加快捷方式的工具。本文主要提及如何在windows平台下,用Squirrel創建electron的.exe安裝包。

 

創建nuget包

我們的方法是使用nuget工具創建Nuget包,再使用Squirrel工具創建.exe。

1.下載squirrel.exenuget.exe,也可以選擇直接安裝Squirrel.Windows (需要有vitual studio環境)。

 

2.新建文件夾如my-build,把下載好的squirrel.exe,nuget.exe和setup.exe

放進去,在文件夾放入我們未打包的electron應用,如下圖:

 

 

4.在my-build根目錄中,打開命令行執行nuget spec

如下圖:

生成 spec包初始文件

5.編輯器打開 Package.nuspec,按照自己項目的需要編輯這個文件,如下圖:

 

這里需要注意:根據Squirrel文檔說明,target folder 屬性需要設置為lib/net45,否則並沒有用;<iconUrl>標簽用來制定未來的exe的icon。

5.用下面的命令創建一個nuget包,

nuget pack Package.nuspec

如下圖:

之后在目錄中會出現這個包

命名規則就是<my_app_name>.<version>.nupkg

 

創建安裝程序

 

把應用程序打包成nuget包之后,就可以用squirrel創建一個安裝程序了。在根目錄打開命令行,執行以下命令:

squirrel --releasify <my_app_name>.<version>.nupkg

 

這個時候命令行中沒有任何提示。但是別慌,編譯一段時間后程序會創建一個release文件夾,里面有三個文件,nuget包,RELEASES 文件和安裝文件Setup.exe。如下圖:

如果沒有出現這三個文件,可以查看目錄中的SquirrelSetup.log,根據里面的報錯,來進行調試。

注意上面這條squirrel 命令,可以用來設置setup.exe在安裝過程中用傳統icon還是用自定義的圖片文件。使用Squirrel --help可以查看更多幫助

 

發布應用和安裝應用

把上一步生成的setup.exe發送給想要安裝這個應用的用戶,就可以了。

最終應用會被安裝在C:\Users\Administrator\AppData\Local\[appname] 文件夾中,注意Squirrel 的日志文件也存在目錄中,調試安裝問題的時候非常有用。

雙擊我們的setup.exe進行安裝app的測試,如果中途有任何出錯,在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安裝日志。如下圖:

 

安裝之后打開C:\Users\Administrator\AppData\Local 目錄,可以看到app安裝在這里,如下圖:

自動創建快捷方式

進入我們安裝之后的文件夾,命令行進入C:\Users\Administrator\AppData\Local\[your appname],執行 Update.exe --help ,可以看到

 

不知道從上圖你有沒有得到什么提示,反正我發現了,在命令行手動創建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i  [your ico toute]\app.ico

所以,如果我們想讓應用在安裝過程中靜默地創建好快捷方式,那就需要在app的安裝之后相反設法執行這句代碼。

因為我們的.exe會在安裝之后自動打開程序,所以我在程序的入口main.js,添加sqruieel事件的監聽就好了。如下圖:

我順便把程序卸載時,刪除快捷方式的監聽事件也寫了進去。還有程序的更新和刪除事件監聽,但是這兩個事件,我還沒有進行測試。

更新應用

其實我一直很想做增量更新,在這里我的更新方法有兩個,第一是在程序的入口添加js,發送請求到服務器,拉取更改文件進行本地替換,但是如果是node_module依賴包的更改,這個方法並不可行。第二個方法比較安全而且快捷通過發布一個版本號不同的exe,如下:1.在這個創建安裝程序的步驟2中,我們把程序代碼都復制到了這個文件夾里面,如下圖:

 

如果后續我們的程序要進行更新,首先我們需要把更改的文件直接復制替換到這個文件夾。

2.打開Package.nuspec,編輯version標簽

 

3.參考本文種中創建安裝程序部分的步驟2-4,重新生成setup.exe,發布應用。

 

通過執行setip.exe安裝,程序會自動刪除之前的應用,但是我並不清楚,sqruieel 是進行了增量替換,還是將之前的整個應用進行刪除,再重新安裝。

創建自定義安裝包

在上一步,我們已經把自己的exe發布出來了,但是如果沒有自定義名字跟icon,好像還不夠酷,所以我們需要創建自定義的安裝文件。

1.下載安裝 Resource Hacker

2.打開這個項目目錄,在electron.exe上面右鍵

出現菜單,點擊 Open using Rescource Hacker。

3.Resource Hacker應用運行之后中,在以下界面中選擇Icon,然后在工具欄里面選擇Action,Replace Icon,如下圖:

 

 

然后選擇自己想要替換的.ico文件就好

 

4.這其實並不夠,我們還需要更換exe里面的版本信息,打開Version Info,把FileDescription和ProductName改成我們自己的項目名稱,最好把SquirrelAwareVersion也更改一下,畢竟是版本號。

5.做完這些之后,我們需要按照之前的步驟,在命令行中輸入

nuget pack Package.nuspec

重新生成nuget包,然后再使用

 squirrel --releasify <my_app_name>.<version>.nupkg 命令創建安裝文件。

6.打開之后生成的releases文件夾,參考本文種中創建安裝程序部分的步驟2-4,對setup.exe進行自定義。

 

最后,一個可以自動更新又安裝便捷,還有我們自己的酷酷的圖標跟名字的應用就生成拉!


免責聲明!

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



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