NW.js介绍及创建第一个应用

NW.js介绍

NW.js (原名：node-webkit)
它是基于Chromium和Node.js；
允许我们直接通过DOM来调用Node.js模块；
能够轻松的把我们的Web应用打包成一个原生的应用程序。

NW.js下载
直接从官网下载二进制安装包即可，本文示例使用：nwjs-v0.68.1-win-x64版本。

NW.js应用

下面开始我们第一个NWjs应用：Hello World

功能：使用NW.js打开一个HTML文件

应用目录结构：

|-firstapp
  |-index.html
  |-package.json

第一步：创建package.json文件

文件内容如下：

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

第二步：创建index.html文件

文件内容如下：

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

第三步：运行应用

进入应用目录，运行nw命令：
cd /path/to/your/app
/path/to/nw .

说明：
（1）注意/path/to/nw后面有个“.”，表示当前目录；
（2）/path/to/nw 是NW.js的二进制文件，不同系统上分别对应：

Windows：    nw.exe 
Linux：nw 
MacOS：nwjs.app/Contents/MacOS/nwjs

例如：

// 进入firstapp主目录
cd D:\whw\study\nwjs\firstapp

// 使用nw.exe打开firstapp应用
D:\tools\nwjs-v0.68.1-win-x64\nw.exe .

可以看到NW.js打开了我们的第一个应用，界面如下图所示：

nwjs-01.png

使用JS文件作为主文件

package.json内容修改为：

{
    "name": "helloworld",
    "main": "main.js"
}

main.js文件内容为：

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

主要作用是除了打开index.html外，还可以执行一些初始化的逻辑。

使用网址作为主文件

package.json内容修改为：

{
    "name": "helloworld",
    "main": "https://whwtree.com"
}

使用NW.js打开我们指定的网址，效果如下图示：

nwjs-02.png

以上即为我们的第一个NW.js应用。

（完）