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

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

项目结构如下：

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>NW</title>

    <link rel="stylesheet" href="../css/NWcss.css">

</head>

<body>

<div id="nw">这是一个测试div</div>

</body>

<script src="../js/NWjs.js"></script>

</html>

css代码：

#nw{

    width: 500px;

    height: 300px;

    border: solid 1px red;

}

js代码：

document.getElementById("nw").onclick=function () {

    alert("别点我！！！")

}

json代码：

{

  "main": "html/index.html", // 启动页面

  "name": "NW",

  "window": {

    "toolbar": false, // 是否显示工具栏（调试使用）

    "frame": true,   // 是否显示NW框架

    "width": 666,//应用页面的宽度

    "height": 450,//应用页面的高度

    "resizable": true  //可调整大小

  }

}

除了上述配置：

还有很多其他有用的属性可以配置具体的配置参数文档可看这里https://github.com/rogerwang/node-webkit/wiki/Manifest-format

项目在谷歌浏览器的运行效果：

该项目下所有的文件一起打包：注意，一定要在项目目录内部执行压缩

打包之后点击进去压缩包效果如下：

将该zip文件剪切到我们NW的安装目录：

将zip文件拖住放在nw.exe上面：

效果如下：

我们将zip文件后缀改为.nw效果也是也一样

打包成exe文件

首先打开windows的cmd,进入到NW的安装目录下，然后输入如下命令：

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

然后就会产生一个exe文件：

双击exe文件就可以运行我们的程序：

注意，此时的app.exe文件只能在该目录下运行，因为它需要依赖NW的环境

 但我们大多数人想的是给用户一个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能做的并不是本文写的那么浅显，例如

  • 解除了浏览器 沙盒 限制，像 葫芦鸭 中用到的跨域，原本单凭前端是无法实现的。
  • 可以使用node.js，除了node.js本身的特性，意味着npm中那么多的扩展可以供你使用。
  • node-webkit还实现了本地化的API，例如菜单栏，系统的托盘图标支持，系统剪贴板等

2、node-webkit运行web应用，node-webkit把web应用打包成桌面应用的更多相关文章

  1. 用node-webkit把web应用打包成桌面应用

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...

  2. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  3. 使用Ant构建struts2 web工程，自动编译，打包成war

    c&c++语言通常使用make脚本来构建和管理自己的工程,同样java也有自己的构建工具(Ant),使用时需要写一个biuld.xml,有点类似c&c++里的makefile. 一.首 ...

  4. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  5. kubernetes:用label让pod在指定的node上运行(kubernetes1.18.3)

    一,为什么要为node指定label? 通常scheduler会把pod调度到所有可用的Node,有的情况下我们希望能把 Pod 部署到指定的 Node, 例如: 有的Node上配备了速度更快的SSD ...

  6. Sublime Text3 配置Node.js运行命令

    ­ 在Sublime Text中可以很容易配置新的编译运行命令,下面的截图是汉化版的中文菜单,英文菜单请直接对照. 首先需要在本地安装Node,默认的Node会加入到系统的环境变量,这样执行Node命 ...

  7. Node.js: What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) based on Node.js / server-side JavaScript? - Quora

    Node.js: What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) ba ...

  8. Node.js 全栈开发（一）——Web 开发技术演化

    这些年一直不断接触学习 Node 技术栈,个人的技术开发学习兴趣也越来越倾向 node 流.也许是由于英语的关系,也许是因为墙增加了学习国外一手资料的难度,加上现在流行的 web 开发技术并不太容易上 ...

  9. sudo 运行 npm或node时，出现找不到命令

    sudo 运行 npm或node时,出现找不到命令的情况,运行下面这些命令, sudo ln -s /usr/local/bin/node /usr/bin/node sudo ln -s /usr/ ...

随机推荐

  1. JVM内存结构思维导图

  2. Ajax跳入error的原因

    1. dataType错误 我遇到的就是这个dataType错误,即后台返回的dataType类型与前台写的不一致,一般前台写json没问题,大部分是后台返回的类型对不上 2. async请求同步异步 ...

  3. C#实现Base64处理加解密

    using System;using System.Text; namespace Common{    /// <summary>    /// 实现Base64加密解密    ///  ...

  4. UI 设计中的渐变

    简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计.从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 -- 独特.现代和清爽.(本文译者@ ...

  5. 条件随机场CRF介绍

    链接:https://mp.weixin.qq.com/s/BEjj5zJG3QmxvQiqs8P4-w softmax CRF主要用于序列标注问题,可以简单理解为是给序列中的每一帧,既然是分类,很自 ...

  6. 由n个已按1,2,3，.....，n编号的人围成一圈，从编号为1的人开始按1,2,3顺序循环报数，凡报到3者出圈，最后留一个人，问其编号是多少

    /************************************************************************* > File Name: only_one. ...

  7. Rsync参数介绍

    Rsync参数介绍   一.Rsync Rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据镜像同步备份的优秀工具.rsync适用于unix/linux/windows等多种操作 ...

  8. Modbus软件开发实战指南 之 开发自己的Modbus Poll工具 - 3

    Modbus-RTU 一.数据分析       两个设备(单片机)通讯,用的是Modbus协议.      在单片机中拿出一部分内存(RAM)进行两个设备通讯,例如: 说明: OX[20]   代表是 ...

  9. api权限管理系统与前后端分离实践

    https://segmentfault.com/a/1190000014368885

  10. JAVA笔记18-容器之二增强的for循环（不重要）

    JDK1.5增强的for循环(foreach??)