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打包別忘了加上文件夾權限的控制，不然會遇到文件無法寫入的情況；

來自：http://segmentfault.com/a/1190000003870613