>
我們都知道JavaScript和Web技術的力量，並看到了使用此知識開發和包裝跨平台桌面應用程序的一波選項。電子，github是一種選擇，但是由於我已經很高興地使用了與之構建的多個應用程序，因此研究似乎是一個不錯的選擇。經過兩年的開發，包括一個名稱更改（來自原子殼），Electron最近已達到1.0版，這始終是任何項目存在的里程碑。有什麼更好的時間來了解它的能力。
>
安裝電子Electron具有快速的啟動項目和預先構建的版本，但讓我們直接潛入深處，並通過NPM安裝電子：
或Mac Homebrew Lovers，通過桶：
<span>npm install electron-prebuilt -g </span>
無論您遵循哪個選項，您都應最終得到可執行的電子二進制。
一個電子項目需要三個文件：
index.html：默認呈現的網頁。
你需要一個英雄
打開軟件包。
這是一個標準軟件包。在此設置應用程序名稱，版本，主JavaScript文件和依賴項。
>
>在添加它們後運行NPM安裝以確保您安裝了依賴項。brew <span>install Caskroom/cask/electron </span>
>
首先，讓我們設置所需的要求（即電子），創建一個應用程序，本機瀏覽器窗口和一個可使用的主窗口占位符。
下一個句柄，如果關閉了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<span>.on('window-all-closed', function() {
</span> <span>if (process.platform != 'darwin') {
</span> app<span>.quit();
</span> <span>}
</span><span>});
</span><span>npm install electron-prebuilt -g </span>
奇蹟API是一個有趣的API，但其身份驗證和數據結構可能會令人困惑。在此處註冊以獲取鍵，然後遵循以下說明以獲取上述三個參數。身份驗證所需的公共密鑰和私鑰存儲在.env文件中，並使用dotenv軟件包訪問。
。brew <span>install Caskroom/cask/electron </span>
限制值設置要請求的記錄數量，還有其他參數可以設置。
接下來創建將每個字符輸出到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>
> 包裝項目的最簡單方法是使用Electron-Packager NPM模塊（注意：需要單獨安裝此項目）。它可以生成大型二進製文件，對於桌面應用程序，這可能不是問題，但是如果是，則在此處描述其他選項。
如果您是在非窗口平台上的Windows包裝，則需要安裝葡萄酒，這是一個很大的依賴。 除了這些警告之外，這是如何創建應用程序二進製文件的方法。在您的項目文件夾中，運行（替換為項目
>的相關值）：
順序，這些參數設置：
替換相關參數
>
經常詢問有關帶電子桌面節點應用的問題
>使用電子開發桌面應用程序的先決條件是什麼？ node.js是一個JavaScript運行時，允許您在服務器或計算機上運行JavaScript，而NPM是Node.js軟件包的軟件包管理器。您可以從官方node.js網站下載node.js和npm。安裝了這些安裝後，您可以使用NPM安裝電子。
創建一個新的電子項目，首先，為您的項目創建一個新目錄。在您的終端或命令提示符中導航到此目錄，然後使用命令NPM INIT初始化一個新的Node.js項目。此命令在您的項目目錄中創建一個新的package.json文件。然後，您可以使用命令npm安裝-Save Electron在項目中安裝Electron。
>電子應用程序通常包含三種類型的文件： package.json，main.js和index.html。 package.json文件包含有關您的應用程序及其依賴項的元數據。 main.js文件是您應用程序的入口點，您可以在其中控制應用程序的生命週期事件。 index.html文件是您的應用程序啟動時顯示的網頁。
>如何打包我的電子應用程序以進行分發？
是的，您可以使用節點.JS模塊在您的電子應用中。 Electron使用node.js運行時，因此您可以在應用程序中使用任何node.js模塊。
是的，您可以在中使用Web Technologies您的電子應用。電子本質上是一個網絡瀏覽器，允許您使用HTML，CSS和JavaScript等Web技術創建桌面應用程序。
我可以用電子構建跨平台應用程序嗎？用電子構建跨平台應用。電子允許您構建在Windows，MacOS和Linux上運行的應用程序。
以上是用電子創建跨平台桌面節點應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
