NW.js 入門

NW.js 入門

NW.js 可以做什麼？

NW.js 是基於 Chromium 和 Node.js。它讓您直接從瀏覽器呼叫 Node.js 程式碼和模組，並在您的應用程式中使用網路技術。此外，您可以輕鬆地將網路應用程式封裝成原生應用程式。

取得 NW.js

您可以從官方網站 http://nwjs.io 取得最新的二進位檔。您也可以按照建立 NW.js 中的說明自行建立 NW.js 二進位檔。

提示

建議您選擇 SDK 建置風味來開發應用程式，這讓您能夠使用 DevTools 來除錯應用程式。請參閱建置風味以了解建置風味之間的差異。

撰寫 NW.js 應用程式

範例 1 - Hello World

這個基本範例說明如何撰寫 NW.js 應用程式。

步驟 1. 建立 package.json

{
  "name": "helloworld",
  "main": "index.html"
}

package.json 是應用程式中的清單檔案。它以 JSON 格式撰寫。main 欄位會找出 NW.js 開啟的第一個頁面，如果參照 HTML 檔案，此範例中為 "index.html"。而 name 欄位是 NW.js 應用程式之間使用的唯一名稱。請參閱清單格式以取得更多詳細資料。

將 JS 檔案用作主程式

您也可以在 "main" 欄位中設定 JS 檔案，例如 "main.js"。然後 JS 檔案會在啟動時載入背景頁面，而且預設不會開啟任何視窗。通常您可以在稍後執行一些初始化並手動開啟視窗。例如，

// initialize your app
// and ...
nw.Window.open('index.html', {}, function(win) {});

步驟 2. 建立 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

這是正常的 HTML 檔案。您可以使用最新瀏覽器支援的任何網路技術。

步驟 3. 執行您的應用程式

cd /path/to/your/app
/path/to/nw .

/path/to/nw 是 NW.js 的二進位檔。在 Windows 上，它是 nw.exe；在 Linux 上，它是 nw；在 Mac 上，它是 nwjs.app/Contents/MacOS/nwjs。

在 Windows 上拖放

在 Windows 上，您可以將 包含 package.json 的資料夾 拖放到 nw.exe 來執行應用程式。

範例 2 - 使用 NW.js API

所有 NW.js API 都會載入 nw 物件中，並可以在 JavaScript 檔案中直接使用。請參閱 API 參考以取得支援 API 的完整清單。

此範例說明如何在 NW.js 應用程式中建立原生內容功能表。你可以使用下列內容建立 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body>

<p>'Right click' here to show context menu.</p>

<script>
// Create an empty context menu
var menu = new nw.Menu();

// Add some items with label
menu.append(new nw.MenuItem({
  label: 'Item A',
  click: function(){
    alert('You have clicked at "Item A"');
  }
}));
menu.append(new nw.MenuItem({ label: 'Item B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: 'Item C' }));

// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);

</script>  
</body>
</html>

… 然後執行你的應用程式

cd /path/to/your/app
/path/to/nw .

require(‘nw.gui’)

使用 require('nw.gui') 載入 NW.js API 的舊式方法也受支援。它會傳回相同的 nw 物件。

範例 3 - 使用 Node.js API

你可以直接從 DOM 呼叫 node.js 和模組。因此，它能讓使用 nw.js 編寫應用程式有無限的可能性。

此範例說明如何使用 Node.js 的 os 模組查詢作業系統平台。只要建立 index.html 檔案，並使用下列內容，然後使用 NW.js 執行它。

<!DOCTYPE html>
<html>
<head>
  <title>My OS Platform</title>
</head>
<body>
<script>
// get the system platform using node.js
var os = require('os');
document.write('You are running on ', os.platform());
</script>
</body>
</html>

你也可以使用 npm 安裝的模組搭配 NW.js。

原生 Node 模組

執行 npm install 時所建置的原生 Node 模組，不相容於 NW.js ABI。若要使用它們，你必須使用 nw-gyp 從原始碼重新建置。有關詳細資訊，請參閱使用原生 Node 模組。

下一步

有關除錯 NW.js 應用程式的資訊，請參閱使用 DevTools 除錯。

有關封裝和重新散發你的應用程式於生產環境的資訊，請參閱封裝和散發。

有關你可能會遇到的問題，請參閱常見問題。

如果你要將你的應用程式從 NW.js 0.12 或更舊版本移轉，請參閱移轉注意事項。

取得協助

在 NW.js wiki 上有許多有用的資訊。wiki 也開放給所有人，我們鼓勵你將你的知識發布在 wiki 上。

您也可以在 Google 群組的郵件清單中提問，或在 Gitter 上聊天。

請在 GitHub 上回報錯誤或提交需求，以讓 NW.js 更加強大。