Electron打包的App無法在蘋果電腦上運(yùn)行的原因分析

一、架構(gòu)問題

在蘋果電腦上運(yùn)行的應(yīng)用程序必須是針對(duì)macOS的特定架構(gòu)編譯的。如果您的Electron應(yīng)用程序未針對(duì)x86或x64架構(gòu)進(jìn)行編譯，那么它在蘋果電腦上就無法正常運(yùn)行。建議檢查您的應(yīng)用程序架構(gòu)是否適配macOS系統(tǒng)。

二、版本問題

應(yīng)用程序的構(gòu)建版本必須與蘋果電腦的操作系統(tǒng)版本相匹配。如果您的Electron應(yīng)用程序是基于較早版本的macOS構(gòu)建的，那么在新版的macOS上就可能無法運(yùn)行。請確認(rèn)您的應(yīng)用程序的構(gòu)建版本與蘋果電腦系統(tǒng)版本兼容。

三 結(jié)安全設(shè)置

蘋果電腦的安全設(shè)置嚴(yán)格，未經(jīng)認(rèn)證或沒有正確代碼簽名的應(yīng)用程序可能會(huì)被系統(tǒng)阻止運(yùn)行。如果您的Electron應(yīng)用程序遇到這種情況，建議嘗試修改蘋果電腦的安全設(shè)置，允許運(yùn)行未經(jīng)認(rèn)證的應(yīng)用程序。

基于Umi搭建Electron App的步驟與注意事項(xiàng)

一、開發(fā)前的準(zhǔn)備工作

在開發(fā)之前，需要準(zhǔn)備好Node環(huán)境，并安裝Node及Npm工具。建議使用nvm來管理多個(gè)版本的Node，以確保開發(fā)流程的順暢。建議參考特定的Node和Npm版本進(jìn)行Umi+Antd+Electron框架的搭建。

二、集成Ant Design與搭建框架

為了集成Ant Design作為UI庫，建議直接參考Ant Design Pro的搭建步驟，而非UmiJS，以節(jié)省集成時(shí)間。對(duì)于Windows系統(tǒng)用戶，在搭建過程中可能會(huì)遇到一些問題，需要找到相關(guān)文件并按照步驟操作解決。

三、創(chuàng)建React項(xiàng)目與配置Electron

使用create-umi命令生成React項(xiàng)目時(shí)，要選擇適合的配置選項(xiàng)以確保項(xiàng)目按需求搭建。在引入Electron依賴并編寫主進(jìn)程文件main.js時(shí)，要確保遵循Electron官網(wǎng)文檔，使用正確的命令加載URL，并與Webpack的devServer配置保持一致。

四、配置與打包策略

配置Electron主進(jìn)程文件時(shí)，需注意端口使用，確保與Webpack的配置相匹配。若本地端口被占用，可通過配置文件或環(huán)境變量調(diào)整。打包Electron App時(shí)，要使用electron-builder工具，并根據(jù)操作系統(tǒng)進(jìn)行相應(yīng)的配置。 針對(duì)Electron App的打包配置，需要關(guān)注歷史路由模式、publicPath以及outputPath等參數(shù)的調(diào)整。確保webpack的配置適應(yīng)Electron的打包需求。還需根據(jù)生產(chǎn)環(huán)境和開發(fā)環(huán)境分別處理加載渲染進(jìn)程的方式，避免打包后出現(xiàn)白屏等問題。

五、優(yōu)化策略與社區(qū)分享

為了優(yōu)化Electron App的打包體積，可以采取資源壓縮、使用更高效的打包工具或技術(shù)等方法。完成搭建后，可將框架分享至Gitee，供社區(qū)成員學(xué)習(xí)和使用。

Electron生命周期介紹

作為一款跨平臺(tái)的GUI框架，Electron為了滿足多樣化場景的需求，其系統(tǒng)豐富且復(fù)雜。深入了解Electron的生命周期流程，需要對(duì)應(yīng)用生命周期、窗口生命周期以及頁面內(nèi)生命周期的各個(gè)階段有清晰的認(rèn)知。除了啟動(dòng)、激活、關(guān)閉等基本外，還包括更多細(xì)致的劃分，如應(yīng)用級(jí)別的“準(zhǔn)備啟動(dòng)”或窗口級(jí)別的“加載完成”等。 通過對(duì)這些生命周期的深入了解與合理利用，開發(fā)者可以更好地控制應(yīng)用的運(yùn)行流程，實(shí)現(xiàn)更精細(xì)化的控制和優(yōu)化。例如，在應(yīng)用的啟動(dòng)過程中捕獲關(guān)鍵來執(zhí)行必要的初始化操作，或是在窗口關(guān)閉前完成一些清理工作等。

