node-webkit學習（1）hello world

時間 2019-11-17

標籤 node webkit 學習 hello world 简体版

原文原文鏈接

node-webkit學習（1）hello world

文/玄魂html

目錄html5

node-webkit學習（1）hello world. 1node

前言... 1linux

1.1 環境安裝... 1git

1.1.1 windows下的安裝github

1.1.2 linux環境下的安裝web

1.2 hello worldjson

... 2ubuntu

前言

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

當時第一想到的是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。」

1.1 環境安裝

webkit是開源項目，項目地址爲https://github.com/rogerwang/node-webkit。

咱們能夠在該項目首頁找到downloads節（https://github.com/rogerwang/node-webkit#downloads），該處提供了預編譯版本：

Prebuilt binaries (v0.9.2 - Feb 20, 2014):

· Linux: 32bit / 64bit

· Windows: win32

· Mac: 32bit, 10.7+

1.1.1 windows下的安裝

下載windows版本的安裝包，解壓到磁盤。

雙擊nw.exe,出現以下界面：

1.1.2 linux環境下的安裝

以ubuntu爲例，首先下載安裝包。

wget http://dl.node-webkit.org/v0.8.5/node-webkit-v0.8.5-linux-ia32.tar.gz

解壓：

tar -xzf node-webkit-v0.8.5-linux-ia32.tar.gz

運行nw，看是否正常。

我出現

./nw: error while loading shared libraries: libudev.so.0: cannot open shared object file: No such file or directory

的錯誤。能夠按以下方式解決：

1)下載安裝ghex：sudo apt-get install ghex

2)在nw可執行文件目錄中用ghex打開nw：

ghex nw

3)在ghex中，ctrl+f,打開搜索工具，查找libudev.so.0。

關閉搜索框，在右側字符窗口，修改0爲1。

4)ctrl+s保存後退出ghex，如今再打開nw就會看到一個小窗口了，這就成功了。

1.2 hello world

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

對新的運行時的嘗試，每每都是從經典的hello world開始，本人也難免落俗。

先新建一個helloWorld目錄，存放相關文件。

先建立helloWorld.html文件，內容以下（來自做者的示例）：

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

We are using node.js <script>document.write(process.version)</script>.

</body>

</html>

下一步，建立package.json文件：

{

"name": "helloworld",

"main": "helloworld.html"

}

第三步，將helloworld.html和package.json打包到一個zip文件包中。

下面咱們使用nw來執行壓縮包。

./nw ../helloword/hello.nw

1.3 關於打zip包問題

距離寫這篇文章已通過去2年多了，當時是基於官方的文檔，把咱們本身的素材打到zip包中運行。發佈的時候不少人也在按官方文檔的方式把zip包和exe合併到一塊兒。

實踐證實，這並非一種好方法，一來調試程序很不方便，二來程序啓動的時候要解壓文件致使啓動速度慢，第三程序無法靈活的使用相對目錄。

nw在啓動的時候會自動在啓動目錄尋找package.json並加載，因此在非特殊須要狀況下，沒有必要打包運行。

在程序發佈的時候，能夠採用安裝包的方式進行安裝，全部文件在安裝目錄裏，放出快捷方式來供用戶訪問，也不須要去打包。因此個人建議是儘可能避免此種方式。

原文連接：http://www.xuanhun521.com/Blog/2014/4/9/node-webkit%E5%AD%A6%E4%B9%A01hello-world

下一篇文章，講解基本的程序結構和配置。