NW.js是什么？能干什么？

从官网https://nwjs.io/ 的介绍来看，NW.js从DOM/WebWorker层，直接调用所有的Node模块，使用现有的web技术，开启一个全新的编写应用的方式。没怎么做过前端的东西，简单说，就是可以使用js来写一个应用程序，NW.js可以快速让一个web应用变成做普通应用。后来看着看着发现了Electron，和NW.js有相似的功能，而且优点更多，这里不赘述。所以这里只是简单体验下NW.js，做一个Helloworld。

参考文档：https://nwjs.org.cn/doc/index.html

Helloworld1

1. 下载

官网下载最新稳定版nwjs-sdk-v0.37.1-win-x64.zip，解压。

官网推荐SKD方式

2. 创建package.json

新建项目目录，创建package.json

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

json格式，name定义应用名称，name定义应用首页。

3. 创建index.html文件

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

4. 运行应用

Windows系统中是 nw.exe;

拖拽包含package.json的文件夹到nw.exe上，就可以运行程序了，弹出窗口

NW.js的helloworld

Linux系统中是 nw;

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

Mac系统中是 nwjs.app/Contents/MacOS/nwjs;

Helloworld2-是用NW.js APIs

NW.js中的API都被加载到了nw全局对象总，并能够通过JavaScript代码中直接使用。本例展示如何创建菜单。

修改index.html

<!DOCTYPE html>
<html>
<head>
  <title>上下文菜单</title>
</head>
<body style="width: 100%; height: 100%;">

<p>右击显示上下文菜单</p>

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

// 添加菜单项
menu.append(new nw.MenuItem({
  label: '项 A',
  click: function(){
    alert('You have clicked at "项 A"');
  }
}));
menu.append(new nw.MenuItem({ label: '项 B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: '项 C' }));

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

  return false;
}, false);

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

运行应用，弹出窗口，右键文字，弹出菜单选项，选择A

NW.js的helloworld

Helloworld3-使用Node.js API

可以直接使用DOM直接调用node.js代码以及模块。这样就可以通过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('您当前系统为 ', os.platform());
</script>
</body>
</html>

运行应用，弹出窗口

NW.js的helloworld

蜻蜓点水的helloworld完成。

NW.js的helloworld

NW.js是什么？能干什么？

Helloworld1

1. 下载

2. 创建package.json

3. 创建index.html文件

4. 运行应用

Helloworld2-是用NW.js APIs

Helloworld3-使用Node.js API

相关推荐