node-webkit入門:用JS開發跨平台的桌面應用

标簽：

node-webkit

桌面應用

it

分類： nodewebkit

先來說下我這裡的場景，公司目前在給客戶那邊做一個資料倉庫的項目，用EXTJS做完了B/S結構的，但是發現當初答應客戶要有個C/S結構的，現在來說的話，如果在重頭搞C/S結構時間人力都木有的。然後部門老大說你可以看看 node-webkit，咱們隻要用一下最基本的包裝就行，就是把一個網址直接包入到用戶端中，是個僞C/S結構。

以下是從網絡上搞的各種文章。

node-webkit入門:用JS開發跨平台的桌面應用

，在自己稍加修改後，寫出來。目前自己在 MAC和WIN8上親測成功！！

==================================我是分割線===================================

node-webkit是一個基于chromium和node.js實作的應用程式運作時環境，開發人員可運作通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程式。

項目位址： https://github.com/rogerwang/node-webkit

文檔：

https://github.com/rogerwang/node-webkit/wiki

開源協定：MIT

特點：

使用web技術開發，html5、css3、js、webGL。

在網頁中使用node.js。

跨平台運作，相容linux、mac、windows。

安裝node-webkit(這裡以mac os為例)

1.去github下載下傳mac版的node-webkit

https://github.com/rogerwang/node-webkit

下載下傳之後解壓：如下圖

2.解壓之後修改 ~/.bash_profile ，設定node-webkit執行程式的别名為nw(本人解壓在/Applications目錄)。

alias nw="

/Applications/node-webkit-v0.9.2-osx-ia32/node-webkit.app

/Contents/MacOS/node-webkit”

這裡如何檢視Contents/MacOS/ 這個目錄呢？其實mac會把應用程式打成一個包，你要右擊應用程式，然後顯示包内容如下圖

3.使别名立即生效

source ~/.bash_profile

4. 在控制台輸入nw測試是否安裝成功。

PS：Windows安裝很友善，直接解壓縮就好。

使用node-webkit進行開發

一個基本的node-webkit項目一般由3部分組成：主視窗檔案index.html、配置檔案package.json、其他一些資源及類庫。

接下來，搞個helloworld。

Mac版本：

1. 建立一個項目檔案夾test1/

2. 建立主視窗檔案test1/index.html

3. 建立test1/package.json

{ "main" : "index.html",

"name" : "test",

"window" : { "toolbar" : false }

}

這裡的main也可以直接寫一個網址：比如把一個B/S結果的網站，給搞成一個僞狀态的C/S結構，這其實就是我們搞的關鍵

4. 在控制台執行 nw test1 就能運作該應用程式。

打包應用程式

目前我們運作一個應用程式需要通過指令行來執行。

但在實際環境中我們需要将應用打包成.app(mac)或.exe(windows)檔案以友善使用者的使用。

mac電腦上打包很簡單，隻需要将我們的項目壓縮成xx.nw 。在将xx.nw複制到node-webkit.app/Contents/Resources目錄下。node-webkit.app就是你的應用程式了，然後改名字如 hello.app 。

壓縮： zip app.nw package.json

拷貝：cp app.nw /Applications/node-webkit-v0.9.2-osx-ia32/node-webkit.app/Contents/Resources/

最後完事删除掉：rm -rf app.nw

windows下：

下載下傳完之後解壓，可以看到如下内容：

輕按兩下nw.exe直接運作，看到如下界面說明一切都ok，在你的機器上可以運作：

{

}

來點兒JS

打包和分發

copy /b nw.exe+example1.zip example1.exe

Enigma Virtual Box

，大家可以點選這裡下載下傳安裝：

http://enigmaprotector.com/assets/files/enigmavb.exe

{
   "main": "main.html",                              
   "name": "nw-demo",                                
   "description": "demo app of node-webkit",         
   "version": "0.1.0",                               
   "keywords": [ "demo", "node-webkit"],            
   "window": {                                       
       "icon": "link.png",                           
       "toolbar": true,                              
       "width": 800,                                 
       "height": 500,
       "frame": true                                
   },
   "user-agent": "%name %ver %nwver %webkit_ver %osinfo"
}

node-webkit入門:用JS開發跨平台的桌面應用