文/玄魂
目錄
node webkit學習(2)基本結構和配置
前言
2.1 基本程序結構
2.2 package.json
2.2.1 必須的配置
2.2.2 特性控制字段
2.3 小結
幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少量的更改）就可以同時運行在桌面和瀏覽器上。由於很多展現效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。如果選擇impress.js，就意味着要將html5作為桌面應用，當時想到要封裝webkit，但是本人對這方面也不是很熟悉，時間也很有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我通過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照作者的說法：
“ 基於node.js和chromium的應用程序實時運行環境，可運行通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代碼中直接使用node.js的API。”
如上圖，是一個nw程序的基本組織結構，在根目錄下package.json,程序的配置文件；index.html(可以是任意名稱)，應用的啟動頁面；js/css/resources，應用的樣式、腳本、html、圖片等資源文件；node_modules存放node.js的擴展組件。
nw在啟動應用程序時，首先要讀取package.json文件，初始化基本屬性，下面我們看看package.json的參數。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客(node webkit學習(2)基本結構和配置)
一個完整的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": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
}
}
在上面的配置中main和name是必須的屬性。
main指定程序的起始頁面。
name字符串必須是小寫字母或者數字，可以包含"." 或者"_"或者"-" ，不允許帶空格。name必須全局唯一。
nodejs
bool值，如果設置為false，將禁用webkit的node支持。
在上一篇文章（node-webkit學習（1）hello world）中的示例，在helloWorld.html中，輸出了node.js的版本信息，現在我們在pakage.json中禁用node。
結果如下：
版本信息沒有輸出，同時在終端會出現未捕獲異常：
[10894:0409/144559:INFO:CONSOLE(8)] "Uncaught ReferenceError: process is not defined", source: file:///tmp/.org.chromium.Chromium.F4YVql/helloword.html (8)
node-main
字符串。指定一個node.js文件，當程序啟動時，該文件會被運行，啟動時間要早於node-webkit加載html的時間。它在node上下文中運行，可以用它來實現類似后台線程的功能。
在node-main腳本中還可以訪問全局的“window”對象，它指向DOM窗口，但是如果頁面導航發生變化，訪問到的window對象也會發生變化。因為它執行時間要早於DOM加載，所以要等頁面加載完畢，才能使用“window”對象。
同時，在DOM頁面中，可以通過process.mainModule來獲取node-main信息。
繼續修改之前的helloworld，在程序源文件夾下，添加一個hello.js，內容如下：
var i = 0;
exports.callback0 = function () {
console.log(i + ": " + window.location);
window.alert ("i = " + i);
i = i + 1;
}
修改helloworld.html為：
<html>
<head>
<title>Hello World!</title>
</head>
<bodyonload="process.mainModule.exports.callback0()">
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version); </script>
</body>
</html>
修改package.json，添加“node-main”配置。
重新打包所有文件，運行。
不停的刷新頁面，可以看到i值在不斷增加，證明node-main中的代碼在單獨的contex中運行。
single-instance
bool值。默認情況下，如果將node-webkit程序打包發布，那么只運行同時啟動一個該應用的實例。如果你希望允許同時啟動多個實例，將該值設置為false。
window
設置窗口外觀。由一組子屬性構成，分別如下：
l title
字符串，設置默認title。
l width/height
主窗口的大小。
l toolbar
bool值。是否顯示導航欄。
現在修改package.json如下：
重新運行程序，結果如下：
在圖中我們可以看到，窗口的title、大小和顯示位置都發生 了變化，同時導航欄消失 了。
l icon
窗口的icon。
l position
字符串。窗口打開時的位置，可以設置為“null”、“center”或者“mouse”。
l min_width/min_height
窗口的最小值。
l max_width/max_height
窗口顯示的最大值。
l as_desktop
bool值。（暫時還沒明白具體作用）
l resizable
bool值。是否允許調整窗口大小。
l always-on-top
bool值。窗口置頂。
l fullscreen
bool值。是否全屏顯示。
l show_in_taskbar
是否在任務欄顯示圖標。
如上圖，配置程序在任務欄顯示，在windows和ubuntu下運行，都可以看到顯示任務欄圖標。
l frame
bool值。如果設置為false，程序將無邊框顯示。
示例package.json:
運行效果如下：
默認情況下，無邊框的程序，將不可拖動。
可以通過添加如下樣式來使窗口可拖動：
<html>
<head>
<style>
body
{
-webkit-user-select:none;
-webkit-app-region:drag;
}
</style>
</head>
<body onload="process.mainModule.exports.callback0()">
<h1>Hello World!</h1>
We are using node.js
<script>document.write(process.version); </script>
</body>
</html>
l show
bool值，如果設置為false，啟動時窗口不可見。
l kiosk
bool值。是否使用kiosk模式。如果使用kiosk模式，應用程序將全屏顯示，並且阻止用戶離開應用。
webkit
webkit屬性，用來控制webkit一些特性的打開或者關閉，由一組屬性組成。
l plugin
bool值，是否加載插件，如flash，默認值為false。
l java
bool值，是否加載Java applets，默認為false。
l page-cache
bool值，是否啟用頁面緩存，默認為false。
user-agent
應用發起http請求時，使用的user-agent頭信息。下列占位符可以被替換：
· %name: 替換配置中的name屬性
· %ver: 替換配置中的version屬性
· %nwver: 被node-webkit版本信息替換.
· %webkit_ver: 被WebKit 引擎的版本信息替換.
· %osinfo: 被 操作系統和 CPU 信息 替換，在瀏覽器的 user agent 字符串中可以被看到.
示例配置：
{
"name": "nw-demo",
"main": "helloword.html",
"nodejs":true,
"node-main":"hello.js",
"window": {
"title": "設置默認",
"toolbar": true,
"width": 300,
"height": 200,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false
},
"webkit":{
"plugin":true
}
"user-agent": "測試 %ver %nwver %webkit_ver windows7" /* 替換占位符內容即可 */
}
chromium-args
string類型，自定義chromium啟動參數。詳細的參數列表參考：http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc
js-flags
string類型，傳遞給js引擎（V8）的參數。例如，想啟用Harmony Proxies和 Collections功能，可以使用如下配置方式：
{
"name": "nw-demo",
"main": "index.html",
"js-flags": "--harmony_proxies --harmony_collections"
}
inject-js-start / inject-js-end
string 類型。指定一個js文件。
對於inject-js-start，該js文件會在所有css文件加載完畢，dom初始化之前執行。
對於inject-js-end，該js文件會在頁面加載完畢，onload事件觸發之前執行。
snapshot
string類型，應用程序的快照文件路徑。包含編譯的js代碼。使用快照文件可以有效的保護js代碼。后續文章會詳細介紹。
dom_storage_quota
int類型，dom 存儲的限額（以自己為單位）。建議限制為你預想大小的2倍。
no-edit-menu
bool值，Edit菜單是否顯示。僅在Mac系統下有效。
description
簡要描述
version
版本信息
keywords
關鍵詞
maintainers
軟件維護者信息，是一個數組，示例如下：
"maintainers":[ {
"name": "Bill Bloggs",
"email": "billblogs@bblogmedia.com",
"web": "http://www.bblogmedia.com",
}]
每個維護人的信息中，name字段是必須字段，其他兩個（email和web）是可選字段。
contributors
貢獻者信息，格式同maintainers，按照約定，第一個contributor是該應用的作者。
bugs
提交bug的url。可以是“mailto：”或者“http://”格式。
licenses
一個數組，可以包含多個聲明。每個聲明包含“type”和“url”兩個屬性，分別指定聲明的類型和文本。
示例如下：
"licenses": [
{
"type": "GPLv2",
"url": "http://www.example.com/licenses/gpl.html",
}
]
repositories
程序包的存儲地址數組。示例如下：
"repositories": [
{
"type": "git",
"url": "http://github.com/example.git",
"path": "packages/mypackage"
}
]
type和url指定可以下載或者克隆程序包的地址，如果程序包不在根目錄中，需要在path屬性指定相對目錄。
2.3 小結
本篇文章基本涵蓋了package.json的所有字段的說明，有些字段本人也不明白實際用途，還有些字段現階段node-webkit也沒有使用（description，version，keywords，maintainers，contributors，bugs，licenses，repositories）。
下一篇文章介紹常用的native api。
更多相關內容，歡迎訪問玄魂的博客(node webkit學習(2)基本結構和配置)
ps：ps：nw.js，electron交流群 313717550