NW.js 入坑指南

標籤：ddn   重啟   視窗   設定檔   如何   使用者   解決   htm   檔案夾許可權   

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": "[email protected]",      "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在運行時，我們是不能替換它的，那麼肯定需要用別的可執行檔來替換它了，我猜DingTalk的實現方式就是這種思路：

項目打包發布

一般都是使用NSIS來打包，但是別忘了在打包前，把需要保護的代碼加密，然後刪除源檔案。幹這些機械、無聊的事當然不能讓自己來做，必須使用Gulp.js來啊。還能把順便把代碼壓縮、檔案合并什麼的也幹了。

一些小坑

裡面帶的調試工具是不能打斷點的，webstorm可以配置，然後就可以斷點調試了； 
使用NSIS打包別忘了加上檔案夾許可權的控制，不然會遇到檔案無法寫入的情況；

NW.js 入坑指南