【NWJS】解析node-webkit(NWJS)的打包和發佈

時間 2019-11-06

標籤 NWJS 解析 node webkit nwjs 打包發佈简体版

原文原文鏈接

目錄結構：css

contents structure [-]

node-webkit是一個Chromium和node.js上的結合體，經過它咱們能夠把創建在chrome瀏覽器和node.js上的web應用打包成桌面應用，並且還能夠跨平臺的哦。很顯然比起傳統的桌面應用，在某些特定領域用html5+css3+js開發的web應用更加簡單和高效，並且還可使用node.js的功能，因此node-webkit仍是頗有用處的。html

1.下載和安裝node-webkit

node-webkit的官方網址：https://nwjs.io/
githup的訪問地址：https://github.com/nwjs
node-webkit的中文網址：https://nwjs.org.cn

下載的時候有兩個版本，一個是NORMAL版，另外一個是SDK版本。SDK版本支持debug調試，NORMAL不支持。開發的話，應該下載SDK版本，發佈的話應該下載NORMAL版本。html5

2.創建一個簡單的WEB應用

新創建一個app/index.html,做爲這個demo的入口文件：node

<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
<head>
<body>
    <h1>Hello World!</h1>
</body>
<html>

建立一個配置文件package.json：css3

{
  "main": "app/index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "toolbar": true,
    "frame": true,
    "width": 800,
    "height": 500,
    "position": "center",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true
  }
}

其中main屬性用來指定入口文件，這個屬性值能夠是本地文件，也能夠是遠程網址（至關於把一個遠程的web界面直接變成一個桌面應用了）。其它的屬性，好比：圖標、窗口欄、初始化的大小等等能夠參考官方文檔。git

3.生成EXE可執行文件

將index.html和package.json這兩個文件壓縮到一個zip壓縮包裏，命名爲app.zip

把app.zip這個文件的擴展名改成nw,變爲 app.nw

將app.nw放置到nw.exe同一級目錄，進入windows cmd後運行這個命令：github

copy /b nw.exe+app.nw app.exe

而後會生成app.exe文件。

咱們可使用以下的幾種方式安裝到客戶的電腦上：
1.直接RAR打包，發給用戶，這也就是個綠色版，無需安裝。
2.咱們用軟件工具 Enigma Virtual Box 封包，用這個工具能夠把整個應用程序文件夾生成一個單獨的app.exe, 用戶直接雙擊就能運行，這個也是無需安裝的。
3.用軟件工具innosetup，這個工具會生成一個安裝版本。web

4.修改icon

默認狀況下建立出來的應用程序（exe）會和nw.exe的圖標同樣，能夠經過resource hacker這個工具來修改nw.exe的圖標成你所想要的。

打開resource hacker，找到對應的圖片組資源(icon group),而後右擊選擇替換（replace）就能夠了。

chrome

5.封包

在進行打包前，首先把咱們在NWJS_SDK版本（是在NWJS_SDK版本下進行開發的)下的package.json、app.exe、app文件夾複製到NWJS_NORMAL版本中，而且刪除NWJS_NORMAL版本中的nw.exe文件。

json

5.1 Enigma Virtual Box

官網上推薦用Enigma Virtual Box這個軟件來將app.exe和依賴的dll打包成一個exe後發佈

在選擇待封包的主程(Enter Input File Name)輸入app.exe的路徑
在封包程序另存(Enter Output File Name)輸入可執行程序的輸出路徑
拖入文件和文件夾，選擇nwjs_normal的配置文件(除了app.exe的其它文件和文件夾)

點擊封包後，封包結束後會獲得app_boxed.exe。而後刪除app_boxed.exe以外的全部文件和文件夾（若是在封裝的時候沒有拖入全部的文件，那麼就不能刪除那些未參與封包的文件），而後就能夠獲得最後的可執行文件app_boxed.exe

從截圖能夠看出，這個app_boxed.exe是免安裝的，能夠點擊直接運行。這是Enigma Virtual Box封包的優勢，無需安裝直接運行，但缺點就是太大了，從截圖能夠看出app_boxed.exe達到了202MB。

5.2 Inno Setup

這是另外一種打包方式，就是用Inno Setup來打包成安裝程序，即將一開始的web應用源文件和node-webkit的nw.exe和一些以來dll直接壓縮成一個安裝文件，咱們並不須要上述中間那先打包成app.exe的步驟。用戶在使用你的exe後會出現setup wizard把程序安裝到Program Files目錄中，將nw.exe，dll，web應用釋放出來，這個時候所生成的安裝文件其實大小會小不少。

下載安裝運行後點擊File->New即進入建立步驟

填寫應用發佈的信息：

添加應用程序的打包文件：

執行後續操做，進行編譯：

生成可執行EXE：
咱們能夠看出安裝包的大小是54.3MB,Inno Setup的優勢就是安裝包小，但缺點就是須要進行安裝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。