| 如何让一个html网页变成一个exe可执行程序 | 您所在的位置：网站首页 › 把写好的java程序变成exe › 如何让一个html网页变成一个exe可执行程序 |
如何让一个html网页变成一个exe可执行程序
|
有朋友的朋友找我做个小“页面”，一开始对接需求没说清楚，我就写了个html文档。交付时，才知道对方想要一个桌面应用程序。 于是就想找寻下工具，看有没有办法把已有的html页面转化成一个exe程序。 从参考文章1里发现有三种方法：HTMLRunExe 工具、hta文件、nwjs工具。 我只尝试过其中的 hta 和 nwjs，并且最终采用了nwjs工具。所以此处只比较下这两种方法。 1 转成hta文档hta，是html applilcation的缩写。翻译过来就是html应用程序。 实现方式也很简单。 新建一个文本文档，重命名为hta后缀名，比如 test.hta；然后用文本编辑器在里面编写一个iframe标签，把我们的目标网页地址带入到其src属性中；双击 test.hta即可。 打开hta文件的窗口界面 优点：实现简单。 缺点：不兼容h5、css3，而且JavaScript脚本也很容易出问题。 2 nw.js工具nwjs官网下载 nw.js的github地址 nw.js的使用流程： 测试可用 解压下载包后，双击nw.exe，可以正常启动，则说明可以使用node-webkit。 nw.exe 构建自己的项目. 比如，此处要把index.html页面变成.exe程序。 则需要引入index.html页面和package.json文件。 其中，package.json相当于是配置文件，配置项如下：{ "main": "index.html", //入口 "name": "nw-demo",//字符串必须是小写字母或者数字，可以包含"." 或者"_"或者"-" ，不允许带空格,必须唯一 "description": "demo app of node-webkit",//描述 "version": "0.1.0",//版本 "keywords": [ "demo", "node-webkit" ],//关键字 "window": {//窗体配置 "title": "node-webkit demo", //窗体的标题 "icon": "link.png",//窗体的ico图标 "toolbar": true,//是否要工具栏 "frame": false,//bool值。如果设置为false，程序将无边框显示 也就是没有系统默认的关闭，最小化，全屏按钮 "width": 800,//窗口的大小 "height": 500, //窗口的大小 "position": "mouse", //字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。 "min_width": 400,//最小宽度 "min_height": 200,//最小高度 "max_width": 800,//最大宽度 "max_height": 600,//最大高度 "as_desktop" :false,//是否作为桌面背景窗口显示 "resizable":false,//是否允许调整窗口大小 "always-on-top":true,//窗口是否置顶 "fullscreen":false,//是否全屏显示 "show_in_taskbar":true,//是否显示任务栏图标 "show":false, //如果设置为false，启动时窗口不可见 "kiosk":false //是否使用kiosk模式。如果使用kiosk模式，应用程序将全屏显示，并且阻止用户离开应用 }, "webkit": { "plugin": true,//bool值，是否加载插件，如flash，默认值为false。 "java":false, //bool值 是否加载java applets " page-cache":false //是否启用页面缓存 } }如果你只需要配置其中一两项，当然也可以写简单点，如下： "name": "index-demo", "main": "index.html", //入口文件准备 把上面的 index.html 和 package.json 放置到 nw.js 解压的文件夹里面。 如果你的项目不是单文件index.html，那可以把所有文件放在一个文件夹里，比如 mydemo 。 但package.json 必须和nw.exe同级，这时候就要注意配置项的"main": "./mydemo/index.html"注意：此处和参考文章2不同，文章2是package.json 和index.html在一个文件夹里面。但我按照它的方法，没有办法合成exe。最后测试时package.json和nw.exe同级，不需要合成（指令：copy /b nw.exe+app.nw app.exe），直接打开nw.exe即可。 被动模式启动mydemo （1）指令方式 （2）拖拽方式 把文件夹拖动到nw.exe上即可。  nw.exe
由于package.json已经配置好入口，此处再启动nw.exe时，你会发现，已经直接指向index.html页面了。至此，已经成功了大半部分，但是这个nw.exe只能在当前环境指向，换到其他目录或者其他环境就不行了，因为其他目录就找不到nwjs包内依赖的文件。（→_→除非你就整个文件夹压缩下，随身带着使用。） 使用 Enigma Virtual Box 打成独立的可执行的exe文件 万能的网络，聪慧的人类，总是给人以希望啊！我们有个工具 Enigma Virtual Box 可以做打包的工作。 在官网下载Enigma Virtual Box，然后傻瓜式安装下； （1）导入项目exe文件 （2）选择输出路径 （3）添加default文件夹 （4）添加nwjs文件 （5）点击process，等待生成。  3 小结小缺陷：用newjs工具，可以完美生成一个exe程序，但文件刀削也不小，有200+M，实际上index.html才10KB。  补充：本次实验和参考文章2有所出入，如果文章2的生成流程也是可以了，望大家留言探讨。 参考文章： 让HTML网页变成一个exe执行程序（node-webkit或HTMLRunExe或hta）NW.js构建桌面应用 |
【本文地址】