转载

三步教你 Axure 原型变身 EXE 程序

Axure 原型变身 EXE 程序三步曲，简单快捷的小窍门。

最近在研究如使用 H5 开发桌面应用，然后就在网上发现了 NW.js 这样一个好东西，然后经过一番折腾之后，就实现了本文标题说的效果：让 Axure 原型变身 .exe 程序，然后就可在任意的 Windows 平台上运行了（当然还支持跨平台，比如 Mac OS 和 Linux）。

准备工作

Axure 原型
下载 NW.js（官网：http://nwjs.io/）
下载 Enigma Virtual Box（官网：http://enigmaprotector.com/）

Axure 原型变身 EXE 程序三步曲

1.准备 NW.js 环境

将下载的 nwjs 的压缩包进行解压，解压后的文件夹内会包含以下这些文件：

三步教你 Axure 原型变身 EXE 程序

双击运行 nw.exe 应该会打开如下的一个窗口，说明已经 OK 了；如果不 OK 的话，可以上网搜索关于 NW.js 的相关问题及解决方法。

三步教你 Axure 原型变身 EXE 程序

2.打包 Axure 原型文件

首先需要在生成的 HTML 文件夹下新建一个 package.json 文件，并且在文件中编辑以下内容：

{

“name”: “nw-demo”,

“main”: “index.html”

}

其中“index.html”根据你生成 HTML 文件的实际文件名来写，另外 package.json 还可进行更多的配置来实现一些特定的效果，可上网自行搜索，在这里不做过多的说明。

然后将 HTML 文件和 package.json 文件一起打成 ZIP 压缩包，注意打包前的文件应该是像下面这样的目录结构（包含 Axure 生成的 HTML 文件和 package.json 文件），直接对这些文件进行全选打包，不要对这些文件所在的文件夹进行打包。

三步教你 Axure 原型变身 EXE 程序

之后再将 ZIP 压缩包（为了便于说明，我这里用 test.zip 作为示例）的后缀名 .zip 修改成 .nw，这样就变成了 test.nw，然后再将 test.nw 文件放到 nwjs 的目录下，拖动 test.nw 文件到 nw.exe 上进行执行，正常来讲是打开一个窗口显示你之前做好的原型效果。

三步教你 Axure 原型变身 EXE 程序

3.打包成 .exe 文件

这个过程涉及到两个步骤：

首先将之前做好的 test.nw 文件与 nw.exe 文件打包成一个 .exe 文件（比如命名为 test.exe），具体的操作是在 CMD 命令行中输入如下命令，

copy /b E:/test/nw.exe+E:/test/test.nw E:/test/test.exe

其中的文件路径根据实际路径填写，这时候会得到一个新的 test.exe 文件，此 .exe 文件在当前文件夹下是可以正常运行的，但是如果向要拷贝到其它地方去运行，则还需要第二次打包操作，也就是接下来要做的事情。

打开之前下载的 Enigma Virtual Box 程序（enigmavb.exe），界面应该是这样的：

三步教你 Axure 原型变身 EXE 程序

然后在 Enter Input File Name 处选择上一步生成的 test.exe 文件，Enter Output Name 可以默认；

之后再点击下面的 Add 按钮，将 nwjs 文件夹（名称不一定是 nwjs ，就是最开始第一步 NW.js 环境的那个文件夹）下除 nw.exe 和 test.nw 以及 test.exe 之外的所有文件加载上，然后点击 Process ，等待执行成功即可，这时候会在相应的路径下生成一个新的 .exe 文件（我们暂且叫做 newtest.exe），此时的 newtest.exe 文件即可在任意的 Windows 环境下运行了，你可以拷贝给你的小伙伴去 Show 一下。

顺便给大家看一下我制作好的一个 .exe 程序的运行效果，可以看出来，这完全是一个 Windows 应用程序的窗口，而非浏览器窗口。

三步教你 Axure 原型变身 EXE 程序