用電子創建跨平台桌面節點應用程序-js教程-PHP中文網

鑰匙要點

>注意：我們在這裡使用受版權保護的漫威屬性來說明目的。請不要以自己的方式分發它們！

我如何創建一個新的電子項目？

終端或命令提示符，然後使用命令電子。此命令啟動您的應用程序。

我可以在我的電子應用中使用node.js模塊嗎？

我可以在我的電子應用中使用Web技術嗎？

首頁

web前端

js教程

用電子創建跨平台桌面節點應用程序

Christopher Nolan

Feb 18, 2025 pm 12:26 PM

用電子創建跨平台桌面節點應用程序

鑰匙要點

Electron允許開發人員使用JavaScript和Web Technologies創建跨平台桌面應用程序。它提供了比以前的選項（例如Flash，Air，Java和Silverlight。

>。 Electron應用程序可以使用Electron-Packager NPM模塊等工具將電子應用程序包裝到“本機”應用中。這會創建一個可執行的二進製文件，該二進制可以在各種平台上運行，包括Windows，MacOS和Linux。

>電子不僅用於簡單的應用程序。它可以處理複雜的功能，並提供訪問剪貼板訪問，應用程序菜單欄工具和用於調試的Chrome Dev工具等功能。通過電子構建了幾種流行的應用，例如Atom，Slack和Kitematic。

>稱我為老式，但我一直更喜歡使用適合每個目的的桌面應用程序。我覺得，如果我要使用的只是我所做的所有事情的瀏覽器，那為什麼要擁有一台“合適的”計算機呢？從實際的層面上，我經常旅行，通常在互聯網連接或使用不穩定的互聯網連接之間進行旅行，並且“真實”應用程序通常在允許有效的離線工作方面要好得多。

我感謝我的開發和維護本地桌面應用程序的複雜程度，並且可以理解為什麼公司將用戶推向Web或跨平台版本。在過去的幾十年中，已經有很多選擇來實現這一目標。 Flash，Air，Java和Sliverlight都是所有能力以不同程度的成功承諾的選項。

這些選項的主要問題是，他們通常涉及學習另一種語言（打敗了這一點）或強迫用戶安裝困擾著穩定，性能和安全問題的插件。

我們都知道JavaScript和Web技術的力量，並看到了使用此知識開發和包裝跨平台桌面應用程序的一波選項。

電子，github是一種選擇，但是由於我已經很高興地使用了與之構建的多個應用程序，因此研究似乎是一個不錯的選擇。經過兩年的開發，包括一個名稱更改（來自原子殼），Electron最近已達到1.0版，這始終是任何項目存在的里程碑。有什麼更好的時間來了解它的能力。

安裝電子

Electron具有快速的啟動項目和預先構建的版本，但讓我們直接潛入深處，並通過NPM安裝電子：

或Mac Homebrew Lovers，通過桶：

<span>npm install electron-prebuilt -g
</span>

登入後複製

無論您遵循哪個選項，您都應最終得到可執行的電子二進制。

用電子創建跨平台桌面節點應用程序

此應用程序僅用於捆綁和運行您的最終項目，而不是為創建一個項目。為此，您可以使用任何標準的文本編輯器或IDE。

一個電子項目需要三個文件：

index.html：默認呈現的網頁。

> main.js：啟動該應用並創建一個瀏覽器窗口以渲染html。
package.json：列出應用程序依賴項，元數據和所需的文件。

用電子創建跨平台桌面節點應用程序你需要一個英雄

在此示例中，我將創建一個簡單的應用程序，該應用程序連接到Marvel API，拉出25個超級英雄並顯示其名稱和縮略圖圖像。當該過程完成並具有類似OS的應用程序圖標時，它將顯示系統通知。最終用戶將不知道如何創建應用程序或能夠查看源代碼。

您可以在github上找到最終項目。

打開軟件包。

這是一個標準軟件包。在此設置應用程序名稱，版本，主JavaScript文件和依賴項。

>在添加它們後運行NPM安裝以確保您安裝了依賴項。 >

brew <span>install Caskroom/cask/electron
</span>

登入後複製

> main.js處理主機操作系統與您的JavaScript代碼之間的交互。這將是一個簡單的例子，您可以在電子文檔中找到更多信息。

首先，讓我們設置所需的要求（即電子），創建一個應用程序，本機瀏覽器窗口和一個可使用的主窗口占位符。

下一個句柄，如果關閉了Windows，請退出應用程序。如果平台是OS X，則應用程序關閉所有窗口後通常會保持打開狀態，並且用戶通常會明確戒菸，因此請處理該用例。

初始化電子後，創建瀏覽器窗口並加載應用程序代碼。如果窗口關閉，請解除窗口對象。

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

登入後複製

創建一個稱為應用的子文件夾。在App/index.html中，將引用添加到所需的樣式表和JavaScript文件中，並設置接口的HTML結構。

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

登入後複製

創建app/css/index.css並添加一些基本的CSS以幫助佈局。

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

登入後複製

