Axure实战21:使用Axure和API接口创建一个QRCode二维码生成器

·  阅读 2403
Axure实战21:使用Axure和API接口创建一个QRCode二维码生成器

在本章中,你将学会使用Axure和API接口创建一个二维码生成器。

项目背景

二维码,用某种特定的几何图形按一定规律在二维平面上排布,通过分布的黑白相间的图形记录数据符号信息。

现今二维码无时无刻在改变着我们的生活,健康状态、公交出行、身份验证……那么小小一个二维码,却蕴含着丰富的信息。

二维码如此地重要,那么本章,我们就来学习Axure和第三方API接口来创建一个二维码生成器。

项目搭建

首先,创建一个新项目,命名为QRCode。

1.png

基础准备

由于我们是调用第三方提供的API接口,这里以草料二维码API为例。

https://cli.im/api/qrcode/code?text=二维码内容
复制代码

当然还有其他第三方的二维码生成的API,例如:

https://api.pwmqr.com/qrcode/create/?url=网站地址
复制代码

我们可以直接使用API接口,结合我们Axure绘制的前端页面,来实现二维码生成器的效果。

页面样式

我们首先给页面填充一个背景颜色#F0F2F5。

拖入一个“文本框”组件,命名为“input”。

设置位置为(40,40),设置尺寸为600*40,设置字号为14,设置线段颜色为#CCCCCC,设置圆角半径为5,左侧边距为10。

在“交互”工具栏中,设置“鼠标悬停的样式”,勾选线段颜色为#1890FF,提示文本为“请输入网址/内容”,隐藏提示为“获得焦点”。

2.png

这就是我们输入内容区域。

拖入一个“主要按钮”组件,命名为“commit”。

设置位置为距离“input”输入框左侧10的位置,设置尺寸为100*40,设置字号为14,设置填充颜色为#1890FF。

3.png

拖入一个“内联框架”组件,命名为“QR”。

设置位置为距离“input”输入框下40的位置,左右都和上面的内容对齐。勾选“隐藏边框”,设置滚动模式为“从不滚动”。

4.png

以上,我们就完成了页面样式的准备。

交互动作

接下来,我们来实现下交互逻辑。

当我们input输入框有内容的时候,点击“生成二维码”按钮,在QR展示区域就会拼装API接口展示二维码。

选中“生成二维码”按钮,在“样式”工具栏中新建交互,选择“点击时”,选择“框架中打开链接”,目标为“QR”内联框架,选择“链接到URL或文件路径”,点击fx打开编辑值弹窗。

在编辑值弹窗中,将API链接写上去,“二维码内容”部分使用局部变量替代,局部变量LVAR1来源于“input”输入框的文本。

5.png

项目预览

完成后,我们在浏览器中预览下效果。

6.png

草料二维码API也提供了一些样式供我们拼装,我们也可以直接使用API分享的样式。具体方法如下:

https://cli.im/api/qrcode/code?text=二维码内容&mhid=sELPDFnok80gPHovKdI
复制代码

后半部分可以使用API提供的样式代码。

7.png

哈哈哈,效果不错!

为了让这个项目能够公开访问,我们可以生成html文件,然后发布到gitHub或者gitee中,这样就可以将网站分享给朋友们了。

项目地址

QRCode二维码生成器:ricardowesley.gitee.io/qrcode

快来动手试试吧!

如果本专栏对你有帮助,不妨点赞、评论、关注~

分类:
开发工具
收藏成功!
已添加到「」, 点击更改