开始使用NW.js

NW.js能做什么?

NW.js基于Chromium和Node.js . NW.js能够通过页面技术开发桌面应用 , 同时可以调用Node.js代码以及模块 . 未来 , 你可以使用NW.js轻松将页面应用制作成桌面应用 .

如何获取NW.js

你可以从官网http://nwjs.io获取最近版本的文件 , 或者可以通过原代码进行构建

!!! 注推荐选择SDK构建方式开发应用 , 这样就可以使用开发工具进行调试 , 参考构建方式查看构造方式之间的不同 .

开发NW.js应用

例 1 - Hello World

快速开发一个NW.js应用

步骤 1. 创建 package.json 文件:

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

package.json是应用的主配置文件 . 该文件内容使用JSON 格式 . main属性说明应用首页文件 , 本例中是"index.html" . name属性是该应用的名称 .

步骤 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 .

!!! 注 "Drag & Drop on Windows" "Windows系统中的拖拽" Windows系统中 , 可以拖拽包含package.json的文件夹到nw.exe直接运行应用 .

例 2 - 使用 NW.js APIs

NW.js中的APIs都被加载到nw全局对象中 , 并能够在JavaScript代码中直接使用 . 参考API参考查看APIs支持的功能 .

本例中展示了如何在应用中创建一个菜单 . 利用一下内容创建index.html文件:

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body style="width: 100%; height: 100%;">

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

<script>
// 创建一个空菜单
var menu = new nw.Menu();

// 添加菜单项
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' }));

// 监听事件
document.body.addEventListener('contextmenu', function(ev) {
  // 阻止显示默认菜单
  ev.preventDefault();
  // 点击处弹出定义的菜单对象
  menu.popup(ev.x, ev.y);

  return false;
}, false);

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

... 运行应用:

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

!!! 注 "require('nw.gui')" 原加载nw方式require('nw.gui')同样支持 , 返回nw对象 .

例 3 - Node.js API 使用方式

你可以使用DOM直接调用node.js代码以及模块 . 这样就可以通过nw.js无所拘束地开发桌面应用 .

This example shows how to query the OS platform with os module of Node.js. Simply create the index.html file with following content and run it with NW.js.

该例子展示如何通过Node.js中的os模块查询操作系统信息 . 利用一下内容创建index.html文件并执行应用 .

<!DOCTYPE html>
<html>
<head>
  <title>My OS Platform</title>
</head>
<body>
<script>
// 使用node.js获取系统信息
var os = require('os');
document.write('You are running on ', os.platform());
</script>
</body>
</html>

你同样可以在NW.js中通过npm进行模块的安装 .

!!! 注 "本地模块" 当使用npm install构建本地模块时 , NW.js ABI不能兼容 . 如果继续使用 , 需要使用nw-gyp重新进行NW.js的构建 . 参考本地模块详细说明 .

下一步该做什么

参考开发工具与调试如何开发以及调试应用 .

参考打包与发布打包应用以及发布产品 .

参考FAQ解决你可能遇到的问题 .

参考版本0.12或者更低版本如何升级为0.13版本

帮助

NW.js wiki提供许多可用信息 .

如果遇到问题可以在mail list on Google group 或者 Gitter进行留言 .

Bugs和需求可以提交到GitHub .