这次客户提出的请求时没有说明是桌面端的应用,所以当做出一个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
成功打包后,会出现在build文件夹下成功打包的工具,通过inno等工具可以将其打包成setup.exe的安装包。