用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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
浅谈js的异步执行
Oct 18 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
小程序实现投票进度条
Nov 20 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python3学生名片管理v2.0版
2018/11/29 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python reques接口测试框架实现代码
2020/07/28 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
公司经理任命书
2014/06/05 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android