NW.JS 客戶端開發入坑指南

基礎概述

NW.js 是基於 Chromium 和 Node.js 運行的， 以前也叫nodeWebkit。這就給了你使用HTML和JavaScript來製作桌面應用的可能。在應用裏你可以直接調用Node.js的各種api以及現有的第三方包。因爲Chromium和 Node.js 的跨平臺，那麼你的應用也是可以跨平臺的。

Getting Started

1、安裝對應的模塊包：

cnpm install nw nw-builder -S

• nw ：基於Chromium和io.js的應用程序運行時。用於構建將在OSX，Windows和Linux上運行的桌面應用程序。https://www.npmjs.com/package/nw
• nw-builder : 以編程方式或通過CLI爲Mac，Win和Linux 構建NW.js應用程序。https://www.npmjs.com/package/nw-builder

2、初始化項目目錄結構

- package.json
- src
	-- package.json
	-- views
		-- main.html
	-- assets
- dist

3、初始化配置package.json的scripts命令

{
  "name": "nw_js",
  "version": "1.0.0",
  "description": "* initialize npm project contain package.json",
  "main": "index.js",
  "scripts": {
    "dev": "nw src/",
    "build": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nw": "^0.44.1-sdk",
    "nw-builder": "^3.5.7"
  }
}

4、初始化窗口屬性配置src/package.json

{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "views/main.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "window": {
    "title": "damiao-classroom demo",
    "icon": "assets/icons8-apple-logo-64.png",
    "toolbar": true,
    "frame": true,
    "resizable": false,
    "width": 800,
    "height": 600,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600,
    "transparent": false,
    "show_in_taskbar":true
  },
  "webkit": {
    "plugin": true
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

6、啓動項目

> npm run dev

代碼加密保護

有些情況下，代碼還是不能直接暴露給用戶的；我們可以使用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來啊。還能把順便把代碼壓縮、文件合併什麼的也幹了。

執行npm run build命令

> npm run build
> nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/

一些小坑

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