下面我通过一个简单的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. vue项目兼容es6语法跟IE浏览器

    要安装babel-polyfill和es6-promise.用来兼容ie和es6: 附赠链接下载:https://babeljs.io/docs/en/6.26.3/babel-polyfill:ht ...

  2. Day03-jS

    javaScript概述 什么是javaScript:javaScript是一种直译式脚本语言.直接解释执行的语言. 什么是脚本语言? . java源代码--->编译成.class文件 ---& ...

  3. python 中if __name__ = '__main__' 的作用

    python 中if __name__ = '__main__' 的作用 前言 首先我们要知道在python里面万物皆对象,模块也是对象,并且所有的模块都有一个内置属性 __name__. 一个模块的 ...

  4. EF部分字段修改 自动忽略为null字段

    传入一个实体 student(){id = 1,name = "测试" age = null,sex = null} 下面 是修改的方法 public async Task Edi ...

  5. 2019-11-29-Roslyn-如何在-Target-引用-xaml-防止文件没有编译

    title author date CreateTime categories Roslyn 如何在 Target 引用 xaml 防止文件没有编译 lindexi 2019-11-29 08:58: ...

  6. Vue Cli 移动端开发

    一.

  7. ThinkCMF5.1虚拟机下安装的问题，已成功

    官方的解决方案:https://www.kancloud.cn/thinkcmf/faq/1197179 按它的提示,发现阿里云的虚拟主机htdoc同级的目录没有上传权限. 只能把“ThinkCMF文 ...

  8. [工具] BurpSuite--快速生成CSRF POC

    我们使用工具分析出存在csrf漏洞时,可以快速生成这个请求的poc,下面我们来看看怎么快速生成 0x00 上图是通过proxy,点击action,选择上图的选项即可生成这个请求的CSRF Poc了 当 ...

  9. http知识总结

    layout: '''http' title: 知识整理' date: 2019-06-09 17:07:20 tags: --- 简介 超文本传输​​协议(HTTP)是用于传输诸如HTML的超媒体文 ...

  10. sed编辑

    data4.txt this is a test of the test scriptthis is the second test of the trial script data6.txt thi ...