最近在研究如使用 H5 开发桌面应用,然后就在网上发现了 NW.js 这样一个好东西,然后经过一番折腾之后,就实现了本文标题说的效果:让 Axure 原型变身 .exe 程序,然后就可在任意的 Windows 平台上运行了(当然还支持跨平台,比如 Mac OS 和 Linux)。
准备工作:
1)Axure 原型
2)下载 NW.js(官网:http://nwjs.io/)
3)下载 Enigma Virtual Box(官网:http://enigmaprotector.com/)
Axure 原型变身 .exe 程序三步曲:
1)准备 NW.js 环境
将下载的 nwjs 的压缩包进行解压,解压后的文件夹内会包含一下这些文件
这时候双击运行 nw.exe 应该会打开如下的一个窗口,说明已经 OK 了
2)打包 Axure 原型文件
首先需要在生成的 HTML 文件夹下新建一个 package.json 文件,并且在文件中编辑以下内容
{
“name”: “nw-demo”,
“main”: “index.html”
}
其中 index.html 根据 你生成 HTML 文件的实际文件名来写,另外 package.json 还可进行更多的配置来实现一些特定的效果,可上网自行搜索。
然后将 HTML 文件和 package.json 文件一起打成 ZIP 压缩包,注意打包前的文件应该是这样放:
之后再将 ZIP 压缩包的后缀名 .zip 修改成 .nw,将 .nw 文件放到 nwjs 的目录下,然后拖动 .nw 文件到 nw.exe 上进行执行,正常来讲是打开一个窗口显示你之前做好的原型效果,这一步就 OK 了。
3)打包成 .exe 文件
这个过程涉及到两个步骤:
首先将之前做好的 .nw 文件与 nw.exe 文件打包成一个 .exe 文件,具体的操作是在 CMD 命令行中输入如下命令
copy /b E:\test\nw.exe+E:\test\文件名.nw E:\test\新文件名.exe
其中的文件路径根据实际路径填写,这时候会得到一个新的 .exe 文件(这是打包成的第一个 .exe 文件,我们暂且叫做 1.exe),此 .exe 文件在当前文件夹下是可以正常运行的,但是如果向要拷贝到其它地方去运行,则还需要第二次打包操作,也就是接下来要做的事情。
打开之前下载的 Enigma Virtual Box 程序(enigmavb.exe),界面应该是这样的
然后在 Enter Input File Name 处选择上一步生成的 .exe 文件(1.exe),Enter Output Name 可以默认
之后再点击下面的 Add 按钮,将 nwjs 文件夹(名称不一定是 nwjs ,就是最开始第一步 NW.js 环境的那个文件夹)下除 nw.exe 和 *.nw 以及 1.exe 之外的所有文件加载上,然后点击 Process ,等待执行成功即可,这时候会在相应的路径下生成一个新的 .exe 文件(这是打包成的第二个 .exe 文件,我们暂且叫做 2.exe),此时的 2.exe 文件即可在任意的 Windows 环境下运行了,你可以拷贝给你的小伙伴去 Show 一下。
顺便给大家看一下我制作好的一个 .exe 程序的运行效果
好了,整个过程算是完成了,总结一下就是 Axure 原型生成 HTML 文件后,借助两个工具(NW.js 和 Enigma Virtual Box)打包成 .exe 文件,感兴趣的小伙伴们可以去试一下哈。