下面我通过一个简单的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. SSH自动登录config文件配置

    title: SSH自动登录config文件配置 comments: false date: 2019-08-19 19:29:13 description: 更方便的 ssh 操作??? categ ...

  2. thinkphp5服务器部署遇到的问题

    candir() has been disabled for security reasons 解决办法: 进入到php的配置目录,编辑php.ini cd /usr/local/php/etcvi ...

  3. MySQL数据库数据类型以及INT（M）的含义

    nt(M)我们先来拆分,int是代表整型数据那么中间的M应该是代表多少位了,后来查mysql手册也得知了我的理解是正确的,下面我来举例说明.   MySQL 数据类型中的 integer types ...

  4. GDAL联合OpenCV进行图像处理

    作为一名图像处理方面的工程师,在面对大数据量的遥感影像时,往往会利用到强大的GDAL库,但是GDAL库却没有方面的算法函数进一步进行处理:同时我们看到Opencv库能提供强大的算法支持,却对大数据影像 ...

  5. 017-zabbix_proxy分布式监控部署

    一.proxy分布式监控介绍 来源于zabbix官网: https://www.zabbix.com/documentation/3.4/zh/manual/distributed_monitorin ...

  6. PAT Basic 1086 就不告诉你 (15 分)

    做作业的时候,邻座的小盆友问你:“五乘以七等于多少?”你应该不失礼貌地围笑着告诉他:“五十三.”本题就要求你,对任何一对给定的正整数,倒着输出它们的乘积. 输入格式: 输入在第一行给出两个不超过 10 ...

  7. P1903 奖学金题解

    众所周知,这是一道通过struct结构体进行排序的题目 思路:平常的输入.. 然后定义一个结构体grade,存放每个学生的学号.三科成绩.(也可以只存语文成绩和总分和学号) 自定义cmp函数,通过三层 ...

  8. dubbo 2.8.4（dubbox）的jar包制作【添加到maven本地仓库】

    1. 下载 网址:https://github.com/hongmoshui/dubbox 2.  解压zip文件 3.  用maven编译文件 如果没有配置全局maven,就直接使用cmd命令行[进 ...

  9. mapper映射文件配置之select、resultMap（转载）

    原文地址:http://www.cnblogs.com/dongying/p/4073259.html 先看select的配置吧: <select         <!-- 1. id ( ...

  10. 数据结构和算法（java版本）学习指南

    1 数据结构和算法内容介绍 2 数据结构和算法的概述 3 稀疏数组SparseArray