Electron開發(fā)界面與底層連接方法詳解
一、前言
在研究Electron自動更新的過程中，我們發(fā)現(xiàn)在官方文檔中提到了在Mac、Linux、Windows等平臺上Electron的自動更新方法。對于Windows平臺，通常建議使用grunt-electron-installer模塊來創(chuàng)建Windows安裝包。在這個過程中，Squirrel這一工具起著關鍵作用。Squirrel是一個為Electron應用提供安裝、更新、卸載等功能的工具，并能為其添加快捷方式。本文將詳細介紹如何在Windows平臺下，使用Squirrel創(chuàng)建Electron的exe安裝包。
二、創(chuàng)建NuGet包
我們的方法是通過NuGet工具創(chuàng)建NuGet包，再使用Squirrel工具創(chuàng)建exe安裝包。
需要下載squirrel.exe和nuget.exe。也可以選擇直接安裝Squirrel.Windows，但這需要搭配visual studio環(huán)境。
三、準備工作環(huán)境
新建文件夾如my-build，將下載好的squirrel.exe、nuget.exe和setup.exe放進去。接著，將未打包的Electron應用放入此文件夾。
四、生成NuGet包
在my-build根目錄中，打開命令行執(zhí)行“nuget spec”命令，生成spec包的初始文件。
使用編輯器打開Package.nuspec文件，根據(jù)項目需求編輯此文件。這里需要注意：Squirrel文檔提到target folder屬性需設置為lib/net45；iconUrl標簽用于指定未來exe的圖標。
使用命令“nuget pack Package.nuspec”創(chuàng)建一個NuGet包。生成的包命名規(guī)則為
五、創(chuàng)建安裝程序
應用程序打包成NuGet包后，即可使用Squirrel創(chuàng)建一個安裝程序。在根目錄打開命令行，執(zhí)行以下命令：“squirrel--releasify
如果沒有出現(xiàn)這三個文件，可以查看目錄中的SquirrelSetup.log，根據(jù)其中的報錯信息進行調試。這條Squirrel命令還可以用于設置在安裝過程中是否使用傳統(tǒng)的icon或自定義的圖片文件。
讀者可以了解到如何在Windows平臺下，使用Squirrel工具為Electron應用創(chuàng)建exe安裝包的過程。從創(chuàng)建NuGet包到生成安裝程序，每一步都有詳細的操作步驟和注意事項，有助于讀者順利完成Electron應用的打包和安裝工作。使用Squirrel進行應用發(fā)布、安裝及更新
一、應用發(fā)布和安裝
通過Squirrel，我們可以輕松創(chuàng)建應用的安裝程序。一旦生成了setup.exe文件，我們只需將其發(fā)送給想要安裝此應用的用戶即可。最終應用會被安裝在“C:UsersAdministratorAppDataLocal[appname]”文件夾中。Squirrel的日志文件也存在于此目錄中，這在調試安裝問題時非常有用。
安裝過程非常簡單，只需雙擊我們的setup.exe進行測試。如果在安裝過程中有任何錯誤，可以在“C:UsersAdministratorAppDataLocalSquirrelTemp”里查看安裝日志。
二、自動創(chuàng)建快捷方式
在安裝應用的文件夾內，我們可以使用命令行創(chuàng)建快捷方式。例如，通過執(zhí)行“Update.exe--createshortcut electronelectron.exe-i [your ico toute]app.ico”命令，我們可以在安裝過程中靜默地創(chuàng)建好應用的快捷方式。為了在程序安裝后自動執(zhí)行此操作，我們需要在程序的入口main.js中添加Squirrel的監(jiān)聽。我們也提供了刪除快捷方式的監(jiān)聽，以及程序的更新和刪除監(jiān)聽。盡管這兩個尚未進行測試，但為使用者提供了更多的選擇。
三、應用更新
對于應用的更新，我提供了兩種方法。第一種是在程序入口添加js，發(fā)送請求到服務器，拉取更改文件進行本地替換。但這種方法對于node_module依賴包的更改并不適用。第二種方法更為安全和快捷：發(fā)布一個版本號不同的exe。具體步驟包括：復制更改的文件到安裝程序文件夾，編輯Package.nuspec中的version標簽，然后重新生成setup.exe并發(fā)布應用。通過執(zhí)行setip.exe安裝時，程序會自動刪除之前的版本，然后重新安裝新版本。但具體是增量替換還是整體刪除再安裝，尚不清楚。
四、創(chuàng)建自定義安裝包
為了使得安裝包更加個性化，我們需要創(chuàng)建自定義的安裝文件。這可以通過下載并安裝Resource Hacker來實現(xiàn)。在生成的exe文件上右鍵，選擇“Open using Rescource Hacker”，即可進行自定義設置，如更改應用的名字和圖標等。
五、總結
Squirrel為我們提供了便捷的應用發(fā)布、安裝、更新及自定義安裝包的功能。通過簡單的操作，我們可以輕松地管理和維護我們的應用，提供更好的用戶體驗。我們還可以通過Resource Hacker對安裝包進行個性化設置，使得我們的應用更加獨特和吸引人。資源替換與版本定制：你的Electron應用的完美改造
讓我們逐步深入探討如何將一個Vue項目轉化為帶有自動更新、自定義圖標和名稱的Electron應用。以下是詳細的步驟和指南：
一、圖標和資源替換
使用Resource Hacker應用，你可以輕松替換你的Electron應用的圖標和其他資源。步驟如下：
1. 運行Resource Hacker應用后，選擇需要修改的EXE文件。在界面中選擇Icon，點擊工具欄中的Action，然后選擇Replace Icon。
2. 選擇你想要替換的.ico文件。這樣，應用的圖標就會更換為你所選的圖標。
3. 除了圖標，還需要更改exe里的版本信息。打開Version Info，將FileDescription和ProductName改為你自己的項目名稱。建議更改SquirrelAwareVersion，以確保版本號的準確性。
二、NuGet包生成與安裝文件創(chuàng)建
完成資源替換后，我們需要重新生成NuGet包并創(chuàng)建安裝文件：
1. 在命令行中輸入`nuget pack Package.nuspec`重新生成NuGet包。
2. 使用命令`squirrel--releasify
三、Electron應用的快速搭建
接下來，我們將探討如何快速搭建一個Electron應用：
1. 通過執(zhí)行`pnpm create@quick-start/electron`命令，可以快速構建一個基礎項目。啟動后，你將看到一個預覽的Electron應用界面。
2. 項目結構上，我們從`renderer`目錄開始改造，這里主要包含Vue3代碼。你可以根據(jù)自己的需求對`App.vue`進行改造，實時反映在主窗口上。
3. 除了界面修改，還可以調整應用窗口的配置，如標題。只需在`renderer/index.html`中進行相應更改即可。
四、Vue項目的改造
對于已有的Vue項目，如何將其轉化為Electron應用呢？下面是升級改造的過程及注意事項：
1. 項目情況：改造項目為Vue 2的web端項目，使用element-admin后臺框架。
2. 技術方案及環(huán)境配置要求：使用electron-vue腳手架可以快速生成一個項目模板。對于已存在的Vue項目，可以直接安裝electron-builder。確保你的node環(huán)境版本大于或等于14。為了實現(xiàn)開發(fā)環(huán)境的實時編譯，需要進行相應的配置。
總結：
通過以上步驟，你已經成功地將你的Vue項目轉化為一個帶有自定義圖標、名稱和版本號的Electron應用，并掌握了如何生成NuGet包和創(chuàng)建安裝文件。希望這篇文章能幫助你順利完成Electron應用的升級改造！安裝與配置 Electron-Builder：Vue 應用打包指南
一、安裝依賴
在開發(fā) Vue 應用并希望使用 Electron 進行打包時，首先需要安裝 electron-builder。這是一個容易出現(xiàn)問題的步驟，但只要你按照步驟操作，成功安裝并非難事。主要問題通常與 node 版本或網絡問題有關。
為了應對這些問題，我們可以嘗試切換 npm 路徑至淘寶鏡像，使用路徑管理工具 nrm 進行操作。通過 nrm 查看所有路徑，并使用 nrm use taobao 切換至淘寶鏡像，以提高安裝速度并減少網絡問題。
二、入口文件
成功安裝 electron-builder 后，你的項目中會出現(xiàn)一個名為 background.js 的新文件，這是 electron-builder 的入口文件。你可以在此配置高度以及渲染文件的路徑，確保應用界面符合你的需求。
三、編譯命令
在 page.json 文件中，你會找到運行和打包的命令。你需要配置針對特定平臺的打包命令。例如：
"electron:build": "vue-cli-service electron:build"，用于構建生產環(huán)境的 Electron 應用。
"electron:serve": "vue-cli-service electron:serve"，用于啟動 Electron 開發(fā)服務器。
"dist-win32": "electron-builder --win --ia32"，用于打包 32 位 Windows 應用。
"dist-win64": "electron-builder --win --x64"，用于打包 64 位 Windows 應用。
"dist-mac": "electron-builder --mac"，用于打包 Mac 應用。
四、打包
執(zhí)行如 npm run dist-mac 的命令進行打包。成功后，你會在 dist_electron 目錄下找到安裝文件。對于 Mac 用戶，這將是一個 dmg 文件。
五、打包遇到的問題
在打包過程中，你可能會遇到一些問題：
1. electron-v2.0.18-darwin-x64.zip 這個包可能無法自動下載。此時需要手動下載，并將文件放入對應路徑。對于 Windows，路徑通常為 C:UsersAppDataLocalelectronCache；對于 Mac，路徑為 ~/Library/Caches/electron/。請確保從可靠的來源，如淘寶鏡像，下載該文件，并可能還需要下載相應的 SHA 文件以驗證完整性。
2. 除了上述特定問題外，還可能遇到其他文件下載問題。建議查看相關資料，如“Mac安裝electron緩慢的3種解決方案”、“Electron打包問題：electron-builder下載各種依賴出錯”等，以找到解決方案。
六、打包完成后
安裝打包后的文件，你可能會遇到一些網絡問題，主要是生產環(huán)境下的請求地址問題。例如，你可能需要修改 BASE_URL 或處理驗證碼請求地址。確保你的應用在生產環(huán)境下能夠正常訪問所需的所有資源和服務。
希望這份指南能幫助你順利安裝和配置 Electron-Builder，將你的 Vue 應用成功打包為 Electron 應用。
