Axure+api,制作一个股票查询小工具 获赏10金币 案例教程 基础教程

符号 产品大牛 2020-9-9 2032

接上一个教程。在整一个有意思的工具。同事是个股迷,希望我可以帮他做一个能直接输入股票代码就能查到股票基本信息的工具。

最好结果预览:

 

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

使用到的元件:矩形,文本框、内联框架

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

 

拆解如图:

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

步骤三:开始,写页面逻辑。这边会使用到新浪免费提供的ip查询接口。此接口api是使用Get格式传参数进行查询的。所以我们只需把文本框中输入内容传给接口即可。接口地址:https://bi.2u3u.com/tools/index.php?code=sh605006 其中code=变量

点击“查询”按钮,添加点击事件,如下图:

 

进入fx函数编辑窗口:

 

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


上传的附件:
登录后回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (5)
  • fjjinway 普通用户 2021-3-26
    0 引用 6
    感谢大神
  • qzl123 普通用户 2021-3-16
    0 引用 5
    感谢分享
  • 陈同学 普通用户 2020-12-21
    0 引用 4
    感谢大神
  • yanghong 普通用户 2020-11-2
    0 引用 3
    感谢分享,已获得10金币奖励!
  • 沈十三 管理员 2020-9-11
    0 引用 2
    感谢分享,已获得10金币奖励!
返回