二、node-webkit运行web应用，node-webkit把web应用打包成桌面应用

时间 2019-11-08

标签 node webkit 运行 web 应用打包桌面栏目 HTML 繁體版

原文原文链接

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

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

项目结构以下：前端

html代码：node

<!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代码：git

#nw{
    width: 500px;
    height: 300px;
    border: solid 1px red;
}

js代码：github

document.getElementById("nw").onclick=function () {
    alert("别点我！！！")
}

json代码：web

{
  "main": "html/index.html", // 启动页面
  "name": "NW",
  "window": {
    "toolbar": false, // 是否显示工具栏（调试使用）
    "frame": true,   // 是否显示NW框架
    "width": 666,//应用页面的宽度
    "height": 450,//应用页面的高度
    "resizable": true  //可调整大小
  }
}

除了上述配置：npm

还有不少其余有用的属性能够配置具体的配置参数文档可看这里https://github.com/rogerwang/node-webkit/wiki/Manifest-formatjson

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

该项目下全部的文件一块儿打包：注意，必定要在项目目录内部执行压缩

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

将该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，例如菜单栏，系统的托盘图标支持，系统剪贴板等