用node-webkit把web应用打包成桌面应用(windows环境)


Posted in Javascript onFebruary 01, 2018

node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦。很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的。

下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境)

首先新建一个index.html文件,作为我们这个demo的入口页面,我们暂且就把这个页面当成一个完整的web应用吧。内容随便写点什么,比如:

用node-webkit把web应用打包成桌面应用(windows环境)

然后创建配置文件 package.json,内容如下:

用node-webkit把web应用打包成桌面应用(windows环境)

其中的main属性就是用来指定入口文件的,这个属性的值可以是本地文件,也可以是远程网址,这样就相当于可以把一个远程的web应用直接变为一个桌面应用了。

除了name与main这两个属性外,还有很多其他有用的属性可以配置,比如指定应用的图标,显不显示浏览器的工具栏,指定浏览器的初始大小等等,具体的配置参数文档可看这里https://github.com/rogerwang/node-webkit/wiki/Manifest-format

现在我们有了两个文件了。

用node-webkit把web应用打包成桌面应用(windows环境)

然后将index.html和package.json这两个文件压缩到一个zip压缩包里,命名为app.zip

用node-webkit把web应用打包成桌面应用(windows环境)

现在app.zip这个压缩包里的内容应该是这样的:

用node-webkit把web应用打包成桌面应用(windows环境)

然后把app.zip这个文件的扩展名改为nw,变为 app.nw

用node-webkit把web应用打包成桌面应用(windows环境)

然后下载一个windows版本的node-webkit,解压后得到一个文件夹:

用node-webkit把web应用打包成桌面应用(windows环境)

之后我们之前得到的app.nw这个文件就可以用nw.exe来执行了,直接把app.nw拖到nw.exe上就可以了。运行结果如下:

用node-webkit把web应用打包成桌面应用(windows环境)

跟在chrome中打开index.html这个页面的效果差不多,当然你可以通过配置package.json这个文件,来隐藏浏览器的工具栏或边框,来使它更像是一个桌面软件。

因为nw文件的运行需要node-webkit环境的支持,所以我们还需要把app.nw这个文件跟node-webkit的环境文件一起打包成一个可执行文件。

用node-webkit把web应用打包成桌面应用(windows环境)

首先打开windows的cmd,然后输入如下命令:

copy /b nw.exe+app.nw app.exe

注意文件路径要根据你的实际情况进行变动,这里假设app.nw放在了node-webkit的主文件夹里,然后输出的app.exe也会在这个文件夹里。

执行命令后我们得到了 app.exe 这个可执行文件。

到了这步,我们已经得到了app.exe这个文件,但如果只有app.exe这个文件还是不够的,这个可执行文件的运行还需要几个dll文件的支持。

其中 nw.pak 与 icudt.dll 这个两个文件是必须要的。

ffmpegsumo.dll 文件是媒体支持文件,如果你的html页面中用到了<video>或<audio>或其它与媒体相关的东西,则必须带上这个文件。

libEGL.dll 和 libGLESv2.dll 这个两个文件则是使用webGL或GPU必须要的

最后我们得到的就是这样一个文件夹:

用node-webkit把web应用打包成桌面应用(windows环境)

执行app.exe就可以运行我们的demo了。

但我们大多数人想的是给用户一个exe文件,用户就可以使用了,不用再附带一些其他文件。

嗯,所以我们还可以把app.exe跟其他的文件再打包一次,把上图中的所有文件变成一个可执行文件,用户只要得到这个文件,就能运行我们的应用了。

做这步我们需要一个软件叫Enigma Virtual Box,首先下载和安装这个软件,然后打开它。

然后在Enter Input File Name那里输入我们的app.exe的路径,在Enter Output File Name那里填写我们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的话默认就可以了。

用node-webkit把web应用打包成桌面应用(windows环境)

最后点击右下角的Process按钮,就大功告成了。

用node-webkit把web应用打包成桌面应用(windows环境)

最后我们得到了一个 app_boxed.exe 的文件,只要把这个文件交给用户,用户就可以运行了。

node-webkit虽然方便,但有个很大的缺点是得到的可执行文件有点大,大家在可以在衡量利弊后决定使不使用。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
微信小程序三级联动选择器使用方法
May 19 #Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
使用JS模拟锚点跳转的实例
Feb 01 #Javascript
You might like
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
JS编程小常识很有用
2012/11/26 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
详解python变量与数据类型
2020/08/25 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
社会实践评语
2014/04/28 职场文书
个人授权委托书范本
2014/09/14 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
统招统分证明
2015/06/23 职场文书
Python 阶乘详解
2021/10/05 Python