node-webkit 使用教程

時間 2019-11-09

標籤 node webkit 使用教程简体版

原文原文鏈接

bla...bla...

顧名思義，node-webkit就是nodejs+webkit。html

這樣作的好處顯而易見，核心奧義在於，用nodejs來進行本地化調用，用webkit來解析和執行HTML+JS。node

快速上手

下載node-webkit

點擊這裏：linux

https://github.com/rogerwang/node-webkitgit

找到Downloads這一小節，而後下載對應平臺的node-webkit預編譯包。（爲了介紹起來方便，本文後續內容所有針對windows平臺，OSX和linux平臺上的操做相似，就不作特地說明了。）github

下載完以後解壓，能夠看到以下內容：web

雙擊nw.exe直接運行，看到以下界面說明一切都ok，在你的機器上能夠運行：chrome

Hello nw

老規矩，先來Hello World!npm

建一個example1.html，內容以下：json

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello node-webkit!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

在同一級目錄下再建一個package.json，內容以下：windows

{
  "name": "nw-demo",
  "main": "example1.html"
}

好了，用你機器上的壓縮工具，rar或者7z或者神馬神馬的，把這兩個文件壓縮成exampl1.zip，以下圖所示：

注意，用什麼工具壓縮無所謂，可是必定要壓縮成ZIP格式。

把example1.zip拷貝到與nw.exe同級的目錄下，以下圖：

而後用鼠標把example1.zip拖動到nw.exe上運行（用命令行也能夠，不過在windows下仍是直接拖比較爽一點），效果以下圖：

這樣，第一個例子就完成了，而後你本身能夠去玩兒了。

按照官方的搞法，example1.zip可更名成example1.nw，這樣顯得更加高大上一些。不過因爲小僧的BIG一貫比較低，私認爲用.zip做爲後綴也沒啥不能夠。

來點兒JS

第一個例子代碼很是簡單，你能夠本身加點兒你最熟悉的JS代碼，好比這樣：

<!DOCTYPE html>
<html>
  <head>
    <title>Example2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <h1>Example2</h1>
    <script>
        alert("This is example2!");
    </script>
  </body>
</html>

顯然，這裏有不少HTML5的習慣寫法，那固然是必須的對吧？由於webkit在google的調教之下早已成了HTML5的開路先鋒了！

打包和分發

如上圖，很顯然，要想讓咱們的應用跑起來，以上這些dll和pak文件是少不了的（至於每一個文件是用來幹嗎的，請參見官方的描述文檔）。

那麼，對於咱們作的example1這個簡單的應用，怎麼讓咱們的用戶能運行它呢？固然，讓咱們的用戶本身去下載node-webkit而後解壓運行，這也算一種辦法，這樣的話咱們只要把example1.zip文件扔給他就能夠了。

不過這樣總以爲有點兒奇怪，要是能把全部相關的內容都打包成一個獨立的exe文件就行了，好比打包成example1.exe，這樣用戶拿到以後直接雙擊就能夠運行，這樣顯然是極好的。

OK,let's go!

首先，咱們要合併example1.zip和nw.exe，造成一個新文件，名爲example1.exe，這一點咱們經過windows的命令行下的copy命令能夠實現：

copy /b nw.exe+example1.zip example1.exe

注意，nw.exe必須放在+號前面。

這樣就生成了一個名爲example1.exe的文件，雙擊這個文件，看到的效果和第一個例子相同。很顯然，這個example1.exe仍是要依賴那些dll文件才能運行，因此，這時候咱們須要一款打包工具來幫助咱們把這些example1.exe和dll文件都打包到一塊兒，它就是Enigma Virtual Box ，你們能夠點擊這裏下載安裝：

http://enigmaprotector.com/assets/files/enigmavb.exe

安裝完成以後啓動，看到以下界面：

打包過程截圖（請按照圖中的配置操做）：

點擊右下角的Process按鈕開始打包，最終得到了一個名爲example1_boxed.exe的文件。把這個文件拷貝到其它任意目錄中雙擊，若是能順利運行，說明打包成功！你能夠把它分發給你的用戶了！

