雪莉果的Axure原型工厂vol.003 Javascript组件应用（一）——二维码生成

微信公众号：雪莉果的Axure原型工厂

0.偶尔，你会遇到普通交互实现不了的内容

我们先看下面一个示例：

这看上去是个很简单的交互：点击按钮，将输入的文本内容转化成二维码显示。不过，当我们翻遍了Axure的所有交互功能，似乎都没有能转化二维码再显示的能力。
这里，我们将引入一个Axure所支持的强大能力，也是所有前端开发的工具——Javascript。

1.交互拆解

和之前一样，为了更好的理解这个原型做了什么，我们将交互进行拆解。

1）在输入框中输入文本内容

2）点击生成二维码按钮

3）在下方矩形中生成二维码内容

4）修改文本内容

5）再次点击生成二维码按钮

6）在下方矩形中生成新的二维码内容

用流程图的形式进行展示，如下图：

接着，我们就按照上述步骤，来制作进度条原型。

2.交互设置步骤

1）首先创建所有需要的元件，并且为各元件命名，方便设置交互时选择。

2）我们搜索一下二维码，可以看到其实它的生成是有一套固定的算法的，但是我们也不需要真的去实现这套算法（有点儿本末倒置了）；实际上，目前有很多js库可供我们使用，直接将文本转化成我们需要的二维码，只需要在网页上调用即可。
那么要怎么调用呢？我们只需要在页面交互中添加一条页面载入时打开链接，选择链接到URL或文件路径，如下图：

然后在链接中输入下面的代码即可：

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js";
document.head.appendChild(script);

你只需要知道，第一行代码表示让Axure执行javascript脚本，之后所有需要js脚本的内容都有这行代码即可，其余内容我们后续会在单开的前端内容中讲解。
3）为“生成二维码”按钮添加交互，点击是打开链接，和上一步相同，选择链接到URL或文件路径，并输入下面的代码：

javascript:
setTimeout(function () {
    debugger;
    var text = $('[data-label="输入框"]').find('input').get(0).value;
    $('[data-label="QRCode"]').get(0).innerHTML = '';
    var id = $('[data-label="QRCode"]').get(0).id;
    new QRCode(id, {
        width: 180,
        height: 180,
        text: text
    });
}, 200);

其中，$('[data-label="输入框"]').find('input').get(0).value为输入框内的文本内容，$('[data-label="QRCode"]').get(0).id为用来显示二维码的矩形元素的id，new QRCode(id, {width: 180,height: 180,text: text})为调用js库在矩形元素中生成输入框文本转化的二维码图像。
4）当然，这个js库不仅仅只是生成普通的二维码，修改其中的参数，可以很简单的修改生成二维码的颜色。

添加了两个参数 colorLight:'#FFFFFF',colorDark:'#00FFBB'，将二维码调整为绿色。
5）最终效果如下图。

3.一些说在最后的话

一个优秀的产品经理，不仅仅是一个产品经理。
预览地址：link

微信公众号：雪莉果的Axure原型工厂