Electron和NW.js是一个可以使用Web开发技术来开发跨平台的桌面级应用的一个框架，而传统桌面应用开发要求懂高级编程语言以及专门的框架。有了Electron和NW.js，你可以将现有Web开发技术运用到仅仅使用HTML、CSS和JavaScript就能开发的桌面应用中。而且，开发出来的应用还能在Windows、Mac和Linux中工作，显著减少了开发和培训的时间。

这篇教程我们重点讲解下NW.js，NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境。项目地址是：https://github.com/rogerwang/node-webkit。

使用它的好处：

（1）以网络最流行的技术编写原生应用程序的新方法

（2）基于HTML5, CSS3, JS and WebGL而编写

（3）完全支持nodejs所有api及第三方模块

（4）可以使用DOM直接调用nodejs模块

（5）容易打包和分发

（6）支持运行环境包括32位和64位的Window、Linux和Mac OS

使用方法：

第一步，我们先下载NW的运行环境，官网地址：http://nwjs.io/。

打开后有两个下载项，NORMAL和SDK，分别表示运行时和开发调试环境。这里我们学习使用可以选择下载SDK。

第二步，在开发目录新建一个package.json的全局配置文件。

{
  "main": "index.html", 
  "name": "appname",
  "description": "这是应用描述，main表示入口文件",
  "version": "0.0.1", 
  "window": {
    "title": "应用的名称",
    "icon": "app/static/img/logo.jpg",
    "toolbar": true,
    "frame": true,
    "width": 1008,
    "height": 750,
    "position": "center",
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false    
  },
  "chromium-args" :"-allow-file-access-from-files"
}

• title : 字符串，设置默认 title。

• width/height : 主窗口的大小。

• toolbar : bool 值。是否显示导航栏。

• icon : 窗口的 icon。

• position :字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。

• min_width/min_height : 窗口的最小值。

• max_width/max_height : 窗口显示的最大值。

• fullscreen: bool 值。是否全屏显示。
  

• resizable : bool 值。是否允许调整窗口大小。

• always-on-top : bool 值。窗口置顶。

• fullscreen : bool 值。是否全屏显示。

• show_in_taskbar : 是否在任务栏显示图标。

• frame : bool 值。如果设置为 false，程序将无边框显示。

• "chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样，这行代码允许html和js直接访问本地文件。

第三步，新建一个index.html的文件，<div>Hello World</div>

第四步，测试运行。

• 将项目文件夹打包成app.zip。
  

• 将打包的ZIP拖到nw.exe上运行测试。

第五步，打包exe。

• 将项目文件夹打包成app.zip，将ZIP的后缀改为nw即app.nw

• 将app.nw移动到下载的SDK目录下
  

• CMD命名行定位到NW目录，输入以下命名：copy /b nw.exe+app.nw app.exe

第六步，运行exe。