JavaScript >> Javascript 文檔 >  >> Node.js

使用 HTML、JS 和 Electron 創建您的第一個桌面應用程序

Web 應用程序每年都變得越來越強大,但桌面應用程序仍有空間可以完全訪問您的計算機硬件。今天,您可以使用已經熟悉的 HTML、JS 和 Node.js 創建桌面應用程序,然後將其打包成可執行文件並在 Windows、OS X 和 Linux 上相應地分發。

有兩個流行的開源項目使這成為可能。這些是我們幾個月前介紹過的 NW.js,以及我們今天要使用的較新的 Electron(在此處查看它們之間的區別)。我們將重寫舊的 NW.js 版本以使用 Electron,因此您可以輕鬆比較它們。

Electron 入門

使用 Electron 構建的應用程序只是在嵌入式 Chromium 網絡瀏覽器中打開的網站。除了常規的 HTML5 API,這些網站還可以使用全套 Node.js 模塊和特殊的 Electron 模塊,這些模塊可以訪問操作系統。

為了本教程的目的,我們將構建一個簡單的應用程序,該應用程序通過我們的 RSS 提要獲取最新的 Tutorialzine 文章,並將它們顯示在一個看起來很酷的輪播中。應用程序運行所需的所有文件都可以在存檔中找到,您可以從 下載 獲取 靠近頁面頂部的按鈕。

將其內容提取到您選擇的目錄中。從文件結構來看,你絕對猜不到這是一個桌面應用程序,而不僅僅是一個簡單的網站。

我們將在一分鐘內仔細研究更有趣的文件以及它們是如何工作的,但首先,讓我們來看看這個應用程序。

運行應用程序

由於 Electron 應用程序只是一個精美的 Node.js 應用程序,因此您需要安裝 npm。您可以在這裡學習如何操作,非常簡單。

完成後,在包含解壓文件的目錄中打開一個新的 cmd 或終端,然後運行以下命令:

npm install

這將創建一個 node_modules 包含應用程序運行所需的所有 Node.js 依賴項的文件夾。現在一切都應該很好了,在與之前相同的終端中輸入以下內容:

npm start

該應用程序應在其自己的窗口中打開。注意它有一個頂部菜單欄和一切!

您可能已經註意到啟動應用程序對用戶不太友好。然而,這只是開發者運行 Electron 應用程序的方式。為公眾打包後,它會像普通程序一樣安裝並打開,只需雙擊其圖標即可。

它是如何製作的

在這裡,我們將討論任何電子應用程序中最重要的文件。讓我們從 package.json 開始,它保存了有關項目的各種信息,例如版本、npm 依賴項和其他重要設置。

package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "pretty-bytes": "^2.0.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^0.35.2"
  },
  "scripts": {
    "start": "electron main.js"
  },
  "author": "",
  "license": "ISC"
}

如果您以前使用過 node.js,那麼您已經知道它是如何工作的。這裡要注意的最重要的事情是 腳本 屬性,我們在其中定義了 npm start 命令,允許我們像之前一樣運行應用程序。當我們調用它時,我們要求 electron 運行 main.js 文件。這個 JS 文件包含一個打開應用程序窗口的簡短腳本,並定義了一些選項和事件處理程序。

main.js

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 900, height: 600});

    // and load the index.html of the app.
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // Emitted when the window is closed.
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

看看我們在“就緒”方法中做了什麼。首先我們定義一個瀏覽器窗口並設置它的初始大小。然後,我們加載 index.html 文件,其工作方式類似於在瀏覽器中打開 HTML 文件。

正如您將看到的,HTML 文件本身並沒有什麼特別之處 - 輪播的容器和顯示 CPU 和 RAM 統計數據的段落。

index.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tutorialzine Electron Experiment</title>

    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>

<div class="flipster">
    <ul>
    </ul>
</div>

<p class="stats"></p>

<!-->In Electron, this is the correct way to include jQuery<-->
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/jquery.flipster.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>

HTML 還鏈接到所需的樣式表、JS 庫和腳本。請注意,jQuery 以一種奇怪的方式包含在內。有關詳細信息,請參閱此問題。

最後,這是應用程序的實際 JavaScript。在其中,我們訪問 Tutorialzine 的 RSS 提要,獲取最近的文章並顯示它們。如果我們嘗試在瀏覽器環境中執行此操作,它將無法正常工作,因為 RSS 提要位於不同的域中,並且禁止從中獲取。然而,在 Electron 中,這個限制並不適用,我們可以簡單地通過 AJAX 請求獲取所需的信息。

