Axure秘笈 - 你绝对不知道的技巧

个人把玩 axure 有一段时间了,特此将研究出来的黑暗魔法料理整理如下,注意运用这些技巧是用来制作高保真原型的加分项,懂的自然懂,不懂的请绕道,认真你就输了 💩

往父级框架中注入代码的方法

新建全局变量,变量名随意,变量值加入如下JS代码:

<script> your_code_here </script>

或者是CSS样式

<style> #topPanel{display:none;} /*隐藏顶部工具栏*/</style>

往子页面注入代码的方法

Ctrl+Shift+O(Windows)打开发布设置窗口,点击字体选项卡,添加一个新的网络字体,并切换到 @font-face 模式,加入如下代码:

}</style>
<script data-main="your_js_file_here" src="https://cdn.jsdelivr.net/gh/wavef/axlib@1.3.1/axlib.js" debug>
<style>*{

在子页面的交互中执行代码

  1. 通过打开外部链接的方式,在地址栏输入以下代码(常见做法):

    javascript:{ your_js_code_here }
    
  2. 通过内联框架调用外部网页,在外部网页地址栏中填写代码,代码与方法一相同;


灯箱效果的背景模糊

按照 往子页面注入代码的方法,写入如下代码:

}div[id$='_lightbox']{position: fixed !important; opacity: 1 !important; background-color: rgba(0,0,0,0.5) !important; backdrop-filter:blur(5px);

任意矩形下的背景模糊

  • 为矩形设置一个样式,并把样式名称改为 aero
  • 按照 灯箱效果的背景模糊,把代码修改为:
     }div[id$='_lightbox'], .aero{position: fixed !important; opacity: 1 !important; background-color: rgba(0,0,0,0.5) !important; backdrop-filter:blur(5px);
    

创建可配置的百变母版

通过模板内的含有文字的矩形来接收参数,在模板内根据接收到的参数动态改变元素的样式等,如果不希望母版的“覆盖”功能出现非必要的选项,可以用文本框来替代矩形,但记得要将文本框的“只读”打开。


创建美观的自定义组件

用动态面板的 状态1 来存放表现组件外观的元件,在 状态2 放入代码可以跟踪到的文本框,用于配置参数,即可实现外观和使用上较为人性化的组件,具体可参考此案例:传送门

注:惯常做法是通过中继器来配置参数,但中继器的可视尺寸有限,很多人不会用。


JS获取用户在中继器里配置的参数

function getRepeaterData(repeaterId) {
    var repeater;
    $axure(function (obj) {
        return obj.type == 'repeater';
    }).each(function (obj, id) {
        // let pid = obj.parent.objects[0].scriptIds[0];
        if (id == repeaterId) {
            repeater = obj;
        }
    });
    return repeater.data;
}

JS获取Axure的全局变量

$axure.internal(function ($ax) {
    $ax.public.getGlobalVariable = $ax.getGlobalVariable = function (name) {
        return $ax.globalVariableProvider.getVariableValue(name);
    };
});

本地双击运行axure发布的html文件,无法加载代码的解决方法

如果是通过 $axure.utils.loadJS('your_js_file_url'); 加载的,会出现ajax请求,由于安全限制浏览器是无法用这种方法加载js的,这个时候只能用原生写法来插入外部JS文件,并通过回调判断加载是否完成:

function insertJS(url, callback) {
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', url);
    document.querySelector('head').appendChild(js);
    js.onload = callback;
}

自动生成Axure网页标注给前端

按照 往子页面注入代码的方法,写入如下代码:

}</style>
<script src="https://wavef.gitee.io/axure_measure/axure-measure.js"></script>
<style>*{

注:这个JS被我改过样式,应该会好看些,如果要用原版,可以把链接改为:

https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js

待续...