Axure通过第三方免费的api制作ip查询小工具

本教程属于Axure的高级教程，如果你不懂什么叫API接口的可以先百度一下。

最好结果预览：

工具：Axure8、Axure9 .这边我用Axure8做讲解

使用到的元件：矩形，文本框、内联框架

步骤一：制作一个文本输入框。从基础元件中拖入一个矩形到设计区域。在拖入一个文本输入框。放在矩形框上面。在拖入一个矩形做查询按钮。如下图。一个文本输入框由三部分组成：

拆解如图：

步骤二：拖入一个内联框架，主要功能是为了接收呈现api接口返回的数据。把内联框架设置成从不显示滚动条，隐藏边框。如下图：

步骤三：开始，写页面逻辑。这边会使用到126免费提供的ip查询接口。此接口api是使用Get格式传参数进行查询的。所以我们只需把文本框中输入内容传给126即可。接口地址：https://ip.ws.126.net/ipquery?ip=120.32.73.151  其中ip=变量

点击“查询”按钮，添加点击事件，如下图：

进入fx函数编辑窗口：

保存预览。通过这个例子，你可以制作出很多保真的小工具。演示地址：https://pmdaniu.com/storage/121972/e9aaa2b9c4124a85ad243fd342c51a75-12007/start.html