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

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

image.png

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

项目背景

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

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

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

项目搭建


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

image.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,提示文本为“请输入网址/内容”,隐藏提示为“获得焦点”。

image.png

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

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

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

image.png

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

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

image.png

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

交互动作


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

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

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

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

image.png

项目预览

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

image.png

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

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

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

image.png

哈哈哈,效果不错!

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

项目地址


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

快来动手试试吧!



目录
打赏
0
0
0
0
76
分享
相关文章
在线网络PING接口检测服务器连通状态免费API教程
接口盒子提供免费PING检测API,可测试域名或IP的连通性与响应速度,支持指定地域节点,适用于服务器运维和网络监控。
八年电商开发血泪史:淘宝评论API的接口处理
本文分享了一位电商开发者八年对接淘宝评论API的实战经验,涵盖接口签名、限流控制、数据清洗、情感分析及实时监控等实用技巧,并附有完整代码示例。
API 资源详解:从概念到实战的完整指南
本文深入解析了 API 资源的概念、特征与设计原则,涵盖 RESTful 规范、资源分类、层级结构及实际应用示例。内容还包括版本管理、安全策略与性能优化技巧,帮助开发者构建高效、可维护的 API 系统。
7天精通电商API:从接入到运维的完整实战手册
本文全面解析电商API接口技术,从基础概念到高阶应用,涵盖商品、订单、支付与营销等核心模块,并深入探讨性能优化、安全防护与智能化发展方向,助你掌握驱动数字商业的核心技术。
电商API集成入门:从零开始搭建高效接口
在数字化电商时代,API集成成为企业提升效率、实现系统互联的关键。本文从零开始,逐步讲解如何搭建高效、可靠的电商API接口,适合初学者学习。内容涵盖API基础、认证安全、请求处理、性能优化等核心步骤,并提供Python代码示例与数学公式辅助理解。通过实践,读者可掌握构建优质电商API的技巧,提升用户体验与系统性能。
30 0
|
11天前
|
通用图片搜索API:百度源免费接口教程
本文介绍一款基于百度图片搜索的免费API接口,由接口盒子提供。支持关键词搜索,具备详细请求与返回参数说明,并提供PHP及Python调用示例。开发者可快速集成实现图片搜索功能,适用于内容聚合、素材库建设等场景。
详解手机状态查询API实战指南
手机状态查询API是一款高效接口,可实时识别手机号状态(实号、空号、风险号等),帮助企业筛选有效号码,提升业务触达率与客户体验。
62 0
亚马逊SP-API开发实战:商品数据获取与操作
本文介绍了亚马逊SP-API接入流程,包括开发者注册、OAuth2.0认证示例及核心商品接口的使用。涵盖商品信息查询、批量查询、限流规则与错误处理,并提供最佳实践建议,如使用AWS Lambda与SQS实现高效数据同步。
亚马逊SP-API开发实战:商品数据获取与操作
1688平台开放接口实战:如何通过API获取店铺所有商品数据(Python示列)
本文介绍如何通过1688开放平台API接口获取店铺所有商品,涵盖准备工作、接口调用及Python代码实现,适用于商品同步与数据监控场景。
淘宝关键词搜索 API 接口详解与示例
淘宝关键词搜索API(taobao.items.search)助力开发者高效获取商品数据,支持分页、筛选与排序。本文详解接口调用流程、签名机制及Python实现,涵盖权限申请、代码示例与常见问题解决方案,助你快速构建电商应用。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问