• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > 三步教你 Axure 原型变身 EXE 程序

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

作者: @大鹏 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure原型图软件,axure常用原型模板,axure app原型素材,axure手机app原型,axure手机原型尺寸等相关知识, @大鹏 希望在学习及工作中可以帮助到您

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

Axure

最近在研究如使用 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 文件,至于这种做法的实际意义是什么,暂且不进行讨论,感兴趣的小伙伴们可以去玩一下。

您可能想查找下面的文章:

  • Axure教程:原型设计之侧滑菜单
  • Axure教程:验证码原型制作实例
  • 三步教你 Axure 原型变身 EXE 程序
  • Axure 美女浏览原型,内含:多层动态面板嵌套,拖动时函数设定边界
  • axure实现坦克游戏原型

相关文章

  • 2017-06-14banner轮播axure最简易实现及手动切换
  • 2017-06-13Axure教程:微信聊天列表原型制作(二)
  • 2017-06-14Axure8.0小案例:电动机原型
  • 2017-06-13Axure教程:用中继器和日期函数实现万年历
  • 2017-06-14Axure 制作下拉框省市县三级联动
  • 2017-06-13Axure中继器姊妹篇:列表页添加排序和筛选功能
  • 2017-06-13Axure教程:如何画出曲线图?
  • 2017-06-14Axure教程|购物车商品增减删除练习
  • 2017-06-13Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
  • 2017-06-13Axure教程:限制输入框输入字数

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:多账户的登录验证
    • Axure实例:顶栏和侧边栏的固定和窗口自适应
    • 建立自己的元件库(二)——验证码
    • Axure教程 | Axure8旋转功能应用——幸运大转盘
    • Axure教程:实现倒计时获取验证码效果
    • Axure实例:创建浏览器顶部固定菜单及子菜单
    • 用Axure 实现“打飞机”,骚年,来一发(下)
    • Axure实现多级联动下拉框
    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
    • Axure 8.0 实例 | 模拟一个上传图片的原型

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有