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

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

如今,您幾乎可以使用 JavaScript 和 HTML 做任何事情。多虧了 Node-WebKit,我們甚至可以創建感覺原生的桌面應用程序,並且可以完全訪問操作系統的每個部分。在這個簡短的教程中,我們將向您展示如何使用 Node-WebKit 創建一個簡單的桌面應用程序,它結合了 jQuery 和一些 Node.js 模塊。

Node-WebKit 是 Node.js 和嵌入式 WebKit 瀏覽器的組合。您編寫的 JavaScript 代碼在特殊環境中執行,並且可以訪問標準瀏覽器 API 和 Node.js。聽起來不錯?繼續閱讀!

安裝 Node-WebKit

對於開發應用程序,您需要下載 node-webkit 可執行文件,並在您想要運行代碼時從終端調用它。 (稍後您可以將所有內容打包在一個程序中,這樣您的用戶只需單擊一個圖標即可啟動它。

前往項目頁面並下載為您的操作系統構建的可執行文件。在計算機上的某處提取存檔。要啟動它,您需要在終端中執行此操作:

# If you are on linux/osx

/path/to/node-webkit/nw /your/project/folder

# If you are on windows

C:\path\to\node-webkit\nw.exe C:\your\project\folder

# (the paths are only for illustrative purposes, any folder will do)

這將打開一個新的 node-webkit 窗口並在您的終端中打印一堆調試消息。

您可以選擇將提取的 node-webkit 文件夾添加到您的 PATH 中,以便它可以作為 nw 從你的終端命令。

您的第一個應用程序

有一個下載 本文頂部附近的按鈕。單擊它並獲取包含我們為您準備的示例應用程序的 zip。它從我們的 RSS 提要中獲取關於 Tutorialzine 的最新文章,並使用 jQuery Flipster 將它們變成一個看起來很酷的 3D 輪播。

解壓後,您將看到上面的文件。從這裡看,這看起來像是一個標準的靜態網站。但是,如果您只是雙擊 index.html,它將不起作用 - 它需要 Node.js 模塊,這在 Web 瀏覽器中是無效的。要運行它,請將 CD 放入此文件夾,然後嘗試使用以下命令運行該應用程序:

/path/to/node-webkit/nw .

這將展示我們出色的桌面應用程序。

它是如何製作的

這一切都從 package.json 文件開始,node-webkit 在啟動時會查找該文件。它描述了node-webkit應該加載什麼以及窗口的各種參數。

package.json

{
  "name": "nw-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "window": {
    "toolbar": false,
    "width": 800,
    "height": 500
  },
  "license": "ISC",
  "dependencies": {
    "pretty-bytes": "^1.0.2"
  }
}

window 該文件中的屬性告訴 node-webkit 打開一個 800 x 500px 的新窗口並隱藏工具欄。 main 指向的文件 屬性將被加載。在我們的例子中,這是 index.html:

index.html

<!DOCTYPE html>
<html>
<head>

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

    <title>Tutorialzine Node-Webkit Experiment</title>

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

</head>
<body>

    <div class="flipster">
        <ul>
            <!-- Tutorialzine's latest articles will show here -->
        </ul>
    </div>

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

    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.flipster.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

最後,這是我們的 JavaScript 文件。這就是有趣的地方!

js/script.js

// Mixing jQuery and Node.js code in the same file? Yes please!

$(function(){

    // Display some statistic 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>');

    // Node webkit's native UI library. We will need it for later
    var gui = require('nw.gui');

    // Fetch the recent posts on Tutorialzine

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

    // The same-origin security policy doesn't apply to node-webkit, 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 node-webkit window which is not what we want.

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

            e.preventDefault();

            // Open URL with default browser.
            gui.Shell.openExternal(e.target.href);

        });

    });

});

請注意,我們正在使用 jQuery 直接訪問 Tutorialzine 的 RSS 提要,即使它位於不同的域中。這在瀏覽器中是不可能的,但是 Node-WebKit 消除了這個限制,使桌面應用程序的開發更加容易。

以下是我們使用的節點模塊:

  • Shell - 一個節點 webkit 模塊,它提供了一組執行桌面相關工作的 API。
  • OS - 內置的 Node.js OS 模塊,它有一個返回可用系統內存量(以字節為單位)的方法。
  • Pretty Bytes - 將字節轉換為人類可讀的字符串:1337 → 1.34 kB。

我們的項目還包括 jQuery 和 jQuery-flipster 插件,差不多就是這樣!

包裝配送

您肯定不希望您的用戶通過相同的步驟來運行您的應用程序。你不想把它打包成一個獨立的程序,只需雙擊它就可以打開它。

為多個操作系統打包 node-webkit 應用程序需要手動完成大量工作。但是有些圖書館可以為您做到這一點。我們嘗試了這個 npm 模塊 - https://github.com/mllrsohn/node-webkit-builder,效果很好。

唯一的缺點是可執行文件很大(它們很容易達到 40-50mb),因為它們將精簡的 webkit 瀏覽器和 node.js 與您的代碼和資產打包在一起。這使得它對於小型桌面應用程序(例如我們的)相當不切實際,但對於較大的應用程序來說值得一看。

結論

Node-webkit 是一個強大的工具,它為 Web 開發人員打開了許多大門。有了它,您可以輕鬆地為您的 Web 服務創建配套應用程序並構建可以完全訪問用戶計算機的桌面客戶端。

您可以在他們的 wiki 上閱讀有關 node-webkit 的更多信息。


Tutorial JavaScript 教程
  1. 在不插入另一個對象的情況下更新 useState

  2. 使用 SetIncrement 更改變量值/引用它

  3. #javascript 中的設計模式 - 單例

  4. onClick={tmp} 和 onClick={()=>tmp} 有什麼區別

  5. 🎸 + 🧠 =意念控制吉他效果

  6. React Native 動畫 - 簡單的分步指南

  7. 在 TypeScript 中使用類型解構對象

  1. 使用 Amplify 身份驗證開發 Chrome 擴展程序

  2. 如何使用模板字符串製作這個?

  3. DOM 事件:stopPropagation vs preventDefault() vs. return false

  4. jQuery UI DatePicker:禁用指定日期

  5. 探索任何 JS 框架的完美第一個項目

  6. 使用組合在 JavaScript 中生成所有可能的組合

  7. 全局計數變量不增加

  1. 使用 Redwood 構建用戶儀表板

  2. Baahu:基於狀態機的 SPA 框架

  3. 反應引導模式形式

  4. 10 個 jQuery 浮動菜單和消息插件