【轉】node-webkit:開發桌面+WEB混合型應用的神器

顧名思義,node-webkit就是nodejs+webkit。html

這樣作的好處顯而易見,核心奧義在於,用nodejs來進行本地化調用,用webkit來解析和執行HTML+JS。node

快速上手

     下載node-webkitlinux

     點擊這裏:git

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

 

     找到Downloads這一小節,而後下載對應平臺的node-webkit預編譯包。(爲了介紹起來方便,本文後續內容所有針對windows平臺,OSX和linux平臺上的操做相似,就不作特地說明了。)web

     下載完以後解壓,能夠看到以下內容:npm

    

     雙擊nw.exe直接運行,看到以下界面說明一切都ok,在你的機器上能夠運行:json

    

    Hello nw

     老規矩,先來Hello World!windows

     建一個example1.html,內容以下:app

    

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello node-webkit!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

   在同一級目錄下再建一個package.json,內容以下:

  

{
     "main" : "example1.htm" ,                      /* APP的主入口,文件名任意;必選 */
     "name" : "nw-demo" ,                              /* APP的名稱,必須具有惟一性,且符合正常變量命名;必選 */
     "description" : "demo app of node-webkit" ,       /* APP的簡單描述 */
     "version" : "0.1.0" ,                             /* APP的版本號 */
     "keywords" : [ "demo" , "node-webkit" ],          /* APP的關鍵字,搜索APP時用到 */
     "window" : {                                      /* APP的窗口屬性 */
         "icon" : "link.png" ,                         /* APP圖標(windows下,狀態欄上可見) */
         "toolbar" : true ,                            /* 是否顯示工具欄 */
         "width" : 800,                                /* 窗口初始化大小 */
         "height" : 500,
         "frame" : true                                /* 是否顯示外窗體,如最大化、最小化、關閉按鈕 */
     },
     "user-agent" : "%name %ver %nwver %webkit_ver %osinfo" /* 可自定義APP的UA */
}

好了,用你機器上的壓縮工具,rar或者7z或者神馬神馬的,把這兩個文件壓縮成exampl1.zip,以下圖所示:

注意,用什麼工具壓縮無所謂,可是必定要壓縮成ZIP格式。

  把example1.zip拷貝到與nw.exe同級的目錄下,以下圖:

   而後用鼠標把example1.zip拖動到nw.exe上運行(用命令行也能夠,不過在windows下仍是直接拖比較爽一點),效果以下圖:

 

   這樣,第一個例子就完成了,而後你本身編寫其餘代碼來運行了。

   第一個例子代碼很是簡單,你能夠本身加點兒你最熟悉的JS代碼,好比這樣:

<!DOCTYPE html>
<html>
  <head>
    <title>Example2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <h1>Example2</h1>
    <script>
        alert("This is example2!");
    </script>
  </body>
</html>

打包和分發

    

    如上圖,很顯然,要想讓咱們的應用跑起來,以上這些dll和pak文件是少不了的(至於每一個文件是用來幹嗎的,請參見官方的描述文檔)。

    那麼,對於咱們作的example1這個簡單的應用,怎麼讓咱們的用戶能運行它呢?固然,讓咱們的用戶本身去下載node-webkit而後解壓運行,這也算一種辦法,這樣的話咱們只要把example1.zip文件扔給他就能夠了。

    不過這樣總以爲有點兒奇怪,要是能把全部相關的內容都打包成一個獨立的exe文件就行了,好比打包成example1.exe,這樣用戶拿到以後直接雙擊就能夠運行就更好。

    首先,咱們要合併example1.zip和nw.exe,造成一個新文件,名爲example1.exe,這一點咱們經過windows的命令行下的copy命令能夠實現:

    example1.zip改後綴爲example1.nw

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

     cd 路徑(好比:cd D:\node-webkit)進入目錄

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

     copy /b nw.exe+(APP name).nw (生成的name).exe

     注意,nw.exe必須放在+號前面。

     這樣就生成了一個名爲example1.exe的文件,雙擊這個文件,看到的效果和第一個例子相同。很顯然,這個example1.exe仍是要依 賴那些dll文件才能運行,因此,這時候咱們須要一款打包工具來幫助咱們把這些example1.exe和dll文件都打包到一塊兒,它就是Enigma Virtual Box,你們能夠點擊這裏下載安裝(內含中文語言包):

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

      安裝完成以後啓動,看到以下界面:

     

      打包過程截圖(請按照圖中的配置操做):

     

      點擊右下角的Process按鈕開始打包,最終得到了一個名爲example1_boxed.exe的文件。把這個文件拷貝到其它任意目錄中雙擊,若是能順利運行,說明打包成功!你能夠把它分發給你的用戶了!

      官方的文檔上還介紹了其它幾種打包分發方式,有興趣的參見這裏:

      https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

      以上就是關於node-webkit用法的一些簡單示例,你能夠沿着這個方向本身去探索了。

如何利用nodejs調用本地接口?

       很顯然,既然nodejs都被打包進來了,網上衆多的npm模塊都是能夠拿過來使用的,具體作法官方主頁上都有比較詳細的介紹。

       參見這裏:https://github.com/rogerwang/node-webkit

       官方的主頁上還展現了衆多使用node-webkit製做的應用,各位自行點擊查看便可。

參考資料

        關於node-webkit做者的介紹參見這裏:

        http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

        node-webkit在github上的地址:

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

        因爲node-webkit的做者提供的文檔都是E文的,有熱心網友對文檔作了一些翻譯,參見這裏:

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

        其餘參考:

        http://www.open-open.com/lib/view/open1383143218062.html

相關文章
相關標籤/搜索