1.2開始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 ![](https://box.kancloud.cn/2016-04-26_571f2e6799655.PNG) 創建?`index.html`: ~~~ <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ~~~ 創建?`package.json`: ~~~ { "name": "nw-demo", "main": "index.html" } ~~~ 壓縮?`index.html`?和?`package.json`?到zip壓縮文件，并修改文件名為?`app.nw`: ~~~ app.nw |-- package.json `-- index.html ~~~ 下載你所使用的平臺的預構建的二進制文件并用它打開?`app.nw`?文件: ~~~ $ ./nw app.nw ~~~ 注意: 在 Windows, 你可以拖拽?`app.nw`?到?`nw.exe`?來打開它。示例 2\. Native UI API ![](https://box.kancloud.cn/2016-04-26_571f2e67add2a.PNG) nw.js 有原生 UI 控制 API。你可以用這些來控制窗口、菜單等等下面的示例演示如何使用菜單的API。 ~~~ <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> <body> <script> // 使用node.js獲取系統平臺 var os = require('os') document.write('Our computer is: ', os.platform()) </script> </body> </html> ~~~ ## 運行與打包應用現在，我們可以寫簡單的nw.js應用程序。下一步是了解如何運行并將其打包。運行應用程序多平臺運行的兩種常見方式 * 從一個文件夾。啟動路徑指定該文件夾。 * 從.nw文件（重命名.ZIP文件）。啟動路徑指定文件。例如: ~~~ nw path_to_app_dir nw path_to_app.nw ~~~ ## 故障排除如果有任何問題，請參閱 [[Troubleshooting]] 。回到?[Wiki](https://github.com/nwjs/nw.js/wiki)?以查看更多