使用node-webkit将web程式打包成windows桌面應用安裝程式，實作從桌面應用通路web應用程式或者自定義網頁。
node-webkit的準備工作
-
下載下傳和安裝node-webkit
進入node-webkit官網,點選下載下傳所需要的版本，我這裡選擇的是windows64位版本
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) - 将下載下傳的壓縮包解壓
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) -
準備web應用的網址或者自定義網頁
在制作桌面應用之前需要一個特别重要的檔案package.json,具體内容如下：
{ "main": "main.html", /* APP的主入口，檔案名任意；必選 */ "name": "nw-demo", /* APP的名稱，必須具備唯一性，且符合正常變量命名；必選 */ "nodejs":true, "node-main":"hello.js", "description": "demo app of node-webkit", /* APP的簡單描述 */ "version": "0.1.0", /* APP的版本号 */ "keywords": [ "demo", "node-webkit" ], /* APP的關鍵字，搜尋APP時用到 */ "maintainers":[ { /*軟體維護者資訊*/ "name": "zhang san", "email": "[email protected]", "web": "http://www.baidu.com", }], "contributors":[ { /*軟體貢獻者資訊*/ "name": "zhang san", "email": "[email protected]", "web": "http://www.baidu.com", }], "licenses": [ /*聲明的類型和文本，可以多個*/ { "type": "GPLv2", "url": "http://www.example.com/licenses/gpl.html", } ], "repositories": [ /*程式包的存儲位址數組*/ { "type": "git", "url": "http://github.com/example.git", "path": "packages/mypackage" } ], "window": { /* APP的視窗屬性 */ "title": "node-webkit demo", "icon": "link.png", /* APP圖示（windows下，狀态欄上可見） */ "toolbar": true, /* 是否顯示工具欄 */ "width": 800, /* 視窗初始化大小 */ "height": 500, "frame": true, /* 是否顯示外窗體，如最大化、最小化、關閉按鈕 */ "position": "mouse", "min_width": 400, "min_height": 200, "max_width": 800, "max_height": 600, "resizable":false, /* 是否允許調整視窗大小 */ "always-on-top":false, /* 視窗是否置頂 */ "fullscreen":true, /* 是否全屏顯示 */ "show_in_taskbar":true, /* 是否在工作列顯示圖示 */ "frame":false, /* 預設false情況下，無邊框的程式，将不可拖動 */ "show":false, /* 如果設定為false，啟動時視窗不可見 */ "kiosk":true, /* 如果使用kiosk模式應用将全屏顯示，并且組織使用者離開應用 */ }, "webkit": { "plugin": true, /* 是否加載插件，如flash，預設值為false。*/ "java":false, /* bool值，是否加載Java applets，預設為false。*/ "page-cache":false, /* bool值，是否啟用頁面緩存，預設為false。*/ }, "user-agent": "%name %ver %nwver %webkit_ver %osinfo" /*下列占位符可以被替換：%name: 替換配置中的name屬性,%ver: 替換配置中的version屬性 %nwver: 被node-webkit版本資訊替換,%webkit_ver: 被WebKit 引擎的版本資訊替換, %osinfo: 被 作業系統和 CPU 資訊 替換，在浏覽器的 user agent 字元串中可以被看到 */ }package.json内容按照自己的需要選取，實作你想要的結果，注意：mian和name必須存在。
下面為自己制作的node-webkit的示範執行個體，需要在一個空檔案夾中建立下面所需檔案：
（1）自定html頁面通路demo
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 如上圖所示：
index.html
package.json<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello node-webkit!</h1> <h1>node-webkit demo</h1> </body> </html>{ "main": "index.html", "name": "my_nw", "description": "my_nw app of node-webkit", "version": "0.1.0", "keywords": [ "my_nw", "node-webkit" ], "maintainers":[ { "name": "zhang san", "email": "[email protected]", "web": "http://www.baidu.com" }], "window": { "title":"node-webkit", "icon": "nb.ico", "toolbar": true, "width": 800, "height": 500, "position": "mouse", "frame": true, "show_in_taskbar":true }, "user-agent": "%name %ver %nwver %webkit_ver %osinfo" }（2）直接通路web應用
隻需要将main裡面的内容改為web應用的位址，不需要index.html即可，我這邊使用百度的位址
{ "main": "http://www.baidu.com", "name": "my_nw", "description": "my_nw app of node-webkit", "version": "0.1.0", "keywords": [ "my_nw", "node-webkit" ], "maintainers":[ { "name": "zhang san", "email": "[email protected]", "web": "http://www.baidu.com" }], "window": { "title":"node-webkit", "icon": "nb.ico", "toolbar": true, "width": 800, "height": 500, "position": "mouse", "frame": true, "show_in_taskbar":true }, "user-agent": "%name %ver %nwver %webkit_ver %osinfo" } -
生成可執行的exe檔案
不管是自定義還是直接通路web應用，以下步驟均一樣
主要步驟如下：
（1）将所有一起檔案壓縮，必須保證package.json檔案在壓縮包的第一級目錄
（2）将壓縮包修改字尾名，改為my_nw.nw，字尾必須為nw，名稱可随意 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) （3）将my_nw.nw拷貝到之前下載下傳并解壓的node-webkit的目錄下 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 我的目錄重新命名了一下，其實就是步驟2中node-webkit 解壓的目錄
此時可以選中my_nw.nw檔案拖至nw.exe檔案上可以直接看到運作後的效果
通路web應用： 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 通路自定義htnl頁面： 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) (4)直接在上述目錄的位址欄輸入cmd并回車 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 打開cmd，并輸入copy /b nw.exe+my_nw.nw my_nw.exe，注意：nw.exe必須在前面 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 可以看到目錄下生成的my_nw.exe檔案，直接輕按兩下可以看到步驟(3)一樣的打開效果 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe)
Inno Setup工具的使用：打包過程
- 下載下傳Inno Setup工具(下載下傳位址：http://www.jrsoftware.org/isdl.php) 安裝過程很簡單，不會的話可以自行網上搜尋
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) - 建立exe安裝檔案
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 注意：locales檔案夾也必須加上，裡面全部是依賴運作的元件；因為locales檔案夾下沒有子檔案夾，這裡選擇是或者否都行
一直next下去，遇到如下圖，可以不填
選擇儲存路徑和exe檔案的圖示和名字 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 下一步到最後，會生成一大堆執行腳本，直接執行的話，可以生成安裝封包件，但是無法啟動，因為直接打包的話，安裝時會将my_nw.exe運作依賴的檔案全部放在和my_nw.exe同層目錄，運作時會找不到locales下的檔案，必須按照同樣的檔案夾結構擺放所有檔案： 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 我們嘗試運作my_nw.exe安裝包 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 安裝後不能正常運作，圖示也不是我們設定的
然後檢視安裝的路徑檔案，所有檔案全部在同一級目錄
使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 這裡我們需要修改以下腳本，安裝後的檔案，按照原檔案夾擺放：
将
Source: "D:\node-webkit\nwjs\locales\*"; DestDir: "{app}";
修改為：
Source: "D:\node-webkit\nwjs\locales\*"; DestDir: "{app}\locales";
另外，需要更改安裝在桌面的上圖示的話，需要将：
Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;
更改為：
Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "D:\node-webkit\project\nb.ico"
修改後，直接點選上方的運作按鈕; Script generated by the Inno Setup Script Wizard. ; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES! #define MyAppName "my_nw" #define MyAppVersion "0.1.0" #define MyAppPublisher "shiwan" #define MyAppURL "https://www.baidu.com/" #define MyAppExeName "my_nw.exe" #define MyAppAssocName MyAppName + " File" #define MyAppAssocExt ".myp" #define MyAppAssocKey StringChange(MyAppAssocName, " ", "") + MyAppAssocExt [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={{2675F544-FF09-4068-B78F-8AA5ED076E19} AppName={#MyAppName} AppVersion={#MyAppVersion} ;AppVerName={#MyAppName} {#MyAppVersion} AppPublisher={#MyAppPublisher} AppPublisherURL={#MyAppURL} AppSupportURL={#MyAppURL} AppUpdatesURL={#MyAppURL} DefaultDirName={autopf}\{#MyAppName} ChangesAssociations=yes DisableProgramGroupPage=yes ; Uncomment the following line to run in non administrative install mode (install for current user only.) ;PrivilegesRequired=lowest OutputDir=C:\Users\shiwan\Desktop OutputBaseFilename=mysetup SetupIconFile=D:\node-webkit\project\nb.ico Compression=lzma SolidCompression=yes WizardStyle=modern [Languages] Name: "english"; MessagesFile: "compiler:Default.isl" [Tasks] Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked [Files] Source: "D:\node-webkit\nwjs\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\credits.html"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\d3dcompiler_47.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\my_nw.nw"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\node.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\notification_helper.exe"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\nw.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\nw.exe"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\resources.pak"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\v8_context_snapshot.bin"; DestDir: "{app}"; Flags: ignoreversion Source: "D:\node-webkit\nwjs\locales\*"; DestDir: "{app}\locales"; Flags: ignoreversion recursesubdirs createallsubdirs ; NOTE: Don't use "Flags: ignoreversion" on any shared system files [Registry] Root: HKA; Subkey: "Software\Classes\{#MyAppAssocExt}\OpenWithProgids"; ValueType: string; ValueName: "{#MyAppAssocKey}"; ValueData: ""; Flags: uninsdeletevalue Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}"; ValueType: string; ValueName: ""; ValueData: "{#MyAppAssocName}"; Flags: uninsdeletekey Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\DefaultIcon"; ValueType: string; ValueName: ""; ValueData: "{app}\{#MyAppExeName},0" Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\shell\open\command"; ValueType: string; ValueName: ""; ValueData: """{app}\{#MyAppExeName}"" ""%1""" Root: HKA; Subkey: "Software\Classes\Applications\{#MyAppExeName}\SupportedTypes"; ValueType: string; ValueName: ".myp"; ValueData: "" [Icons] Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}" Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "D:\node-webkit\project\nb.ico" [Run] Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent再次安裝會生成應用桌面圖示 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 輕按兩下運作會打開百度頁面 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe) 以上就是整個web應用打包成桌面應用的全部流程，歡迎評論和指導，如果還有其它好工具也可以在評論區分享 使用node-webkit和innosetup打包将web程式打包為桌面用戶端(安裝包exe)