對(duì) Electron 生命周期的詳細(xì)解析

一、應(yīng)用啟動(dòng)與退出

App介紹：

在 Electron 應(yīng)用中，一系列的生命周期在應(yīng)用的啟動(dòng)、運(yùn)行和退出過程中被觸發(fā)，這些為開發(fā)者提供了干預(yù)和自定義應(yīng)用行為的機(jī)會(huì)。

1. will-finish-launching：在 Windows/Linux 系統(tǒng)中與 ready 相似，而在 macOS 中，它相當(dāng)于 NSApplication 的 applicationWillFinishLaunching 通知。這是應(yīng)用初始化階段的最后一個(gè)，常用于文件打開監(jiān)聽、崩潰報(bào)告和自動(dòng)更新的設(shè)置。

2. ready：應(yīng)用初始化完成后觸發(fā)。這個(gè)適用于開放文件和 URL 監(jiān)聽器的設(shè)置，確保在應(yīng)用準(zhǔn)備好接收外部操作時(shí)執(zhí)行相關(guān)功能。

3. activate：在首次啟動(dòng)、重新打開應(yīng)用或點(diǎn)擊應(yīng)用圖標(biāo)時(shí)重新激活應(yīng)用時(shí)觸發(fā)。這個(gè)通常用于處理窗口恢復(fù)顯示等操作。

4. did-become-active：當(dāng)應(yīng)用切換到前臺(tái)時(shí)觸發(fā)，常用于窗口恢復(fù)焦點(diǎn)的處理。

5. session-created：創(chuàng)建默認(rèn)會(huì)話時(shí)觸發(fā)，適用于網(wǎng)絡(luò)請求環(huán)境的隔離。

6. web-contents-created：當(dāng)創(chuàng)建 webContents 上下文環(huán)境時(shí)觸發(fā)，可能會(huì)被多次初始化。

7. browser-window-created：在創(chuàng)建窗口時(shí)觸發(fā)，它是通過 session-created、web-contents-created 和 browser-window-created 依次完成的。

8. second-instance：在 macOS 中，當(dāng)應(yīng)用再次啟動(dòng)時(shí)觸發(fā)，可以控制是否退出應(yīng)用。

9. window-all-closed：當(dāng)應(yīng)用所有窗口關(guān)閉時(shí)觸發(fā)。通常情況下，關(guān)閉所有窗口會(huì)自動(dòng)退出應(yīng)用，但如果監(jiān)聽了此，則不會(huì)退出。

10. before-quit 和 will-quit：這兩個(gè)分別在中斷常規(guī)關(guān)閉應(yīng)用和即將退出應(yīng)用時(shí)觸發(fā)，用于執(zhí)行退出前的清理工作。

11. quit：在 Windows 系統(tǒng)中關(guān)閉應(yīng)用時(shí)觸發(fā)，可以處理退出邏輯。

二、BrowserWindow介紹

BrowserWindow 是 Electron 中代表桌面窗口的類。以下是一些常用的：

1. close：比 Web 中的 DOM unload 和 beforeunload 更早觸發(fā)，常用于處理窗口關(guān)閉邏輯。

2. closed：這是一個(gè)異步，無法在回調(diào)中影響 BrowserWindow 生命周期。

3. ready-to-show：當(dāng)窗口屬性設(shè)置為 show:true 時(shí)觸發(fā)，即使窗口未顯示也會(huì)觸發(fā)此。

三、Renderer進(jìn)程中的Web介紹

Renderer 進(jìn)程是 Electron 中處理網(wǎng)頁渲染的進(jìn)程。以下是一些常用的 Web ：

