開始nw.js · nw.js 中文文檔

# Getting Started with nw.js for simplified Chinese(開始nw.js) Translation for Getting Started with nw.js 翻譯自Getting Started with nw.js 本章節包涵了一些指導信息，以幫助您開始nw.js編程。假定你有nw.js的二進制文件(這樣的文件都可以在 “[下載](https://github.com/nwjs/nw.js#downloads)”READEME的部分，如果你想建立自己的二進制文件請參閱[Building nw.js]) nw.js基于[Chromium](http://www.chromium.org) and [io.js](http://iojs.org/)。它可以讓你直接從DOM調用Node.js的代碼及模塊，使您可以使用web技術來開發應用程序。此外，你可以很輕松的打包web應用到本地應用程序 ## 基礎首先我們介紹nw.js，我們先從最簡單的程序開始。 **示例 1. Hello World** ![Capture3](https://f.cloud.github.com/assets/2891424/279516/5fba0cca-912b-11e2-983d-c2e8a66c3706.PNG) 創建 `index.html`: ```html <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 創建 `package.json`: ```json { "name": "nw-demo", "main": "index.html" } ``` 壓縮 `index.html` 和 `package.json` 到zip壓縮文件，并修改文件名為 `app.nw`: app.nw |-- package.json `-- index.html 下載你所使用的平臺的預構建的二進制文件并用它打開 `app.nw` 文件: ```bash $ ./nw app.nw ``` 注意: 在 Windows, 你可以拖拽 `app.nw` 到 `nw.exe` 來打開它。 **示例 2. Native UI API** ![Capture4](https://f.cloud.github.com/assets/2891424/279875/e8572dd0-913d-11e2-8a82-ea021ca07ce6.PNG) nw.js 有原生 UI 控制 API。你可以用這些來控制窗口、菜單等等下面的示例演示如何使用菜單的API。 ```html <html> <head> <title> Menu </title> </head> <body> <script> // 載入原生UI庫 var gui = require('nw.gui'); // 創建空菜單 var menu = new gui.Menu(); // 添加菜單項，label為菜單項的顯示名 menu.append(new gui.MenuItem({ label: 'Item A' })); menu.append(new gui.MenuItem({ label: 'Item B' })); menu.append(new gui.MenuItem({ type: 'separator' })); menu.append(new gui.MenuItem({ label: 'Item C' })); // 移除菜單項 menu.removeAt(1); // 遍歷菜單項 for (var i = 0; i < menu.items.length; ++i) { console.log(menu.items[i]); } // 添加菜單項并綁定菜單點擊后的回調函數 menu.append(new gui.MenuItem({ label: 'Click Me', click: function() { // 創建HTML元素 var element = document.createElement('div'); element.appendChild(document.createTextNode('Clicked OK')); document.body.appendChild(element); } })); // 彈出上下文菜單 document.body.addEventListener('contextmenu', function(ev) { ev.preventDefault(); // 在你點擊后彈出 menu.popup(ev.x, ev.y); return false; }, false); // 獲取當前窗口 var win = gui.Window.get(); // 創建一個窗口的菜單欄 var menubar = new gui.Menu({ type: 'menubar' }); // 創建一個菜單項 var sub1 = new gui.Menu(); sub1.append(new gui.MenuItem({ label: 'Test1', click: function() { var element = document.createElement('div'); element.appendChild(document.createTextNode('Test 1')); document.body.appendChild(element); } })); // 添加子菜單 menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1})); // 設置菜單窗口的菜單 win.menu = menubar; // 添加一個點擊事件到已有菜單 menu.items[0].click = function() { console.log("CLICK"); }; </script> </body> </html> ``` **示例 3. Using node.js** 您可以直接在DOM調用的Node.js和模塊。因此，它實現了無限的可能性，寫的應用程序與nw.js. ```html <html> <body> <script> // 使用node.js獲取系統平臺 var os = require('os') document.write('Our computer is: ', os.platform()) </script> </body> </html> ``` ## 運行與打包應用現在，我們可以寫簡單的nw.js應用程序。下一步是了解如何運行并將其打包。 **運行應用程序** 多平臺運行的兩種常見方式 * 從一個文件夾。啟動路徑指定該文件夾。 * 從.nw文件（重命名.ZIP文件）。啟動路徑指定文件。例如: ````bash nw path_to_app_dir nw path_to_app.nw ```` ## 故障排除如果有任何問題，請參閱 [[Troubleshooting]] 。回到 [Wiki](https://github.com/nwjs/nw.js/wiki) 以查看更多