使用node-webkit(v0.35.5)和innosetup(3.6.1)打包將web程序打包為桌面客戶端(安裝包)

        這邊主要是有一個客戶，需要在電視機上安裝一個客戶端，含有視頻直播功能；剛開始我們采用的webapp打包成apk安裝在電視機上，發現攝像頭監控畫面根本無法播放(apk在手機上可以正常播放視頻)；排除一些原因之后，初步判斷是電視機的內置瀏覽器內核是閹割版，不支持視頻的播放，必須切換內核才行，但是webapp是不支持切換內核的，只能開發原生apk，使用qq x5內核，成本太大了，綜合考慮之下，將電視機主板換成windows微主機，將web地址偽裝成桌面客戶端，暫時采用這種方式實現，好了，廢話不多說，參照以下步驟進行：

注意：使用nwjs打包之后，不能像瀏覽器端一樣清除緩存了，一旦頁面發生修改(js/css文件發生修改)，使用nw打包的客戶端不能同步修改后的效果；此時需要手動刪除掉緩存的文件：一般存在於AppData/Local/應用名稱 下，直接刪除所有文件即可。

1、下載和安裝node-webkit

進入官網后（https://nwjs.io/downloads/），點擊下載，為了兼容性考慮，我這里選擇是win32版本(32位程序可在64位下運行，反之不行)

2、解壓(nwjs-v0.35.5-win-ia32.zip)

 

3、准備website

如果只是訪問服務器上的url地址的話，直接建立一個package.json文件即可，文件內容格式如下：

{
  "main":"http://www.baidu.com",
  "name": "baidu",
  "window": {
    "title": "baidu",
    "icon": "image/logo.png",
    "toolbar": false,
    "width": 1280,
    "height": 800,
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false
  }
}

若不需要顯示任何導航欄(打開記錄全屏顯示)：

{
　　"name":"SLYJ",//文件名 不可以存在空格
　　"main":"http://192.168.10.148:8001/index.html",//node-webkit啟動的時候默認打開的頁面,地址最好使用絕對路徑。
　　"window":{//控制主窗口的顯示風格
　　　　"fullscreen":true, ////bool 值。是否全屏顯示。
　　　　"frame": false,
　　　　"show_in_taskbar":true, //是否在任務欄顯示圖標。
　　　　"icon":""  //軟件圖標
　　}
}

main這個參數直接寫上一個網址(如何是需要將單獨一個web程序打包，指向起始頁url地址即可)

window.icon這個參數可以配置這個exe在windows的底部任務欄上的圖標

toolbar最好設置為true，這樣子你的應用程序上面會有類似於瀏覽器的工具欄，如果你的程序類似於一個音樂播放器之類的東西，那么你可能需要設置為false

關鍵package.json的語法請參考：

https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

4、生成可執行exe

①將package.json壓縮，直接選中右鍵壓縮，必須保證package.json文件在壓縮包的第一級目錄

②將壓縮包package.zip修改后綴名，改為:app.nw，后綴必須為nw，名稱隨意

③將app.nw拷貝到nwjs-v0.35.5-win-ia32.zip的解壓目錄下：

 

④在地址欄輸入cmd，執行命令：

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

 

 

可以看到，該目錄下生成了一個exe程序

雙擊運行該app.exe，可以看到打開了一個類似於客戶端一樣的頁面，其實相當於一個瀏覽器了

 

 

僅僅這樣就完了么？當然不是，總不能每次拷貝這個文件夾，然后讓別人點擊app.exe來運行吧，所有我們這里將它打包為一個安裝程序，跟所有的桌面級客戶端一樣，只要安裝了就可以點擊桌面上的圖標進行訪問，廢話不多說，看看怎么來打包：

1、下載Inno Setup工具(下載地址：http://www.jrsoftware.org/isdl.php)，這里我下載的是5.6.1版本：innosetup-5.6.1.exe

2、安裝，安裝過程不多說了，下一步下一步，和一般的軟件安裝過程一樣，安裝完之后，新建(菜單操作：File--New)

 

這些內容會顯示在安裝程序中，按實際來填寫即可

選擇app.exe，並將app.exe運行所需要的文件全部加入(除了app.exe，其他文件我全部加入了，防止報錯，我試了一下刪除那幾個較大的dll或者bin文件，刪除之后安裝包無法正常運行，所以全部加上吧)

locales文件夾也必須加上，里面全部是依賴運行的組件；因為locales文件夾下沒有子文件夾，這里選擇是或者否都行

下面的可以不填，直接下一步按默認選中即可

選擇保存路徑和exe文件的圖標和名字

下一步到最后，會生成一大堆執行腳本，直接執行的話，可以生成安裝包文件，但是無法啟動，因為直接打包的話，安裝時會將app.exe運行依賴的文件全部放在和app.exe同層目錄，運行時會找不到locales下的文件，必須按照同樣的文件夾結構擺放所有文件：

可以試下，直接生成安裝程序，然后安裝

安裝完，啟動報錯了：

然后查看安裝的路徑文件，所有文件全部在同一級目錄：

 

這里我們需要修改以下腳本，安裝后的文件，按照原文件夾擺放：

將

Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}"; Flags: ignoreversion

修改為：

Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion

另外，需要更改安裝在桌面的上圖標的話，需要將：

Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon

更改為：

Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "C:\Users\WD\Desktop\lims_tv.ico"

完整腳本如下：

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "安然"
#define MyAppVersion "1.0"
#define MyAppPublisher "安然打包, Inc."
#define MyAppURL "http://www.example.com/"
#define MyAppExeName "app.exe"

[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{8E3E8A75-E008-40BE-90CF-9A4830A47B42}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputDir=E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32
OutputBaseFilename=test_setup
SetupIconFile=C:\Users\WD\Desktop\Pig.ico
Compression=lzma
SolidCompression=yes

[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\app.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\app.nw"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\credits.html"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\d3dcompiler_47.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\natives_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\node.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\notification_helper.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\resources.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\v8_context_snapshot.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "C:\Users\WD\Desktop\lims_tv.ico"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

更改完腳本之后，運行腳本，即可重新生成安裝包，然后安裝 test_setup.exe(和正常軟件一樣，直接下一步)，安裝完之后，桌面會出現一個圖標，這是我選擇的圖標文件：lims_tv.ico

 我的最終完整腳本如下：

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "XXXX"
#define MyAppVersion "1.0"
#define MyAppPublisher "XXXX, Inc."
#define MyAppURL "http://www.XXXX.com/"
#define MyAppExeName "app.exe"


[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{0354EFDC-6AB8-4C90-B574-95A890A10DDD}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputDir=C:\Users\WD\Desktop\1212
OutputBaseFilename=limstv_setup
SetupIconFile=C:\Users\WD\Desktop\Pig.ico
Compression=lzma
SolidCompression=yes

[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\app.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\app.nw"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\natives_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\node.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\notification_helper.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\resources.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\lims_tv.ico"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\v8_context_snapshot.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "{app}\xxxx.ico"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent