使用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)