$(function(){

    // Display some statistics about this computer, using node's os module.

    var os = require('os');
    var prettyBytes = require('pretty-bytes');

    $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
    $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

    // Electron's UI library. We will need it for later.

    var shell = require('shell');

    // Fetch the recent posts on Tutorialzine.

    var ul = $('.flipster ul');

    // The same-origin security policy doesn't apply to electron, so we can
    // send ajax request to other sites. Let's fetch Tutorialzine's rss feed:

    $.get('http://feeds.feedburner.com/Tutorialzine', function(response){

        var rss = $(response);

        // Find all articles in the RSS feed:

        rss.find('item').each(function(){
            var item = $(this);

            var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
            var urlRegex = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g;

            // Fetch the first image of the article.
            var imageSource = content.match(urlRegex)[1];

            // Create a li item for every article, and append it to the unordered list.

            var li = $('<li><img /><a target="_blank"></a></li>');

            li.find('a')
                .attr('href', item.find('link').text())
                .text(item.find("title").text());

            li.find('img').attr('src', imageSource);

            li.appendTo(ul);

        });

        // Initialize the flipster plugin.

        $('.flipster').flipster({
            style: 'carousel'
        });

        // When an article is clicked, open the page in the system default browser.
        // Otherwise it would open it in the electron window which is not what we want.

        $('.flipster').on('click', 'a', function (e) {

            e.preventDefault();

            // Open URL with default browser.

            shell.openExternal(e.target.href);

        });

    });

});

上述代碼的一個很酷的地方是,我們在一個文件中同時使用:

  • JavaScript 庫 - 用於製作輪播的 jQuery 和 jQuery Flipster。
  • 電子原生模塊 - 為桌面相關任務提供 API 的 Shell,在我們的例子中,在默認網絡瀏覽器中打開一個 URL。
  • Node.js 模塊 - 用於訪問系統內存信息的操作系統,用於格式化的 Pretty Bytes。

有了這個,我們的應用就準備好了!

包裝配送

要使您的應用程序為最終用戶做好準備,還有另一件重要的事情要做。你需要把它打包成一個可執行文件,雙擊用戶的機器就可以啟動它。由於 Electron 應用程序可以在多個操作系統上運行並且每個操作系統都不同,因此需要為 Windows、OS X 和 Linux 提供單獨的發行版。像這個 npm 模塊這樣的工具是一個很好的起點 - Electron Packager。

考慮到打包包含您的所有資產、所有必需的 node.js 模塊,以及一個縮小的 WebKit 瀏覽器,並將它們放在一個可執行文件中。所有這些事情總結起來,最終的結果是一個大小約為 50mb 的應用程序。這對於像我們這裡的示例這樣的簡單應用程序來說是相當多的並且不實用,但是當我們處理大型複雜應用程序時,這變得無關緊要。

結論

您將在我們的示例中看到與 NW.js 的唯一主要區別是 NW.js 直接打開一個 HTML 頁面,而 Electron 通過執行一個 JavaScript 文件啟動並通過代碼創建一個應用程序窗口。 Electron 的方式為您提供了更多控制權,因為您可以輕鬆構建多窗口應用程序並組織它們之間的通信。

總體而言,Electron 是一種使用 Web 技術構建桌面 Web 應用程序的令人興奮的方式。以下是您接下來應該閱讀的內容:

  • Electron 快速入門指南
  • Electron 的文檔
  • 使用 Electron 構建的應用

Tutorial JavaScript 教程
  1. 從 mongodb id 獲取時間戳

  2. Javascript - 數組中的 forEach 與 map 方法

  3. React 中的獲取請求:如何映射對像數組中的 JSON 對像數組?

  4. 國家冒險:我的第一個 React 項目

  5. 使用 ImageKit 在 Vue.js 中執行圖像轉換

  6. 反應式編程,該死的。這與 ReactJS 無關

  7. D3 - 按下按鈕時動態更改樹中節點的文本

  1. 桶列表 REST API

  2. React 與 React Native

  3. 多次執行控制器功能

  4. React 的 JSX:硬幣的另一面

  5. jQuery 字符串模板格式函數

  6. Spring JSON 請求得到 406(不可接受)

  7. 按字母順序排序 JavaScript |示例代碼

  1. 使用 Lottie 將動畫添加到您的 React 應用程序

  2. 代碼和 Scrum 100 天的第 41 天:Next.js 聯繫表單 HTML、useState 和驗證

  3. 我試過 Vue.js,你有沒有……?

  4. 使用 CodeCov Github Action 測量 React 中的代碼覆蓋率