node-webkit 入門

時間 2020-08-10

標籤 node webkit 入門简体版

原文原文鏈接

下載node-webkit

點擊這裏：html

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

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

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

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

Hello nw

老規矩，先來Hello World!web

建一個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，以下圖所示：app

注意，用什麼工具壓縮無所謂，可是必定要壓縮成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