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

鑰匙要點

GitHub開發的一種工具
• Electron允許開發人員使用JavaScript和Web Technologies創建跨平台桌面應用程序。它提供了比以前的選項（例如Flash，Air，Java和Silverlight。
一個電子項目需要三個文件：index.html，main.js和package.json。 index.html文件是默認情況下呈現的網頁，main.js文件啟動應用程序並創建一個瀏覽器窗口以渲染html，並且package.json文件列出了應用程序依賴項，元數據和所需的文件。 >。 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可以完成的工作，您可能想看一下：

>

Mac App Store提交。
使用Chrome Dev工具。
>剪貼板訪問。
創建應用程序菜單欄工具。
• 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文件是您的應用程序啟動時顯示的網頁。

>我如何運行電子應用程序？

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

>

>如何打包我的電子應用程序以進行分發？ 包裝您的電子應用程序以進行分發，您可以使用電子包裝或電子構建器等模塊。這些模塊允許您將應用程序包裝到可以在各種平台上運行的可執行文件。

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

是的，您可以使用節點.JS模塊在您的電子應用中。 Electron使用node.js運行時，因此您可以在應用程序中使用任何node.js模塊。

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

是的，您可以在中使用Web Technologies您的電子應用。電子本質上是一個網絡瀏覽器，允許您使用HTML，CSS和JavaScript等Web技術創建桌面應用程序。

>

>我如何調試我的電子應用程序？使用Chrome開發人員工具。電子是建立在鉻上的，因此它包括一個內置的開發人員工具，您可以使用該工具來調試應用程序。

我可以用電子構建跨平台應用程序嗎？用電子構建跨平台應用。電子允許您構建在Windows，MacOS和Linux上運行的應用程序。

>

以上是用電子創建跨平台桌面節點應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！