NW.js 入坑指南

NW.js是什么？

NW.js 是基于 Chromium 和 Node.js 运行的， 之前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制做桌面应用的可能。在应用里你能够直接调用Node.js的各类api以及现有的第三方包。由于Chromium和 Node.js 的跨平台，那么你的应用也是能够跨平台的。如今已经有不少知名的应用是基于NW.js实现，这是官方统计的一些列表： https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js

Getting Started

先下载好最新版的 NW.js，官方网站地址。 
我就以 nwjs-v0.12.3-win-x64为例子，先看下有哪些文件吧。

/app/ 目录是项目的具体代码； 
/package.json 是我添加的，等下再讲它的做用； 
项目根目录下的其余文件都是NW.js自带的；

项目结构

具体的代码能够到 github 围观； 
我把项目的代码都放在app目录下，而后以版本号区别开，好比这里的v0.0.1；这么作的目的是为后面的版本更新，更新的办法后面会详细说；

/app/v0.0.1/assest/ 放置一些资源文件，具体的就不介绍了，等下会介绍下/app/v0.0.1/assest/read.js；

/app/v0.0.1/node_modules/ 放置一些第三方包、经过npm管理；

/app/v0.0.1/index.html 项目的入口页面，这里我演示了如何使用第三方包 node-read 来获取一个网页的正文，具体代码能够点这里；

/app/v0.0.1/node-main.js/ 在 package.json里指定；能够在客户端崩溃的状况下，也记录下错误 具体的介绍查看这里；

/app/v0.0.1/package.json/ 告诉NW.js各类信息的配置文件，具体介绍查看这里；

package.json解析

每一个配置项的说明查看这里；

{
  "name": "demo-app",
  "main": "./app/v0.0.1/index.html",//指定项目主页面
  "build": "1445048139741",//这是为了给更新时判断版本用的
  "version": "0.0.1",//当前版本
  "homepage": "http://nero-zou.com",
  "description": "Nw.js Demo",
  "window": {
    "title": "Nw.js Demo",//若是 index.html没有title,则会显示这里的值
    "icon": "assest/img/logo.png",
    "position": "center",
    "width": 1280,
    "height": 680,
    "toolbar": true,//是否隐藏窗口的工具条
    "frame": true,//是否显示最外层的框架，设为false以后 窗口的最小化、最大化、关闭 就没有了
    "resizable": true,
    "min_width": 1028
  },
  "node-main": "./app/v0.0.1/node-main.js",//node-main.js 位置
  "contributors": [
    {
      "name": "邹志强",
      "email": "Nero@nero-zou.com",
      "web": "http://nero-zou.com"
    }
  ],
  "dependencies": { //依赖的包
    "MD5": "1.2.1",
    "cheerio": "^0.19.0",
    "fetch": "^0.3.6",
    "node-read": "^0.1.6"
  }
}

 

代码加密保护

有些状况下，代码仍是不能直接暴露给用户的；咱们能够使用V8 Snapshot 的方式来达到代码加密保护的目的；

具体的方式是使用 /nwjs.exe 来运行 nwjc source.js core.bin命令，而后再index.html里使用require('nw.gui').Window.get().evalNWBin(null, './app/v0.0.1/core.bin');(注意这里的路径，是相对于nw.exe的位置)将代码引入到项目中； 
能够查看 使用V8 shapshot 比不使用的变化 ;

注意 使用V8 Snapshot 仍是有一些限制的 ，好比官方提到的这些； 
还有就是加密的代码里不要使用 let、const这些关键字，我曾经就由于这个始终编译不经过；

自动更新

更新分为两种状况：

• 仅仅项目的代码须要更新

• nw.js自己也须要更新；

一般状况下，不会遇到须要更新nw.js 自己的状况，由于当选定一个版本的NW.js后，就认定它了，除非遇到了什么没法解决的BUG；

那咱们先实现仅更新项目的代码这种状况吧，这个比较简单；前面介绍项目接口就提到 /app/v0.0.1/ 就是放置V0.0.1的全部代码的位置； 
那么若是要更新到V0.0.2，那咱们新建一个文件夹 /app/V0.0.2,而后把V0.0.2的代码都放到这个文件下，而后把/package.json替换成新版本的package.json；这样重启客户端以后，然会读取v0.0.2的代码了。具体的更新代码就不写了，能够把新版本的代码打包成zip包，而后客户端下载好，解压就行。

下面说说NW.js自己也须要更新的状况吧，这个目前我还没遇到，因此只能提供一个思路，因为nw.exe在运行时，咱们是不能替换它的，那么确定须要用别的可执行文件来替换它了，我猜钉钉的实现方式就是这种思路：

项目打包发布

通常都是使用NSIS来打包，可是别忘了在打包前，把须要保护的代码加密，而后删除源文件。干这些机械、无聊的事固然不能让本身来作，必须使用Gulp.js来啊。还能把顺便把代码压缩、文件合并什么的也干了。

一些小坑

里面带的调试工具是不能打断点的，webstorm能够配置，而后就能够断点调试了； 使用NSIS打包别忘了加上文件夹权限的控制，否则会遇到文件没法写入的状况；