此文章发布于2个月前,部分信息可能已经过时,请自行斟酌确认

了标题,相信你很迷茫。

作为一个Web前端爱好者(实际上是高级语言学不会),我相信你对这个标题充满了非议:

A:html怎么可能写程序?

B:就是啊,逗我玩呢?

C:绝对不可能啊,HTML怎么可能写Win32?

这大概是你们看了标题之后的想法吧。

首先,所需工具:NW.JS(简称NW,SDK和发布版均可),Enigma Virtual Box(简称EVB) 以及 Res Hacker(简称RH),以及你的HTML源码(这恐怕是个人都知道)

下载后的NW结构应该是这样的:
NW.JS教程(1).png
或者这样:
NW.JS教程(2).png
画叉的是我自己添加的,不用管。

然后,新建一个文件夹命名为app,把你准备的源码拖进去。

重点来啦!!!!!

在app文件夹内新建一个package.json,内容为:

{
​
 "main": "index.html",
​
 "name": "WeixinMenuEditor",
​
 "description": "使用nw.js封装的一个微信公众号菜单编辑器App",
​
 "version": "0.0.1",
​
 "keywords": [ "微信", "菜单编辑器" ],
​
 "window": {
​
 "title": "微信菜单编辑器",
​
 "icon": "app/static/img/weixin_logo.jpg",
​
 "toolbar": true,
​
 "frame": true,
​
 "width": 1008,
​
 "height": 750,
​
 "position": "center",
​
 "min_width": 400,
​
 "min_height": 200
​
 },
​
 "webkit": {
​
 "plugin": true,
​
 "java": false,
​
 "page-cache": false
​
 },
​
 "chromium-args" :"-allow-file-access-from-files"
​
}

其他的都不用写了。只写第二个这种就行。

当然,我还是得解释一下各配置项的用处。

title : 字符串,设置默认 title。

width/height : 主窗口的大小。

toolbar : bool 值。是否显示导航栏。

icon : 窗口的 icon。

position :字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。

min_width/min_height : 窗口的最小值。

max_width/max_height : 窗口显示的最大值。

resizable : bool 值。是否允许调整窗口大小。

always-on-top : bool 值。窗口置顶。

fullscreen : bool 值。是否全屏显示。

show_in_taskbar : 是否在任务栏显示图标。

frame : bool 值。如果设置为 false,程序将无边框显示。

"chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样,这行代码允许angularjs直接访问本地json文件。

但是,经我测试,title在运行时,会自动替换为HTML内规定的title,相当于没用;icon并不会更改生成的文件图标,只会影响任务栏的显示,相当于没用;description生成时并不会影响exe的描述,相当于没用。

所以呢,只写一个main和name就可以了(NW要求必须要写这俩)。

不过,不能不写,必须要写一个package.json。

然后,配置完毕,把app文件夹拖到nw.exe上,就像这样:
NW.JS教程(3).png
然后,就会出现窗口啦!

一旦成功,我们就开始生成文件啦!

先将你的app文件夹压缩为zip,再将扩展名更改为nw,弹出的窗口选择是。

建议使用7-zip或bandizip,WinRAR压缩的zip会导致nw无法识别。

然后,键盘按住Shift键,右击NW所在的文件夹空白区域,选择在此处打开命令窗口(W),打开命令窗口。

有的Win10系统只有在此处打开PowerShell,那就只好打开cmd一点一点cd了。PowerShell会出现错误。

假如我的NW目录是D:NW.JS,那么我要在Cmd内运行:

cd /D D:\NW.JS

其中,/D参数必须保留,D:NW.JS可替换为你的NW目录。

到了你的NW目录之后,Cmd运行:

copy /b nw.exe+you_nw_name.nw you_app_name.exe

(这个是为了让copy有高亮才选择语言为Powershell,但一定要在cmd内运行)

其中,copy nw.exe /b 不可更改,you_nw_name.nw替换为你的nw文件名,但切记扩展名为nw,you_nw_name.exe替换为你要生成的文件名,但切记扩展名为exe。

然后,你的exe就算好了。但是,你右键选择属性-详细信息看看。

????

这是什么?

我写的程序版权却是NWJS?

文件说明是nwjs???

于是,我们需要改掉他。

拿出我们的RH,点击 文件-打开,找到我们生成的文件。

找到版本信息,在最后到了这个:
NW.JS教程(4).png
这里解释一下这些项的作用:

CompanyName: 公司名称,即作者名称

FileDescription:文件介绍

FileVersion:版本

InternalName:这个应该是文件名

LegalCopyright:版权信息

OriginalFilename:原始文件名

ProductName:程序名

ProductVersion:程序版本

CompanyShortName:公司简称

ProductShortName:程序简称

LastChange:这个还没琢磨透

根据这个意思改就行.。

然后,点击编译脚本,再点另存为,选一个路径保存,但切记必须要带着扩展名,假如你要输出的文件名为2.exe,要全输上。有次我没输,只写了个2,结果真给我输出了个2。

你也许长舒一口大气,想去跟人炫耀?

别啊,把你的这个exe复制到别的地方看看?

嗯?怎么运行不了?

这是因为它的运行依靠那些dll。

这时,就要打开我们的EVB啦。

待封装的主程序选择你的exe,另存为选择一个目录保存,但切记必须要带着扩展名,假如你要输出的文件名为2.exe,要全输上。有次我没输,只写了个2,结果真给我输出了个2。

再把NW文件夹的所有文件,除了nw.exe和你的工程文件夹和你的nw文件,全选中,拖到EVB的文件一栏中,点击执行封包,等待封包完毕即可。

这时,你终于能拿出去了。

但是,一看大小:

120多m!

这咋整?

还能咋整?

没办法啊。

一个nw.dll就142mb,你咋弄?

只能去加壳,压缩了。

没办法,怪不得用nw的人少呢。

可github开发的另一个HTML变EXE项目,虽然用的人多,例如VS Code,Atom,XMind,洛雪音乐……都是用github开发的那个项目开发的。

可学那个还得学node,太难了啊。

那没办法,简单的代价就是文件太大了……