看了标题,相信你很迷茫。
作为一个Web前端爱好者(实际上是高级语言学不会),我相信你对这个标题充满了非议:
A:html怎么可能写程序?
B:就是啊,逗我玩呢?
C:绝对不可能啊,HTML怎么可能写Win32?
这大概是你们看了标题之后的想法吧。
不管了,管他什么想法,我就是告诉你们,HTML能写程序(不过需要框架)
首先,所需工具:NW.JS(简称NW,SDK和发布版均可),Enigma Virtual Box(简称EVB) 以及 Res Hacker(简称RH),以及你的HTML源码(这恐怕是个人都知道)
下载后的NW结构应该是这样的:
s
或者这样:
画叉的是我自己添加的,不用管。
然后,新建一个文件夹命名为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"
}
当然,如果你这只是一个普通的程序,建议你这么写:
{
"main": "index.html"
}
其他的都不用写了。只写第二个这种就行。
当然,我还是得解释一下各配置项的用处。
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就可以了。
不过,不能不写,必须要写一个package.json。
然后,配置完毕,把app文件夹拖到nw.exe上,就像这样:
然后,就会出现窗口啦!
一旦成功,我们就开始生成文件啦!
先将你的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文件名,但切记扩展名为exe,you_nw_name.exe
替换为你要生成的文件名,但切记扩展名为exe。
然后,你的exe就算好了。但是,你右键选择属性-详细信息看看。
????
这是什么?
我写的程序版权却是NWJS?
文件说明是nwjs???
于是,我们需要改掉他。
拿出我们的RH,点击 文件-打开,找到我们生成的文件。
找到版本信息,在最后到了这个:
这里解释一下这些项的作用:
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,太难了啊。
那没办法,简单的代价就是文件太大了……
- 本文链接:https://blog.adkimsm.asia/post/bffd8e5767fb/
- 版权声明:本博客所有文章除特别声明外,均默认采用 许可协议。