創建應用程序/JS/index.js。這將是大多數應用程序功能發生的地方。首先設置所需的依賴項和變量：

<span>npm install electron-prebuilt -g
</span>

登入後複製

奇蹟API是一個有趣的API，但其身份驗證和數據結構可能會令人困惑。在此處註冊以獲取鍵，然後遵循以下說明以獲取上述三個參數。身份驗證所需的公共密鑰和私鑰存儲在.env文件中，並使用dotenv軟件包訪問。

。

brew <span>install Caskroom/cask/electron
</span>

登入後複製

限制值設置要請求的記錄數量，還有其他參數可以設置。 >

>如果您寧願跳過與Marvel API進行連接和認證，那麼我創建了一個json數據文件供您使用。用以下方式替換上述JavaScript代碼

接下來創建將每個字符輸出到targue_list div中所需的HTML和占位符變量：

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

登入後複製

接下來，請致電API並處理響應，然後鑽入JSON結構中的實際字符列表。 data.data.results。

>為每個字符創建HTML元素，並將其附加到tarne_list。 Marvel API中的圖像分為文件名和擴展名。如果沒有可用的圖像，它將顯示“不可用的圖像”圖像，我們可以處理此圖像，但在此示例中不會。

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

登入後複製

循環完成後，顯示系統通知，關閉方法並處理連接到API的潛在錯誤。

通過在項目的根目錄中執行下面的命令來運行應用程序：>

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

登入後複製

包裝應用程序

將代碼打包到“本機”應用程序中的

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

登入後複製

很簡單，但需要幾件。首先是應用徽章的圖標。外觀和文件類型將取決於您要定位的操作系統，但這是我使用的圖標，取自Marvel的官方Android App。

用電子創建跨平台桌面節點應用程序

>注意：我們在這裡使用受版權保護的漫威屬性來說明目的。請不要以自己的方式分發它們！

然後，我使用iconverticons.com/online/將PNG轉換為MAC ICON文件，但是還有其他可用工具。

> 包裝項目的最簡單方法是使用Electron-Packager NPM模塊（注意：需要單獨安裝此項目）。它可以生成大型二進製文件，對於桌面應用程序，這可能不是問題，但是如果是，則在此處描述其他選項。

如果您是在非窗口平台上的Windows包裝，則需要安裝葡萄酒，這是一個很大的依賴。除了這些警告之外，這是如何創建應用程序二進製文件的方法。在您的項目文件夾中，運行（

替換為項目用電子創建跨平台桌面節點應用程序 >的相關值）：

順序，這些參數設置：

項目文件夾。
生成的應用程序名稱。
>平台：這些是Windows，Linux，Darwin的Win32，用於Vanilla Mac OS X和MAS MAS，用於Mac App Store版本。全部設置，將為所有平台生成一個二進製文件。
架構：32和64位CPU架構的IA32和X64，或全部。
>

注意：所有參數都可以分開以分別為多個值分開，如果要生成所有平台和體系結構，則可以用-All。

替換相關參數

用電子創建跨平台桌面節點應用程序

進一步的步驟

這是一個簡單的例子，可以說明電子的潛力，還有更多的可能性。擱置純JavaScript可以完成的工作，您可能想看一下：

Electron的新互動API Explorer。
devtron，鍍鉻開發工具的擴展，專門用於電子開發。
仍然懷疑嗎？我想指出的是，在Atom撰寫本文時，我在Slack中與本文的編輯進行了交流，並在Kitematic創建的Docker容器中測試了該應用程序。所有這些都是電子生成的應用。好的，他們有問題，但這真是令人印象深刻！

我很想在下面的評論中聽到您使用電子構建的應用程序。

經常詢問有關帶電子桌面節點應用的問題

>使用電子開發桌面應用程序的先決條件是什麼？ node.js是一個JavaScript運行時，允許您在服務器或計算機上運行JavaScript，而NPM是Node.js軟件包的軟件包管理器。您可以從官方node.js網站下載node.js和npm。安裝了這些安裝後，您可以使用NPM安裝電子。

>如何在系統上安裝電子？

>安裝電子非常簡單。安裝了node.js和NPM後，您可以在終端或命令提示中使用以下命令在系統上安裝電子：npm install -G電子。此命令在全球安裝電子，允許您從系統上的任何目錄訪問它。

>

我如何創建一個新的電子項目？

創建一個新的電子項目，首先，為您的項目創建一個新目錄。在您的終端或命令提示符中導航到此目錄，然後使用命令NPM INIT初始化一個新的Node.js項目。此命令在您的項目目錄中創建一個新的package.json文件。然後，您可以使用命令npm安裝-Save Electron在項目中安裝Electron。

>電子應用程序的結構是什麼？

>電子應用程序通常包含三種類型的文件： package.json，main.js和index.html。 package.json文件包含有關您的應用程序及其依賴項的元數據。 main.js文件是您應用程序的入口點，您可以在其中控制應用程序的生命週期事件。 index.html文件是您的應用程序啟動時顯示的網頁。