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

時間 2019-11-09

標籤 node webkit 教程 platform service app 简体版

原文原文鏈接

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

文/玄魂html

前言

幾個月前，要開發一個簡易的展現應用，要求支持離線播放（桌面應用）和在線播放（web應用）。html5

當時第一想到的是flex，同一套代碼（或者只需少許的更改）就能夠同時運行在桌面和瀏覽器上。因爲不少展示效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是選擇impress.js，就意味着要將html5做爲桌面應用，當時想到要封裝webkit，可是本人對這方面也不是很熟悉，時間也頗有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。node

node-webkit解決了我經過html和js來編寫桌面應用的難題。ios

至於node-webkit的定義，按照做者的說法：git

「基於node.js和chromium的應用程序實時運行環境，可運行經過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操做，node.js提供本地化操做；且將兩者的context徹底整合，可在HTML代碼中直接使用node.js的API。」github

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

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

· Clipboard – 剪貼板windows

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

· 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: