Axure RP设计离线部署

时间：2024-11-20 08:49:30

        Axure RP是一款常用的Web设计软件，可惜的是，RP设计好的原型不能直接局域网访问，导致演示还需要开RP软件，有些不方便，这里我们通过Nginx将设计好的原型发布其静态资源，达到局域网访问的目的。

一、开工准备

准备工具：Nginx

服务注册工具：winsw（可选）

二、安装Nginx

安装Nginx

官网下载Nginx的zip压缩包，官网下载地址：nginx: download

解压安装包到你想要的Nginx安装目录，这里假设路径为E:/Nginx

将Nginx注册为系统服务

将Nginx注册为系统服务，可以方便的开机自启动，也不用天天守着小黑窗，服务启动或关闭不用再记住Nginx命令，会方便很多。

下载winsw工具（这里下载.Net4版本），该工具可以将Nginx安装为Windows服务，下载地址：Index of releases/com/sun/winsw/winsw

下载好 winsw-2.9.0-net4.exe 文件，将其拷贝到E:/Nginx目录下，并改名为nginx-service.exe（改不改都行，就是为了统一名称，好看）

创建并编写一个服务注册的配置文件nginx-service.xml，配置文件内容如下：

<?xml version="1.0" encoding="UTF-8" ?>
<service>
  <!--服务名称-->
  <id>Nginx</id>
  <!--服务显示名称-->
  <name>Nginx Service</name>
  <!--服务描述-->
  <description>Nginx服务></description>
  <!--log输出路径及大小-->
  <logpath>E:\Nginx\logs</logpath>
  <log mode="roll-by-size">
    <sizeThreshold>10240</sizeThreshold>
    <keepFiles>8</keepFiles>
  </log>
  <!--可执行exe文件的路径-->
  <executable>E:\Nginx\nginx.exe</executable>
  <!--可执行exe文件的启动参数-->
  <startarguments>-p E:\Nginx\</startarguments>
  <!--停止可执行exe文件的路径-->
  <stopexecutable>E:\Nginx\nginx.exe</stopexecutable>
  <!--停止可执行exe文件的启动参数-->
  <stoparguments>-p E:\Nginx -s stop</stoparguments>
</service>

注意修改上面的配置路径哦！

执行服务安装命令（注意切换命令执行路径到E:/Nginx下哦）： 

nginx-service.exe install

这样就会注册一个名为nginx的Windows服务。 

如果想卸载服务，可使用命令：SC delete nginx

现在就可以随时使用服务启动和关闭操作来控制Nginx了。

配置Nginx

nginx的配置文件是E:/Nginx/conf/nginx.conf，Nginx有很多强大的配置功能，我们只发布一个静态资源服务，没必要做太多配置，这里我们只修改监听端口为：9527（随个人喜好，避开常用端口）即可。

在Nginx的html文件夹下创建目录design（E:/Nginx/html/design），后面我们将Axure RP的原型设计就可以直接生成到这个目录下访问了。

访问地址： http://127.0.0.1:9527/design/

三、Axure RP生成静态资源

打开RP的“publish —> 生成HTML文件...”,然后选择输出路径为E:/Nginx/html/design，确定输出即可。

 

 

现在就可以在局域网中通过IP+端口访问我们的原型设计了。

啥？有些人说访问不通？

检查一：Nginx服务有没有启动

直接访问：http://ip:9527，nginx的欢迎页有没有出现？

检查二：本机防火墙端口有没有开放

检查系统防火墙配置，有没有开放9527入站访问端口

四、改造Axure RP，优化静态资源

解决讨人厌的引导页

我们通常生成静态资源后，访问静态资源的index.html文件，以为能进入原型首页，结果进入了一个引导页，如下图：

 

是不是很……？

现在我们干掉它

打开Axure RP的安装目录，如：

X:\Program Files\Axure\DefaultSettings\Prototype_Files\resources\scripts\player

找到 axplayer.js文件并打开编辑：

找到并注释掉这一行代码：

window.location = 'resources/chrome/chrome.html'; 

保存后你再重新生成原型的静态资源文件，再打开index.html页面，是不是就没有引导页了？ 

如果不想重新生成，也可以修改已经生成好的资源文件中E:\Nginx\html\design\resources\scripts\player\axplayer.js，注释掉上面这行代码

我们上面的方法是从根源上修改Axure RP的生成模板，也就是从根源上解决这个，而修改已经生成好的资源文件，下次重新生成会覆盖已经修改过的文件哦。

解决讨人厌的菜单全展开问题

有没有发现，我们的RP生成出来的资源，打开后默认所有的导航菜单全部展开，这如果有很多层级，就得手动一个一个关闭，那可是个“苦力活”，这能忍吗？肯定不能，干它！

打开Axure RP的安装目录，如：

X:\Program Files\Axure\DefaultSettings\Prototype_Files\plugins\sitemap

找到 sitemap.js文件并打开编辑：

在 $('.sitemapPlusMinusLink').click(collapse_click);代码下方添加下面代码：

// 自动触发折叠导航栏事件
$('.sitemapPlusMinusLink').each(function(){
    $(this).trigger('click');
})

保存后你再重新生成原型的静态资源文件，再打开index.html页面，是不是左侧导航栏已经折叠了？ 

如果不想重新生成，也可以修改已经生成好的资源文件中E:\Nginx\html\design\plugins\sitemap\sitemap.js，在相应位置添加上面代码也可以

我们上面的方法是从根源上修改Axure RP的生成模板，也就是从根源上解决这个，而修改已经生成好的资源文件，下次重新生成会覆盖已经修改过的文件哦。

以上，就是我们的全部内容，希望对您有所帮助！

 

相关文章