將html檔打包給node-webkit—入門教學

本教學作業環境為Fedora17。

本教學以H5BP的基礎架構進行擴充。

資料來源:

node-webkit官方: https://github.com/rogerwang/node-webkithttps://github.com/rogerwang/node-webkit/wiki/Manifest-format

H5BP官方:http://html5boilerplate.com/

結構

本教學文件完成後的資料夾及檔案的結構如下:

~/node-webkit
    |
    |-nw_package
        |-config/
        |-html/
        |-css/
            |-main.css
            |-normalize.css
        |-js/
            |-vendor/
                |-jquery-1.9.1.min.js
                |-modernizr-2.6.2.min.js
            |-main.js
            |-plugins.js
        |-index.html
        |-package.json
        |-node-webkit-DEMO.nw
    |
    |-node-webkit-v0.6.2-linux-ia32/
        |-libffmpegsumo.so
        |-nw
        |-nw.pak
        |-nwsnapshot

打包前作業

首先在home目錄創建一個資料夾:

$mkdir ~/node-webkit
$cd ~/node-webkit
$mdkdir nw_package
$cd nw_package

下載H5BP並解壓縮,複製其中的 img/css/jsindex.html 至此資料夾內。

追加一些資料夾:

$mkdir config media font html pdf

Note

說明:

js/ -> 存放 javascript相關的.js檔案

css/ -> 存放css

html/ -> 存放除了index.html外的html檔

font/ -> 存放字型檔

media/ > 存放多媒體檔 如 mp3 、 swf 、 ogg 、mp4

pdf/ -> 存放pdf檔

創建一個package.json:

$vim package.json
$cat package.json
{
  "main": "index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "toolbar": true,
    "frame": false,
    "width": 800,
    "height": 600,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
  "plugin": true
  }
}

Note

package.json是nw在執行時不可或缺的應用程式執行資訊清單,打包一定要位於資料夾的最上層。

package.json內容(雙引號內要填入的值):

“main”: “index.html” 這裡是起始網頁的名稱,一般是填入index.html,依個人需求可改變。

“name”: “” 這個nw檔的名稱

“description”: “” 簡單的描述說明

“version”: “” 版本號

“window”:{} node-webkit視窗設定

“toolbar”:”” 工具列隱藏/顯示,true就是顯示

“title” 視窗標題(選用)

“icon”: 圖形標籤(選用)

“position” 使用滑鼠定位

“frame”: 引用框架(選用)

“width”:800 視窗預設寬度

“height”:600 視窗預設高度

“webkit”: { “plugin”: true } 使用瀏覽器插件。

打包

使用zip進行壓縮打包:

$zip -r nw_package-DEMO.nw *

node-webkit使用

Linux版本

下載 node-webkit 並解壓縮至 ~/node-webkit/ 下。

進入node-webkit的資料夾內, 把剛剛打包的 nw_package-DEMO.nw``用 ``nw 來執行 。

$./nw ../nw_package/nw_package-DEMO.nw

Windows版本

一樣也是下載+解壓縮,會看到一個 nw.exe ,將壓縮打包好的檔案拖曳上去放開就可執行。