• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 前端网页如何打包成桌面app应用?

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

    作者: 分类:HTML5与CSS3.0 点击: 956 次
    wordpress CMS主题:ssmay主题

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



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.