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

16 评论 33019 浏览 102 收藏 6 分钟

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

最近在研究如使用 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 的压缩包进行解压,解压后的文件夹内会包含以下这些文件:

a8ff320

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

2e12c28

2.打包 Axure 原型文件

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

{

“name”: “nw-demo”,

“main”: “index.html”

}

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

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

ddc4153

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

f894c02

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),界面应该是这样的:

e8941ae

然后在 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 应用程序的窗口,而非浏览器窗口。

6923ce8

好了,整个过程算是完成了,总结一下就是 Axure 原型生成 HTML 文件后,借助两个工具(NW.js 和 Enigma Virtual Box)将其打包成 .exe 文件,至于这种做法的实际意义是什么,暂且不进行讨论,感兴趣的小伙伴们可以去玩一下。

 

作者:大鹏,微信:urmagic,可一起交流原型设计等问题,欢迎骚扰。

本文由 @大鹏 原创发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 这个有操作视频吗

    来自重庆 回复
  2. 因为没有搞出来,所以有点心塞的

    来自贵州 回复
  3. “然后再将 test.nw 文件目录下,”拖动 test.nw 文件到 nw.exe 上进行执行”,正常来讲是打开一个窗口显示你之前做好的原型效果。

    我想问执行后的结果是什么呢?

    来自贵州 回复
  4. 我用nwjs窗口打开压缩好的nw文件,显示无法加载以下来源的扩展程序是什么问题呢?

    来自北京 回复
  5. 按步骤所产生的最终版EXE文件,我拿到别的地方使用时,必须要在那个地方放个locales文件夹,里面默认把nwjs中的locales中的zh文件放进去,才可以打开;否则打开会出错“unable to find locale data files…”有木有解决这个的?

    回复
    1. 哈哈,这个是我操作问题,解决了

      回复
    2. 我也遇到了同样的问题,请问怎么解决的?

      来自上海 回复
  6. 厉害,试过了

    回复
  7. 搞出来了,不过被360拦截,报有病毒

    来自上海 回复
    1. 大佬咋搞的呀

      来自重庆 回复
  8. 受教了

    来自贵州 回复
  9. 补充一下:Axure原型生成的HTML,其中的文件夹或文件名称不能带有中文字符,否则会报错

    来自北京 回复
    1. 清单文件缺失或不可读是怎么回事?原型文件里没有中文字符 求解

      回复
    2. 还是中文字符的原因,仔细检查HTML的每个文件夹和文件,任何一个中文字符都不行

      来自北京 回复
    3. 大神想问一下打包的时候页面的命名不能中文,毕竟打包会出现中文,那里里面的内容可以中文吗

      来自重庆 回复
  10. 666~

    来自广东 回复