wordpress CMS主题 微信
Home > HTML5与CSS3.0 > 前端网页如何打包成桌面app应用?

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

高时银博客 HTML5与CSS3.0 点击: 562 次 0 1

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

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

下面一起来看看,如何使用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应用只能在当前的目录下打开有效。移到其它目录,就打不开了。这是怎么回事呢?这个,我们将在下一章中做相应的解说。


文章作者:高时银博客
本文地址:http://wanlimm.com/77201803045537.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

目前还没有评论。赶快来坐沙发吧。

发表评论