window:load：在網(wǎng)頁開始加載時(shí)觸發(fā)，其監(jiān)聽方法與 Web 中的 unload、beforeunload 類似。這個(gè)是網(wǎng)頁加載過程中的一個(gè)重要節(jié)點(diǎn)，可以用于執(zhí)行一些頁面加載完成后的操作。深入理解Electron生命周期中的關(guān)鍵

隨著Electron的廣泛應(yīng)用，了解其生命周期中的關(guān)鍵對(duì)于開發(fā)者來說至關(guān)重要。下面，我們將深入探討幾個(gè)重要的Electron生命周期，包括window的unload和beforeunload、退出場景、啟動(dòng)場景以及其他相關(guān)。

一、Window相關(guān)

在Electron中，window對(duì)象的相關(guān)對(duì)于應(yīng)用的行為和性能有著重要影響。

window: unload

此不會(huì)被中斷，通常與關(guān)閉窗口和重新加載窗口相關(guān)。當(dāng)窗口關(guān)閉或需要進(jìn)行重載時(shí)，此會(huì)被觸發(fā)。

window: beforeunload

此在中斷時(shí)可以處理用戶試圖離開窗口前的邏輯。例如，當(dāng)用戶在離開頁面前需要保存更改或彈出確認(rèn)對(duì)話框時(shí)，可以使用此。

二、退出場景

了解應(yīng)用的退出場景有助于開發(fā)者更好地管理應(yīng)用的狀態(tài)和資源。

正常退出

通過主進(jìn)程調(diào)用process.crash()實(shí)現(xiàn)正常退出，確保應(yīng)用的所有資源得到妥善處理和釋放。

SIG信號(hào)退出

通過命令行如Ctrl+c、kill -s KILL或kill -9關(guān)閉進(jìn)程。這些信號(hào)可以幫助開發(fā)者優(yōu)雅地關(guān)閉應(yīng)用，保存狀態(tài)信息并釋放資源。

三、啟動(dòng)場景

應(yīng)用的啟動(dòng)過程同樣重要，了解啟動(dòng)場景有助于優(yōu)化啟動(dòng)流程。

普通啟動(dòng)

通過雙擊軟件啟動(dòng)，經(jīng)歷will-finish-launching和ready后，進(jìn)入應(yīng)用界面。在這個(gè)過程中，開發(fā)者可以執(zhí)行一些初始化操作和資源加載任務(wù)。

單例模式啟動(dòng)

檢測是否為單例模式，通過app.requestSingleInstanceLock()實(shí)現(xiàn)。在單例模式下，當(dāng)應(yīng)用已經(jīng)運(yùn)行時(shí)，再次啟動(dòng)將不會(huì)創(chuàng)建新的實(shí)例，而是激活已有的實(shí)例。

還有命令行啟動(dòng)、url scheme啟動(dòng)和拖拽啟動(dòng)等場景，開發(fā)者可以根據(jù)實(shí)際需求進(jìn)行定制和優(yōu)化。

四、其他關(guān)鍵

除了上述外，還有一些關(guān)鍵對(duì)Electron應(yīng)用的行為和性能有重要影響。

web-contents-created觸發(fā)多次

在某些情況下，如打開DevTools或在Windows環(huán)境中，此可能會(huì)重復(fù)觸發(fā)。了解這一點(diǎn)的觸發(fā)條件和場景，有助于開發(fā)者更好地管理和優(yōu)化web-contents資源。

退出處理

通過第三方庫如edge.js實(shí)現(xiàn)更詳細(xì)的退出邏輯管理。在退出時(shí)，開發(fā)者可以執(zhí)行一些清理操作，如保存狀態(tài)信息、釋放資源等。

BrowserWindow實(shí)例銷毀

當(dāng)BrowserWindow實(shí)例被銷毀時(shí)，僅觸發(fā)closed，其他關(guān)閉相關(guān)不會(huì)觸發(fā)。了解這一點(diǎn)有助于開發(fā)者正確管理BrowserWindow的生命周期。

通過深入理解Electron生命周期中的關(guān)鍵，開發(fā)者可以更好地控制和管理應(yīng)用的啟動(dòng)、運(yùn)行和退出流程，提高應(yīng)用的性能和用戶體驗(yàn)。無論是處理window、退出場景、啟動(dòng)場景還是其他關(guān)鍵，都需要開發(fā)者根據(jù)實(shí)際情況進(jìn)行定制和優(yōu)化。