前端网页如何打包成桌面app应用？

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

随着HTML5的越来越流行，网页打包成桌面应用的打包神器就越来越多：html-compiler、virtual-box、Electron、node-webkit等。这些工具都可以很轻松地把我们的前端网页打包成桌面。本章主要说一下功能等别强大的node-webkit，也可以叫nwjs，它是基于node.js和谷歌浏览器内核的打包神器。

下面一起来看看，如何使用Node-webkit 吧？

一：所需工具：

1：node.js

2：node webkit：【把html页面打包成exe文件，只能在本目录下可以运行】

3：Enigma Virtual Box工具：【把node webkit 打包成exe文件，让它在其它任何目录下都可运行】

4：也可用window系统的zip压缩来打包。【如何把自己的程序制作成安装包】链接：

https://jingyan.baidu.com/article/f0e83a2581b0c922e59101e2.html

二：使用node webkit打包html页面：

1：在node webkit所在目录下创建一个项目文件夹：app

2：把html5开发的项目文件复制到这个app文件夹下。

3：在app文件夹下，创建一个package.json文件，并添加如下json代码：

{

"name": "window-demo",

"main": "index.html",

"nodejs":true,

"width":100,

"height":200,

"window": {

"title": "windowdemo",

"toolbar": true,

"width": 800,

"height": 600,

"resizable":true,

"show_in_taskbar":true,

"frame":true,

"kiosk":false

},

"webkit":{

"plugin":true

}

}

其中，name 和main是必须配置的。

4：在app文件夹下，压缩整个app文件夹。压缩成zip格式。把这个zip文件移动到node webkit根目录。

5：打开DOS ，进入node webkit根目录，输入以下命令：

copy /b nw.exe+app2.zip haha.exe

这时，我们可以在node webkit目录下看到一个haha.exe，

如果打开这个haha.exe文件正常显示，就说明打包成功。

这样，我们就使用node-webkit把前面html网页打包成了window桌面应用。当然，这个haha.exe应用只能在当前的目录下打开有效。移到其它目录，就打不开了。这是怎么回事呢？这个，我们将在下一章中做相应的解说。