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