自己参加的web项目,最后发现被公司封装成了桌面应用,所以一直好奇是怎么加壳的,在网上找资料后终于发现了一些方法,我找到了三种方法可实现:JWebBrowser(基于IE内核,使用时会发现很多html5不支持);JXBrowser(基于chrome内核,支持html5,但收费),node-webkit(基于chrome内核,唯一缺点是打包后exe程序过大),我用的是node-webkit,以下是自己抄袭并整理的一些内容:

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

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

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

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

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

然后将index.html和package.json,任务栏图标图片(png格式)这三个文件压缩到一个zip压缩包里,命名为app.zip

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

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

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

之后我们之前得到的app.nw这个文件就可以用nw.exe来执行了,直接把app.nw拖到nw.exe(没启动前)上就可以了

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

首先打开windows的cmd(可shift+鼠标右键,选择在此处打开命令窗口),然后输入如下命令:

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必须要的

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

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

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

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

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

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

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

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

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

修改node-webkit的默认图标

(注意:在用enigmavb.exe加壳前替换图标,否则会出现”不是有效的32位系统”)

使用node-webkit开发应用程序的时候,最终生成的exe文件,使用的默认的图标,无法在代码中修改。这次就说说这图标的事,要用到两款软件(当然你可以用别的,我只提供一下我的方案):Resource Hacker 和 Axialis IconWorkshop。

制作图标

第一步要做的是制作ico图标,在windows系统中,可以设置“大图标”,‘中等图标’和“小图标”等不同尺寸,所以,一个ico文件实际上包含多个不同尺寸的图标

使用Axialis IconWorkshop打开你的图片,点击左上角的图标,然后就可以选择你要生成的尺寸了:

我做的时候选择了RGBA的各种尺寸图标,然后点击确定,就生成ico文件了。

替换exe文件的图标

下一步就是替换图标,使用Resource Hacker打开exe文件:

可以看到node-webkit的默认图标只有一个48 x 48的。右键点击1033,选择替换资源,替换为刚才制作的ico文件:

ok,打完收工。另外发现貌似windows本身会缓存图标,就是说替换完后,在当前文件夹切换大图标之类的,还是看不到效果,并且windows 7 左下角的信息也没变:

把exe复制到别的目录就能看到效果

----------------------------------------------------------------

抄袭路径:https://www.cnblogs.com/2050/p/3543011.html

https://blog.csdn.net/w20101114/article/details/47129163

转载于:https://www.cnblogs.com/zsty/p/9817172.html

用node-webkit把web应用打包成桌面应用相关推荐

  1. 【Electron】使用Electron将web项目打包成桌面应用程序

    目录 一.所需环境&打包前准备 1.安装node.js 2.安装electron 3.web项目 二.打包过程 1.打包配置 2. 安装打包器 3.执行打包命令: Electron是由GitH ...

  2. 如何把web项目打包成桌面应用程序

    1. 下载并安装Node.js,下载连接https://nodejs.org/en/ 2.检查是否安装成功 输入 "node -v" ,回车,显示Node版本:再输入 " ...

  3. Java web系统打包成exe安装文件

    Java web系统打包成exe安装文件 一.    工具准备 1.        NSIS打包工具: http://nsis.sourceforge.net下载并安装: 2.        NSIS ...

  4. idea将web项目打包成war包并部署到服务器上运行

    idea将web项目打包成war包并部署到服务器上运行 以下是工作案例总结: 1.首先idea配置服务器:tomcat服务器或者jetty服务器均可 2.idea配置环境设置:点击如下图标 接下来如下 ...

  5. 转:教大家如何用HBuilder将web项目打包成apk

    链接:https://www.jianshu.com/p/d86bf569295d 将我们的web项目打包成一个apk文件并不难,首先准备好软件HBuilder还有你的项目,注意这里只献给那些不是真正 ...

  6. Linux中把文件夹打成war包,将Web应用打包成WAR文件

    将Web应用打包成WAR文件的方法 (1)在命令行中运用Jar命令 假定有一个Web应用:C:\myHome myHome/WEB-INF/-- myHome/files/-- myHome/imag ...

  7. web项目打包成Native App

    web项目打包成Native App 好长时间没有写过博客了,闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成 ...

  8. 将网站打包成桌面程序并生成安装包(跨平台)

    一.Nativefier将网站打包成桌面程序 介绍 Nativefier 是一个命令行工具,仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序,应用程序通过 Electron打包成系统可执行文件 ...

  9. php 开发桌面应用,使用NW将开发的网站打包成桌面应用

    # 使用NW将我们开发的网站打包成桌面应用 >[info] NW.js 是Node.js 开发的桌面应用打包工具 > 你可以使用node语言开发桌面应用 我这里只是介绍如何将网站包一个本地 ...

最新文章

  1. Java对象XML序列化框架-Simple2.0
  2. 思考灰鸽子之后,新***的运营模式
  3. 【转】C# using的三种使用方法
  4. “全息数字人”——健康医疗 大数据应用的新模式
  5. 前端核心技术必备知识库精华资源强力推荐
  6. HashMap使用HashMap(int initialCapacity)初始化
  7. 2019 牛客多校第三场 H Magic Line
  8. 如何在不确定经济形势下把握好企业脉搏
  9. 全屏显示一个图片文件
  10. jstack简单使用,定位死循环、线程阻塞、死锁等问题
  11. 更改boot.ini自动进入DSRM模式
  12. Win11 WSA 安卓子系统 下载安装更新
  13. 从键盘上输入10个数,求其平均值。
  14. 46相关度评分TFIDF算法
  15. Openwrt 下 L2TP搭建
  16. RL 笔记(3)PPO(Proximal Policy Optimization)近端策略优化
  17. js数组操作大全(pop,push,unshift,splice,shift方法)
  18. 谈谈一只菜鸟转行Erlang游戏服务端的经历(希望大佬指导,也希望我的经历能给一些还未毕业的同学或者正在迷茫自己工作内容的同学一些感触)
  19. TP框架自带Http类实现下载文件(单一文件)
  20. 在人一生的成长过程中,什么才是最重要的因素?

热门文章

  1. 收藏 | 程序员生涯指南,在GitHub上获3.6万星
  2. 前沿 | 阿里达摩院最牛科技~摄像头ISP处理器,提升夜间识别精准率
  3. Github | 深度神经网络(DNN)与生成式对抗网络(GAN)模型总览
  4. 基于PCL实现欧式聚类提取
  5. 从零开始编写深度学习库(五)PoolingLayer 网络层CPU编写
  6. 地理学中常见图的名称(或者分析)
  7. Arcgis用字段计算器计算只出一部分值另外一部分为null
  8. 九连环_儿子的玩具—九连环
  9. java获取页面点击次数_java计算鼠标点击次数的题,急求!
  10. java项目_好程序员Java分享从入门到服务端项目开发的过程