封装网页为桌面应用

这次客户提出的请求时没有说明是桌面端的应用，所以当做出一个demo后对于给出的链接，客户表示不理解和不信任，但是考虑到项目已经做了一半以上，所以最后选择了打包应用的方式。

在查阅各种资料和方式后，排除了在wpf以及uwp等应用嵌套WebView的方式，直接采用了node的打包NW.js进行应用打包。

开源社区提供了 NW.js 来轻松的将 Web 应用打包为桌面应用，这样只需要做到兼容 Chrome 就够了。

NW.js 简介

NW.js 由 node-webkit 改名而来。目的是想利用 JavaScript 来进行桌面应用开发。与操作系统交互的部分，利用 Node.js 来完成，而与用户交互的部分，则是使用的网页开发技术。国内比较有名的案例有钉钉的桌面版，有名的 Chrome 插件 Fawave 也还利用 NW.js 推出了桌面应用。
与 NW.js 类似的解决方案，还有 Github 为了开发 Atom 而推出的 Electron.js 。Slack 的桌面版就是基于它开发的。

项目环境需求：

• node.js
• NW.js

在安装完成npm的电脑端使用npm install nw -g安装nw

一个最简单的项目无需任何的本地页面以及代码，使用配置文件就是 Node.js 中常见的 package.json ，最简单的示例如下：

{
  "name": "ApplicationName",//App名称
  "main": "http://www.uneedzf.com/",//项目打开时的主页
  "version": "0.0.1",//版本识别号
  "window": {
    //window的相关配置
    "width": 1920,//项目打开时的宽度和高度
    "height": 1080,
    "frame": true,//是否显示桌面应用的标题栏
    "toolbar": false,//是否显示调试栏和地址栏
    "icon": "assets/icon.png"//图标icon
  },
   //打包时使用的nw-builder
  "devDependencies": {
    "nw-builder": "^3.2.0"
  }
}

在程序目录中执行如下的命令，可以查看效果：
nw .

运行效果

有关打包。

打包可以使用一个 Node.js 模块 nw-builder ，先在程序目录中进行安装：

npm i --save-dev nw-builder

新建打包脚本builder.js

var NwBuilder = require('nw-builder');

var nw = new NwBuilder({
  files: './package.json', // 包含文件
  platforms: ['win64'], // 打包的平台
  version: '0.20.1' // 使用 NW.js 的版本
});

nw.on('log', console.log); // 日志打印函数

// 开始构建
nw.build().then(function(){
  console.log('done!');
}).catch(function(err){
  console.log(err);
});

对于不同的nw版本号可以在http://107.170.237.181/ 找到

运行脚本：node builder.js

这里执行时需要非常注意，需要全局使用vpn才能进行打包操作，否则将会连接失败或者是TimeOut

done

成功打包后，会出现在build文件夹下成功打包的工具，通过inno等工具可以将其打包成setup.exe的安装包。