AxureRp8成果发布后不能直接预览的解决办法

最新推荐文章于 2024-07-09 17:41:25 发布

夜郎king

最新推荐文章于 2024-07-09 17:41:25 发布

阅读量5.7k

点赞数 74

分类专栏：工作拾遗文章标签： Axure生成报错通用预览方案

本文链接：https://blog.csdn.net/yelangkingwuzuhu/article/details/136125661

版权

工作拾遗专栏收录该内容

59 篇文章 4 订阅

订阅专栏

前言

相信做产品经理和在工作中需要做产品设计的小伙伴一定对Axure这款软件不陌生，使用这款软件进行产品的设计和相关设计的可视化表达。无论是敏捷开发模式或者瀑布流开发模式，都是在正式开发之前对整个产品的未来交互的一种变现形式。相信很多朋友对这款软件的使用都非常熟悉。博主本人虽然不是专业的产品经理，但偶尔也会对一些应用进行简单设计，然后跟客户进行项目演示，根据项目的不同，我们会在设计时，尽量考虑到整个软件的使用场景，力保在最后实现时与设计稿是一致的。同时，在设计时，可以将一些关键信息暴露给客户，让客户也提前参与进来，保证我们的设计与需求是一致的。

前面提过，我们的设计有了阶段成果后，需要跟用户进行反馈沟通，因此有必要将涉及成果发给客户。那么您平时是怎么把阶段成果交给客户的呢？是直接将.rp文件发给用户，然后让客户再安装一个Axure设计软件。当然这种模式并不是不可以，只是对客户要求有点麻烦。他们要安装太多的软件。当然，这种模式也是有好处的，就是用户可以看到实际的设计成果，如果客户自己有动手能力，甚至可以在提交的设计文稿上自行动手修改，只是需要将双方的版本进行及时同步即可。这样对产品也是一种很好的促进作用。通常情况下，客户一般不会选择自己动手设计。他们只是想看到效果而已。我一般是将Axure的设计成果导出成HTML网页，而HTML网页只需要安装浏览器即可，一般的办公电脑或者个人电脑，浏览器几乎是标配，因此不存在另外安装软件的问题，客户可以直接使用默认的浏览器进行打开。使用这种模式可能会遇到下面的问题。

本文即是在这样的场景下产生的，客户只想要看到设计成果。而在其电脑终端上，是没有安装Axure软件的，当您把打包好的设计成果发布成html时，使用默认的浏览器打开时是否遇到以下问题呢？

本文使用的软件是Axure rp 8.0.0.33.3，将设计成果生成Html网页后，使用默认浏览器打开就会出现上述界面。本文将采用两种方式如何解决上述问题，第一种是通过安装扩展插件的方式，第二种是一种通用的解决办法，如果您在日常实践过程中也面临这种问题，那么可以参考本文的相关内容。

一、Axure软件

Axure软件的使用不是本文的主要内容，这里不想长篇累牍的进行介绍，感兴趣的朋友可以在官方网站上进行学习。不过从身边的朋友使用程度来看，这款软件在日常的工作当中，应该有很多的产品经理是会经常使用，是产品经理手里的必备武器。工欲善其事必先利其器，下面把这款软件的版本信息介绍一下，由于博主使用的是8的版本，其它的版本没有测试过，看博客的小伙伴们可以自己测试一下。

1、使用环境

博文使用的Axure软件情况如下：

序号	参数	说明
1	操作系统	Windows 7 家庭专业版
2	Axure版本	Axure rp 8.0
3	Chrome浏览器	Chrome 102

2、使用示例

为了统一展示效果，下面将展示一个设计好的一个管理系统后台设计。但不对详细设计过程进行展开，重点在于讲解如何解决网页展示问题。

系统登录界面如下：

3、html生成

在软件设计界面中，第一步点击发布，第二步点击生成html网页，打开如下界面：

选择要导出的文件位置即完成html页面生成。

二、安装扩展插件

首先分享在浏览器中安装插件，这里演示的浏览器是谷歌浏览器。由于众所周知的原因，Chrome浏览器应用插件需要一定的上网条件，如果您具备在线安装环境可以直接按照生成提示进行安装即可。如果不具备上网条件，以及需要在离线环境下使用，那么可以跟着本文学习。

1、下载插件

在安装展示插件之前，需要下载扩展插件。扩展插件在C站有分享，某度也能查询得到。插件名称是：axure-chrome-extension.zip。可以将插件解压到任意目录下。解压后文件如下：

2、浏览器安装插件

第一步、打开浏览器的扩展程序。

第二步、打开开发者模式

第三步、安装扩展插件

安装完成后可以看到以下界面，这样即完成了Axure的Chrome扩展插件的安装。

3、成果浏览

在完成上述步骤的设置之后，再次打开设计页面，发现可以使用Chrome浏览器正常打开。发现在浏览器中可以正常打开设计成果，不再展示之前的插件提示界面。

4、小节

采用在浏览器中安装插件的办法可以解决针对浏览器的展示需求，但是需要根据不同的浏览器来进行安装，同时需要在用户的浏览器中进行设置，虽然能解决问题，但是对扩展安装还是有一定难度。下面分享一种简便，通用的解决办法。

三、通用解决方案

本节我们讲一种更通用的解决方案，从而无需在客户的电脑上安装相应的扩展插件即可实现设计成果的展示。下面详细讲解这种方案。

1、使用其它浏览器

这里为了演示效果，由于在Chrome浏览器中已经安装了插件，我们使用IE浏览器打开默认的界面，即index.html。

这里有一些浏览器是可以直接打开，如果你依然发现会有打不开的效果，继续往下看。

2、资源重定向

通过在地址栏观察，可以看到在进行请求时，网页地址被重写了。重写后的访问路径是：resources/chrome/chrome.html。由此，我们是否可以进行访问重定向阻止呢。按照这种思路，我们使用文本编辑器打开index.html界面。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Untitled Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link type="text/css" href="resources/css/reset.css" rel="Stylesheet" />
    <link type="text/css" href="resources/css/default.css" rel="Stylesheet" />
    <!--<link href='https://fonts.googleapis.com/css?family=Nunito:300' rel='stylesheet' type='text/css'>-->

    <script type="text/javascript">
        if (location.href.toString().indexOf('file://localhost/') == 0) {
            location.href = location.href.toString().replace('file://localhost/', 'file:///');
        }
    </script>

    <script type="text/javascript" src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="resources/scripts/player/splitter.js"></script>
    <script type="text/javascript" src="resources/scripts/axutils.js"></script>
    <script type="text/javascript" src="resources/scripts/player/axplayer.js"></script>
    <script type="text/javascript" src="resources/scripts/messagecenter.js"></script>
    <script type="text/javascript" src="data/document.js"></script>
    <style type="text/css">

在源代码中我们找到以下代码：

$(window).bind('load', function() {
    if(CHROME_5_LOCAL && !$('body').attr('pluginDetected')) {
            window.location = 'resources/chrome/chrome.html';
     }
});

在上述的代码中，发现了由监测的逻辑和Chrome浏览器的访问逻辑，由此，我们知道了问题的解决办法，最简单的就是将相关监测程序注释掉。因为注释掉代码对于成果访问没有任何影响。

3、阻止重定向

在明确了问题的解决办法之后，我们来对资源重定向进行阻止，代码如下：

 $(window).bind('load', function() {
	//注释掉
    /*if(CHROME_5_LOCAL && !$('body').attr('pluginDetected')) {
         window.location = 'resources/chrome/chrome.html';
    }*/
 });

至此，即可实现通用解决方案，使用任意一款浏览器打开均可直接展示，而无需安装插件。