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

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,内容如下:

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

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

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

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

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

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

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

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

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

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

首先打开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必须要的

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

执行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打包成exe文件被360误报木马的解决方法
  • 解决node-webkit 不支持html5播放mp4视频的方法
(0)

相关推荐

  • node-webkit打包成exe文件被360误报木马的解决方法

    最近项目需要用到node-webkit.处理古老级用户的兼容以及他们心里的'数据安全'问题. 1.下载完node-webkit 2.制作appName.nw文件 3.copy /b nw.exe+appName.nw  TestAppName.exe 到目前为止,目录下生成了TestAppName.exe文件 ,双击运行很完美. 但,直接将TestAppName.exe换个目录,却打不开. google+百度的解决方案:使用Enigma Virtual Box工具,打包成exe文件.(Enigm

  • 解决node-webkit 不支持html5播放mp4视频的方法

    原因: mp4似乎是有专利的影音格式.node-webkit不对其进行支持-- 似乎是.. 解决方法 : 在本地安装chrome浏览器,进行安装目录(例:c:\Google\Chrome\Application\37.0.2062.103),找到ffmpegsumo.dll文件. 复制(ffmpegsumo.dll)并替换node-webkit目录下的ffmpegsumo.dll. 注:由于chromium 版本众多,所以,下载的chrome浏览器的chromium版本要与node-webkit

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

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的. 下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.htm

  • vue项目打包成桌面快捷方式(electron)的方法

    网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n

  • React+Electron快速创建并打包成桌面应用的实例代码

    目录 一.创建react项目 二.安装Electron 三.配置文件 四.打包Electron桌面应用 一.创建react项目 首先使用creat-react-app脚手架来创建一个react项目 # 安装 create-react-app 命令,如果已将安装请忽略 npm install -g create-react-app # 创建 react项目 create-react-app react-electron # 启动项目( create-react-app 真的超级方便啊) cd re

  • idea打包成war包部署到tomcat及访问路径问题(图文详解)

    idea将web项目打包成war最重要的是配置atrificats. 首先打开file -> project structure 创建之后,output directory即为输出war包的路径.Name可以随意,之后点击绿色+,打开directory content 选择webapp目录,记得勾选include in project build 点击ok后,新建一个配置 选择artificats 这样就算配置完成,点击run执行之后,就到前面的output directory设置的文件夹里找到

  • 详解如何使用Docker部署一个web项目并打包成镜像文件

    docker基本入门以后,可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库,用户仓库和顶层仓库,用户仓库由docker用户创建的,顶层仓库由docker内部的人来管理的.仓库里存放的是镜像文件,那么问题来了 ,怎么去创建镜像呢? how to create image 构建docker镜像的有2种方法: 1.使用docker commit命令. 2.使用docker build 命令和Dockerfile文件.在这里并不推荐使用docke

  • 把Java程序打包成jar文件包并执行的方法

    本文介绍了把Java程序打包成jar文件包并执行的方法,分享给大家,具体如下: 1.首先要确认自己写的程序有没有报错. 2.第一次我写的是Web Project到现在,我一直没有执行成功,所以最好创建的是java Project 打包步骤: 1.在项目上,右键,选择Export. 2.进入到下图界面,选择Java 下面的JAR file 3.选择项目,确认必要的文件是否选中,选择保存jar文件包的路径,如下图 4.完成步骤3之后,点击Next,进入如下图界面: 5.直接点Next,进入下面的界面

  • node.js入门教程迷你书、node.js入门web应用开发完全示例

    本书状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的经验:对JavaScript处于初学阶段,并且完全是一个Node.js的新手. 这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型

  • Android编程实现webview将网页打包成apk的方法

    本文实例讲述了Android编程实现webview将网页打包成apk的方法.分享给大家供大家参考,具体如下: 功能非常简单,而且乍一看没什么特别大的用处,因为实际上就是浏览器而已...但如果说网页一开始就是针对手机开发的呢?是不是可以将android的开发转变为网页的开发了?有待研究,不过据说也可以用这种方法将html5打包哦,先记录一下可能以后也可以赶下潮流. public class MainActivity extends Activity { private WebView webvie

  • Node.js成为Web应用开发最佳选择的原因

    一项颠覆性的技术进入技术市场总会带来一阵震惊,但随之而来往往是被放弃.然而,Node.js 当然不是这样的情况,它是一个开源的.跨平台的基于 Chrome 的 JavaScript 运行时.Node.js 由 Ryan Dahl 于 2009 年开发,该平台现在已成为实时 Web 应用开发的独特选择,通过提供高度交互的用户体验来提高 ROI. 使用 Node.js 的最大优点是开发人员可以在客户端和服务器端编写 JavaScript.值得一提的是,像 PayPal, Yahoo, eBay, N

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

随机推荐