node-webkit教程(7)Platform Service之APP

本文轉載自查看原文 2014-04-17 15:39 10333 node.js/ node-webkit/ nw.js/ webkit

node-webkit教程(7)Platform Service之APP

文/玄魂

前言

幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（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。”

從本篇文章開始，為您介紹Platform Services些列的API，本系列由以下類別：

· App – 每個應用運行時全局api

· Clipboard – 剪貼板

· Tray – 狀態欄圖標，消息通知

· File dialogs-文件選擇對話框

· Shell – 桌面相關

· Handling files and arguments-處理文件和相關參數

7.1 APP 概述

APP類別的API 是針對當前正在運行的應用程序實例的，換個說法是進程級別的（這樣說還不准確，node-webkit每一個窗口在單獨進程中，應用本身是多進程的）。這些API和程序的啟動、關閉關系最密切。但是從目前文檔中的API來看，APP類別的API顯得不是很豐富。

新建appDemo.html和package.json文件。

package.json內容如下：

{

"name": "app-demo",

"main": "appDemo.html",

"nodejs":true,

"window": {

"title": "appDemo",

"toolbar": true,

"width": 800,

"height": 600,

"resizable":true,

"show_in_taskbar":true,

"frame":true,

"kiosk":false,

"icon": "2655716405282662783.png",

"webkit":{

"plugin":true

}

appDemo.html內容如下：

<html>

<head>

<title>appDemo</title>

</head>

<body >

// Load native UI library

var gui = require('nw.gui');

var win = gui.Window.get();

</script>

</body>

</html>

7.1 獲取APP對象

通過如下方式獲得APP對象：

// Load native UI library

var gui = require('nw.gui');

var app = gui.App;

7.2 獲取命令行參數

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）

很多時候，我們啟動程序需要從命令行輸入參數，可以通過argv、fullArgv和filteredArgv獲取輸入參數。關於三者的區別參考：https://github.com/rogerwang/node-webkit/wiki/App#fullargv。我的測試結果和文檔還是有出入的。

修改appDemo.html如下：

<html>

<head>

<title>appDemo</title>

</head>

<body >

// Load native UI library

var gui = require('nw.gui');

var app = gui.App;

apendText(app.argv);

apendText(app.fullArgv);

apendText(app.filteredArgv);

function apendText(text)

{

var element = document.createElement('div');

element.appendChild(document.createTextNode(text));

document.body.appendChild(element);

}

</script>

</body>

</html>

在命令行啟動程序：

運行結果如下：

7.3 dataPath

應用的數據存儲目錄，在不同的操作系統上路徑不同，Windows: %LOCALAPPDATA%/<name>

Linux: ~/.config/<name>;

OSX:~/Library/Application Support/<name>

這里的<name>是在package.json中定義的name字段的值，所以需要在定義name值的時候保證全局唯一。

7.4 獲取manifest

使用manifest屬性，可以獲取package.json中的json對象。修改appDemo。html的腳本內容如下：

// Load native UI library

var gui = require('nw.gui');

var app = gui.App;

var manifest = app.manifest;

apendText(manifest.name);

function apendText(text)

{

var element = document.createElement('div');

element.appendChild(document.createTextNode(text));

document.body.appendChild(element);

}

</script>

結果如下：

7.5 清除緩存

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）

可以調用clearCache()方法，清除應用在內存和磁盤上的緩存。

7.6 關閉程序

關閉程序有兩個函數可以調用，分別為closeAllWindows()和quit()方法，兩者的區別在於closeAllWindows()方法會發送窗口的關閉消息，我們可以監聽close事件（參考：http://www.xuanhun521.com/Blog/2014/4/14/node-webkit%E5%AD%A6%E4%B9%A04native-ui-api-%E4%B9%8Bwindow），阻止窗口關閉或者做其他日志等工作。quit()方法不會發送任何消息，直接退出程序。

7.7 Crash dump

從node-webkit 0.8.0版本開始，如果應用崩潰，一個minidump 文件會被保存到磁盤，用以調試和尋找程序崩潰的原因。默認情況下，dump文件保存在系統的臨時文件夾中，我們也可以通過api來設置dump文件的存放目錄。以下是個版本系統的臨時目錄：

· Linux: /tmp

· Windows: System temporary directory

· Mac: ~/Library/Breakpad/product name (product name is defined in .plist file in the application bundle)

為了方便測試，node-webkit提供了App.crashBrowser()和App.crashRenderer()兩個api，分別保存browser 進程和render進程的數據。下面我們通過實例演示將dump文件保存到本地磁盤D。

// Load native UI library

var gui = require('nw.gui');

var app = gui.App;

app.setCrashDumpDir('d:\\');//設置轉儲目錄

app.crashBrowser();

app.crashRenderer();

function apendText(text)

{

var element = document.createElement('div');

element.appendChild(document.createTextNode(text));

document.body.appendChild(element);

}

</script>

運行程序，應用啟動后會崩潰退出，在D盤會看到轉儲文件：

如何查看轉儲文件，這里就不詳細介紹了，會在專門的文章中講解，讀者現在可以參考文檔中的鏈接：

Decoding the stack trace

To extract the stack trace from the minidump file, you need the minidump_stackwalk tool, symbols file of node-webkit binary and the minidump (.dmp) file generated from the crash.

See http://www.chromium.org/developers/decoding-crash-dumps

http://code.google.com/p/google-breakpad/wiki/GettingStartedWithBreakpad

Symbols file of official node-webkit binary is provided staring from 0.8.0. It can be downloaded from: