下面我通过一个简单的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中使用stylus编写css

    安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang=" ...

  2. git大全转

    git原理:https://git-scm.com/book/zh/v2 http://blog.xiayf.cn/2013/09/28/learning-git-internals-by-examp ...

  3. jQuery改变元素class属性

    //去掉class属性 $(this).parent('li').removeClass("prev_selected"); //去掉同兄弟的class属性. $(this).pa ...

  4. 2019-11-29-VisualStudio-使用新项目格式快速打出-Nuget-包

    title author date CreateTime categories VisualStudio 使用新项目格式快速打出 Nuget 包 lindexi 2019-11-29 10:15:25 ...

  5. tomcat+Redis

    Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共同开发而成. Tomca ...

  6. Instr()函数用法

    返回 Variant (Long),指定一字符串在另一字符串中最先出现的位置. 语法 InStr([start, ]string1, string2[, compare]) InStr 函数的语法具有 ...

  7. Codeforces Round #575 (Div. 3) C. Robot Breakout （模拟，实现）

    C. Robot Breakout time limit per test3 seconds memory limit per test256 megabytes inputstandard inpu ...

  8. php扩展安装，指定新的openssl

    1 自己从源码编译一个新的openssl 下载源码下来解压到 /mnt/soft/openssl-1.0.2m (openssl 安装到) ./config -h /usr/bin/perl ./Co ...

  9. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  10. mysql慢查询分析

    mysql慢查询分析 Posted: 29. 08. 2014 | Author: zdz | Category: mysql MySQL 慢查询日志分析 1. pt-query-digest分析慢查 ...