从参考文章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构建桌面应用

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