NW.js将Web端打包成客户端安装包

前言

项目交付时需要将Web端后台入口打包成exe安装在客户电脑上，本文记录一下操作流程。

使用csharp为客户端封装壳的时候,打包建议使用.NET Framework 3.5.1 SP1作为构建框架，可以支持Windows7系统，我当时使用了4.8打包的程序无法在Windows7中打开，结果现场在客户机器上操作一番装其他的环境才得以解决。

各系统的支持情况如下：

Windows版本	自带的.NET Framework 版本
Windows 7	.NET Framework 3.5.1 SP1
Windows 7 SP1	.NET Framework 3.5.1 SP1
Windows 8	.NET Framework 3.5.1 SP1 + 4.5

本文不涉及套壳，套壳当时只是为了校验客户机的mac地址。

一、创建app.nw

app.nw就是打包后的web页面,操作流程如下:

1.使用Npm初始化一个含package.json的目录
package.json如下，参数基本一眼就知道什么作用

{
    "name": "大兴社保",
    "main": "index.html",
    "version": "1.0.0",
    "window": {
        "frame": true, 
        "icon": "logo.jpg",
        "width": 1400, 
        "height": 1100,
        "position": "center",
        "resizable": true,
        "show_in_taskbar":true
    }
}

2.创建一个重定向页面

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大兴社保</title>
    <script>
        window.location.href = "https://xxx/login.html";
    </script>
</head>
<body>

</body>
</html>

3.全选当前目录下所有文件压缩成.zip后更名为.nw

二、封入nw.js

我预览使用的是nwjs-sdk-v0.93.0-win-x64开发版本，可以打开开发者工具进行调试
最后分别使用nwjs-v0.45.0-win-ia32和nwjs-v0.45.0-win-x64进行成果打包

1.预览app.nw

直接将上一步骤打包并更名的app.nw使用nwjs-sdk中的nw.exe打开

显示没有问题，就进行打包操作，出现问题可以按F12进行调试。

将app.nw移至nw.exe同目录，输入如下命令进行合并

$ copy /b nw.exe+[fileName].nw [output].exe
eg:
copy /b nw.exe+app.nw dxsb.exe

至此打包完成，在nw.exe所在文件目录下已生成可执行文件。

然后使用Resource Hacker进行修改icon

该可执行文件依赖于目录下的其他文件，若需要单独运行，还得继续封包

三、打成安装包

使用Inno Setup来打包成安装程序，即将一开始的web应用源文件和node-webkit的nw.exe和环境dll直接压缩成一个安装文件，用户在使用你的exe后会出现setup wizard把程序安装到Program Files目录中，将nw.exe，dll，web应用释放出来，这个时候所生成的安装文件其实size会小很多。