Electron 平台指南

Electron 是一個使用 Web 技術（HTML、CSS 和 JS）來建構跨平台桌面應用程式的框架。

系統需求

Linux

Python 版本 2.7.x。建議檢查您的 Python 版本，因為某些發行版 (例如 CentOS 6.x) 仍使用 Python 2.6.x。

Mac

Python 版本 2.7.x，並支援 TLS 1.2。
Xcode，macOS 的 IDE，捆綁了必要的軟體開發工具，可進行程式碼簽署和編譯 macOS 的原生程式碼。版本 8.2.1 或更高版本。
RedHat 建構支援
- Homebrew，可用的 macOS 套件管理員之一，用於安裝其他工具和相依性。安裝 RPM 打包相依性時需要 Homebrew。Brew 安裝步驟
- RPM，多個 Linux 發行版的標準套件管理員，是用於建立 Linux RPM 套件的工具。若要安裝此工具，請使用以下 Homebrew 命令
```
brew install rpm
```

Windows

Python 版本 2.7.10 或更高版本。
對於 Windows 7 使用者，PowerShell 的版本必須為 3.0 或更高版本，才能進行應用程式簽署。
Windows 偵錯工具 是一套用於增強偵錯能力的工具組。建議使用 Windows SDK 10.0.15063.468 進行安裝。

快速開始

建立專案

npm i -g cordova
cordova create sampleApp
cd sampleApp
cordova platform add electron

注意：如果使用 9.x 之前的 Cordova CLI 版本，則對於任何需要平台名稱的命令，您需要使用 cordova-electron 引數而不是 electron。例如

cordova platform add cordova-electron
cordova run cordova-electron

預覽專案

預覽不需要建構 Electron 應用程式。由於建構過程可能很慢，因此建議在預覽時傳遞 --nobuild 旗標以停用建構過程。

cordova run electron --nobuild

建構專案

偵錯建構

cordova build electron
cordova build electron --debug

發行建構

cordova build electron --release

自訂應用程式視窗選項

Electron 提供了許多選項來操作 BrowserWindow。本節將介紹如何設定一些基本選項。如需完整的選項列表，請參閱Electron 文件 - BrowserWindow 選項。

在使用 Cordova 專案時，建議在專案的根目錄中建立 Electron 設定檔，並在 config.xml 檔案中的偏好選項 ElectronSettingsFilePath 中設定其相對路徑。

config.xml 範例

<platform name="electron">
    <preference name="ElectronSettingsFilePath" value="res/electron/settings.json" />
</platform>

若要覆寫或設定任何 BrowserWindow 選項，請將選項新增至此檔案中的 browserWindow 屬性。

res/electron/settings.json 範例

{
    "browserWindow": { ... }
}

如何設定視窗的預設大小

依預設，width 設定為 800，而 height 設定為 600。可以透過設定 width 和 height 屬性來覆寫此設定。

範例

{
    "browserWindow": {
        "width": 1024,
        "height": 768
    }
}

如何停用視窗的大小調整

設定 resizable 旗標屬性，您可以停用使用者調整應用程式視窗大小的功能。

範例

{
    "browserWindow": {
        "resizable": false
    }
}

如何使視窗全螢幕

使用 fullscreen 旗標屬性，您可以強制應用程式以全螢幕模式啟動。

範例

{
    "browserWindow": {
        "fullscreen": true
    }
}

如何支援 Node.js 和 Electron API

將 nodeIntegration 旗標屬性設定為 true。依預設，此屬性旗標設定為 false，以支援使用與 Node.js 和 Electron 已使用符號相同名稱的常用程式庫。

您可以在 Electron 文件中閱讀更多相關資訊：我無法在 Electron 中使用 jQuery/RequireJS/Meteor/AngularJS。

範例

{
    "browserWindow": {
        "webPreferences": {
            "nodeIntegration": false
        }
    }
}

自訂 Electron 的主要程序

如果有必要自訂 Electron 的主要程序，超出 Electron 設定的範圍，則可以直接將變更新增到位於 {PROJECT_ROOT_DIR}/platform/electron/platform_www/ 中的 cdv-electron-main.js 檔案。這是應用程式的主要程序。

❗ 但是，不建議修改此檔案，因為 cordova-electron 的升級過程是在新增新版本之前移除舊平台。

DevTools

--release 和 --debug 旗標會控制 DevTools 的可見性。預設情況下，偵錯建構會顯示 DevTools（不帶旗標 或帶有 --debug）。如果您想隱藏 DevTools，請在建構或執行應用程式時傳遞 --release 旗標。

注意：可以使用偵錯建構手動關閉或開啟 DevTools。

建構組態

預設建構組態

依預設，在沒有其他組態的情況下，cordova build electron 會為觸發命令的主機作業系統 (OS) 建構預設套件。以下是每個作業系統的預設套件清單。

Linux

套件	架構
tar.gz	x64

Mac

套件	架構
dmg	x64
zip	x64

Windows

套件	架構
nsis	x64

自訂建構組態

