node-webkit把web应用打包成桌面应用教程

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应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

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

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

node-webkit把web应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

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

node-webkit把web应用打包成桌面应用教程

首先打开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页面中用到了

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

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

node-webkit把web应用打包成桌面应用教程

执行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应用打包成桌面应用教程

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

node-webkit把web应用打包成桌面应用教程

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

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

相关推荐:

Electron构建React、Webpack桌面应用教程

JavaScript开发跨平台的桌面应用具体介绍(图文)

基于XML的桌面应用的图文代码详细介绍

以上就是node-webkit把web应用打包成桌面应用教程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787840.html

(0)
上一篇 2025年3月8日 18:17:26
下一篇 2025年3月6日 19:30:53

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Web使用webpack构建前端项目的实例代码

    当下最为流行的就是webpack和gulp了, 之前一篇我们讲了gulp, 这一篇我们来好好讨论webpack.本文主要和大家介绍web使用webpack构建前端项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看…

    2025年3月8日
    200
  • webuploader文件上传组件的开发实例

    最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,本文主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错的…

    2025年3月8日
    200
  • webpack打包koa2框架app实例详解

    以前在用koa写server的时候,发布简直是噩梦。需要将src里面的全部文件都覆盖掉,config配置文件也要覆盖,稍有不慎就会线上报各种各样的问题,然后就得回退,本地调好在发布。偶然看见一篇文章讲 如何使用webpack打包koa ap…

    编程技术 2025年3月8日
    200
  • webpack、vue、node实现单页面代码分享

    本文主要和大家介绍webpack + vue + node 打造单页面(入门篇) ,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。 1.node下载地址:http://nodejs.cn/download/,安装完成检查node…

    2025年3月8日 编程技术
    200
  • Node 、Git 、Webhook自动化部署实例详解

    本文主要和大家分享node 、git 、webhook自动化部署实例详解,希望能帮助到大家。 准备 首先确定需要完成的内容,明确需求: 1.监听指定 git 提交2.执行指定多个脚本 登录后复制 而且因为我这边是需要分别对client 和s…

    2025年3月8日
    200
  • Webpack服务器端代码打包实例详解

    环境变量 之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的.本文主要和大家介绍Webpack 服务器端代码打包的示例代码,小…

    编程技术 2025年3月8日
    200
  • vue-cli与webpack处理静态资源的方法

    处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢?本文主要和大家介绍了vue-cli与webpack结合如何处理静态资源,小…

    编程技术 2025年3月8日
    200
  • 如何实现web前端页面生成exe可执行文件

    在 html5的崛起、javascript要一统天下之际,有一个名为【跨平台】的技术越来越火。为什么会这么火?因为软件开发者只需一次编写程序,即可在 windows、linux、mac、ios、android 等平台运行,大大降低了程序员的…

    2025年3月8日
    200
  • 几个免费的web前端开发工具

    本文主要和大家介绍十个免费的web前端开发工具详细整理的相关资料,希望通过本文大家能够理解使用免费web开发工具,需要的朋友可以参考下,希望能帮助到大家。 十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 立即学习“前端免费…

    2025年3月8日 编程技术
    200
  • Web技术如何实现移动监测

    本文主要和大家介绍web技术如何实现移动监测,移动侦测,一般也叫运动检测,常用于无人值守监控录像和自动报警。通过摄像头按照不同帧率采集得到的图像会被 cpu 按照一定算法进行计算和比较,当画面有变化时,如有人走过,镜头被移动,计算比较结果得…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论