官方的文檔上還介紹了其它幾種打包分發方式，不過看起來都不是很實用，有興趣的參見這裏：

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

未竟的主題

以上就是關於node-webkit用法的一些簡單示例，你能夠沿着這個方向本身去探索了。有熱心的網友把咱們的Ext4.1中文文檔打了一個包出來，能夠到腳本娃娃的羣共享（號83163037）去下載（比較大，很差放上來），入羣口令nw

如何最小化發佈？

在官方發佈的內容裏面，icudt.dll這個文件有9724k，nw.exe有38396k，很顯然，這個體積略顯龐大了一些，若是咱們的應用自己很小，只有幾百K，而打包出來的東西有幾十M顯然是不合適的，這樣很是不方便拷貝和網絡傳播。

很顯然，咱們還須要一款工具，可以根據須要進行最小化的打包發佈。

不過目前我還沒找到這樣的好東東，各路大神若有知道的，求指教。

如何利用nodejs調用本地接口？

很顯然，既然nodejs都被打包進來了，網上衆多的npm模塊都是能夠拿過來使用的，具體作法官方主頁上都有比較詳細的介紹，參見這裏https://github.com/rogerwang/node-webkit

其它案例

官方的主頁上還展現了衆多使用node-webkit製做的應用，各位自行點擊查看便可。

展望將來

其實這條路老早就有人在走

網上有不少人在爭論，將來到底是原生的應用會勝出，仍是WEB APP會勝出，實際上這二者並非你死我活的關係，而是會互相融合，走向【混合型應用】這樣一種形態。

先看幾個界面：

你們能夠把本身的網絡斷掉測試以上界面，QQ有時候甚至能爆出JS錯誤，哈哈。

2011年的時候，我發過一篇文章，《將來五年，桌面應用和WEB走向融合》，當時只是由於看到諸如酷我音樂、騰訊QQ這些桌面應用的開發方式而有所感悟，對於桌面應用會以什麼樣的形式和B/S開發模式融合在一塊兒並無確切的想法。而最近因爲打包Ext4.1中文文檔的緣故知道了node- webkit，忽然有一種恍然大悟的趕腳！

固然，酷我音樂盒和疼訊目前是用什麼樣的技術實現的小僧不知道其中的細節（人家也不想讓外人知道對吧？）。不過，小僧相信，對於屌絲單兵做戰來講，疼訊的實現方式確定會比node-webkit更加複雜，目測我的沒法模仿。

跨平臺+多終端的神器

毫無疑問，這貨會成爲2014年的一款神器。由於它具有了如下這些無可比擬的優點：

人力成本最低：招一個會C++的碼農要花多少錢？招一個牛逼哄哄的既會C++還對QT、MFC等了如指掌的碼農又要花多少錢？對比一下，招一個會JS+CSS的呢？若是你是老闆，你怎麼想？再說了，市面上會C++的碼農更多，仍是會JS+CSS的碼農更多？無需小僧多言，其中的奧妙您自個兒體會。
APP的體積更小：列位必定還記得當年大明湖畔的疼訊QQ只有十幾M的體積，俗話說，歲月是把殺豬刀，在集成了疼訊的各類應用以後，現在的QQ身材早已發福走形。能夠想象，若是QQ不使用嵌入瀏覽器內核的方式，恐怕體積早就超過100M了吧！
不須要總體更新APP：若是是按照傳統的方式開發桌面應用，每次升級的時候都須要用戶從新下載整個應用，好比疼訊QQ。可是用node-webkit的這種方式，能夠很好地避免這個問題，就像網站同樣，網站內容能夠不斷更新，可是瀏覽器自己的更新不須要那麼頻繁。
跨平臺：這一點是由NodeJS來保證的。
多終端：因爲nodejs和chromium自己都是能夠在桌面平臺和移動平臺上運行的，所以用這貨來支持多終端開發，保持技術棧的一致性是很是合適的。
完善的工具鏈：因爲nodejs的興起，它下面的npm模塊數量已經有幾十萬個；而各類基於chrome內核的定製版瀏覽器就不用再介紹了。加上傳統B/S開發模式下已經具有的完整開發和設計工具，用node-webkit來開發桌面應用已經具有了完善的工具鏈。