如果由於任何原因想要自訂建構組態，則修改會放在專案根目錄中的 build.json 檔案中。例如，{PROJECT_ROOT_DIR}/build.json。此檔案包含所有平台（Android、Electron、iOS、Windows）的所有建構組態。

組態結構範例

{
    "electron": {}
}

由於 Electron 框架用於建立跨平台應用程式，因此每個作業系統建構都需要多個組態。build.json 檔案中的 electron 節點包含三個屬性，用於分隔每個作業系統的建構組態。

包含每個平台的組態結構範例

{
    "electron": {
        "linux": {},
        "mac": {},
        "windows": {}
    }
}

每個作業系統節點都包含用於識別要產生的套件以及如何簽署的屬性。

作業系統屬性

package 是要產生的套件格式陣列。
arch 是每個套件建構時所使用的架構陣列。
signing 是包含簽署資訊的物件。如需更多資訊，請參閱簽署組態。

任何未定義的屬性都將回退為預設值。

新增 `package`

package 屬性是要輸出的套件陣列清單。如果已定義此屬性，則除非新增，否則不會使用預設套件。套件的順序並不重要。

以下組態範例將為 macOS 產生 tar.gz、dmg 和 zip 套件。

{
    "electron": {
        "mac": {
            "package": [
                "dmg",
                "tar.gz",
                "zip"
            ]
        }
    }
}

按作業系統提供的套件

套件類型	Linux	macOS	Windows
預設	-	`dmg` `zip`	-
dmg	-	✅	-
mas	-	✅	-
mas-dev	-	✅	-
pkg	-	✅	-
7z	✅	✅	✅
zip	✅	✅	✅
tar.xz	✅	✅	✅
tar.lz	✅	✅	✅
tar.gz	✅	✅	✅
tar.bz2	✅	✅	✅
dir	✅	✅	✅
nsis	-	-	✅
nsis-web	-	-	✅
portable	-	-	✅
appx	-	-	✅ ^[1]
msi	-	-	✅
AppImage	✅	-	-
snap	✅	-	-
deb	✅	-	-
rpm	✅	-	-
freebsd	✅	-	-
pacman	✅	-	-
p5p	✅	-	-
apk	✅	-	-

[1] 只有 Windows 10 可以建構 AppX 套件。

設定套件 `arch`

arch 屬性是每個套件建構時所使用的架構陣列清單。定義此屬性時，除非新增，否則不會使用預設的 arch。

❗ 並非每個作業系統都提供所有架構。請檢閱Electron 版本以識別有效組合。例如，macOS (Darwin) 僅支援 x64。

可用的 Arch

ia32
x64
armv7l
arm64

上面的範例將產生一個 x64 dmg 套件。

{
    "electron": {
        "mac": {
            "package": [ "dmg" ],
            "arch": [ "x64" ]
        }
    }
}

多平台建構支援

❗ 並非所有平台都支援此功能，而且可能存在限制。

在單一作業系統上為多個平台建構可能可行，但存在限制。建議建構器的作業系統 (主機作業系統) 與正在建構的平台相符。

下表顯示每個主機作業系統及其能夠建構應用程式的平台。

主機 ^[1]	Linux	Mac	Windows
Linux	✅		❗ ^[2]
Mac ^[3]	✅	✅	❗ ^[2]
Windows			✅

限制

[1] 如果應用程式包含原生相依性，則只能在目標平台上編譯。
[2] Linux 和 macOS 無法為 Windows Store 建構 Windows Appx 套件。
[3] 除 rpm 外，所有必要的系統相依性都將按需自動下載。RPM 可以使用 brew 安裝。(macOS Sierra 10.12+)

以下範例啟用所有作業系統的多平台建構，並使用預設的建構組態。

{
    "electron": {
        "linux": {},
        "mac": {},
        "windows": {}
    }
}

簽署組態

macOS 簽署

有三種類型的簽署目標。(debug、release 和 store)。每個區段都具有以下屬性

金鑰	描述
權限	權限檔案的字串路徑值。
entitlementsInherit	繼承安全性設定的權限檔案的字串路徑值。
身分識別	憑證名稱的字串值。
需求	需求檔案的字串路徑值。 ❗ 這不適用於 `mas` (store) 簽署組態。
佈建描述檔	佈建描述檔的字串路徑值。

組態範例

{
    "electron": {
        "mac": {
            "package": [
                "dmg",
                "mas",
                "mas-dev"
            ],
            "signing": {
                "release": {
                    "identity": "APACHE CORDOVA (TEAMID)",
                    "provisioningProfile": "release.mobileprovision"
                }
            }
        }
    }
}

對於 macOS 簽署，簽署資訊的使用方式有一些例外情況。依預設，除了 mas 和 mas-dev 之外的所有套件都使用 debug 和 release 簽署組態。

使用上述範例組態，讓我們來看一些使用案例，以更好地理解例外情況。

使用案例 1

cordova build electron --debug

上面的命令將

使用 debug 簽署設定產生 dmg 建置檔和 mas-dev 建置檔。
忽略 mas 目標套件。

使用案例 2

cordova build electron --release