当前位置: 首页 > xp系统教程 > XP系统教程 > 详细页面

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

发布时间:2019-06-13 13:05:43 文章来源:xp系统下载 作者: 虾哥测试员

当大家用Axure制作APP原型时,即使高保真效果也只是在视觉层面上实现了原型效果,但页面中的数据内容还都只是预先设定好的,例如:使用中继器、表格等,模拟真实作品。那么有没有一种方法,让我们制作的原型也能获取到真实数据呢?

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

本例通过Java实现实时获取天气功能,意在激发大家兴趣,制作更多基于Axure获取实时信息的案例。废话不多说,上图为敬:

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

<strong>点击查看原型:strong>

这个原型到底有什么独特之处吗?在刚打开的时候,整个页面呈现的数据都是之前设定好的,当点击左上角的『刷新』的时候,页面会通过一个天气查询api获取到当前真实数据,然后加载出来。怎么样,是不是被它吸引到了?

原理

这个实例中主要用到了Axure的以下几个功能:

(1)中继器

展开全文

由于『昨天』、『今天』、『明天』的天气概要布局相同,可以使用中继器更加规范显示。

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

(2)Java

在获取天气api时,通过Ajax的GET方式从天气api服务器中获取实时数据。

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

(3)全局变量

接收并储存获取到的实时数据。

(4)字符串函数

通过indexOf、replace、slice等字符串函数对接收到的数据进行加工,之后存储到中继器中。

以下为整个实例流程图:

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

功能实现 1. 获取api数据

在本例中,我们通过『』api获取到北京天气的实时数据,大家可以看到,数据是以json格式返回的,此接口可以获得当天的天气详情和从昨天到未来15天的天气数据。

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

那么Axure是如何实现调用api的呢?

我们先设定一个全局变量『tianqi』,当点击刷新按钮时,先设置全局变量值为空,再通过『打开链接』功能插入Java脚本,参数选择「链接外部网址」,「打开当前窗口」调用api并赋值给全局变量。

java:

$.ajax({

method: ‘GET’,

url: ‘’,

data: {}

}).done(function(msg){

$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));

});

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

这段Java代码的意思就是调用Java,通过「ajax」对象的「GET」方式,从「」地址获取数据,因为这个api不需要传递参数,所以「data」字段并没有赋值。之后将获取到的数据通过「JSON.stringify」转为字符串后赋值给全局变量「tianqi」。

怎么样?是不是很神奇。

如果你不明白,去百度下ajax的「GET」方法就能略知一二了。通过这一步,我们的全局变量「tianqi」就已经获取到了实时的天气数据。那么之后怎么加工呢?

2. 格式化数据

目前的全局变量值如下图,是没办法直接使用的。那我们如何格式化这些数据呢,这时就需要字符串函数了。

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

如图所示,整个数据中包含了2部分,第一部分是当天的天气情况,第二部分是从昨天开始到之后的十五天天气情况。由于时间关系,xp系统,本次实例中只使用到了「第一部分」和「昨天到明天」的天气情况。

我们首先创建4个文本框,这4个文本框分别保存「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。然后通过『设置文本』功能对文本框赋值,其中「当天天气情况」的赋值函数为:

[[tianqi.substring(tianqi.indexOf(‘shidu’),tianqi.indexOf(‘yesterday’))]]

这句话什么意思呢?就是说截取「tianqi」字符串中从「shidu」字段到「yesterday」字段的字符。

3. 更新天气数据

目前我们获得了4段数据,分别为「当天天气情况」、「昨天天气情况」、「今天天气情况」、「明天天气情况」。这样就简单多了,当我们需要当天的温度是,直接从「当天天气情况」数据中查找对应的「wendu」就可以了。

目前「当天天气情况」数据如下:

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”优”,”wendu“:”16″,”ganmao”:”各类人群可自由活动”,”yesterday

我们很容易看到,「wendu」的数值是「16」。如何截取呢?我们通过以下函数将「16」赋值给页面中的『温度』字段。其中「LVAR1」为「当天天气情况」元件的元件文字。

[[LVAR1.slice(LVAR1.indexOf(‘wendu’)+8,LVAR1.indexOf(‘wendu’)+10)]]

如前所述,页面中的「昨天」、「今天」、「明天」天气情况我们通过中继器储存。更新中继器数据我们通过『更新行』动作实现。

台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP

对应的赋值函数同样通过字符串函数实现,例如「天气类型」函数如下,LVAR1为「昨天天气情况」元件的元件文字:

[[LVAR1.slice(LVAR1.indexOf(‘type’)+7,LVAR1.indexOf(‘type’)+8)]]

至此,大功告成,我们的页面已经加载了实时的天气信息。

后记 这个有用吗?

作为一名产品经理,如果连自己最常用的软件都不喜欢琢磨,何谈自己要开发的产品呢?

以上就是台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP的全部内容,本文作者:虾哥测试员所写的原创文章仅此参考,具体的操作技术和了解多少电脑知识还是要看你本人去操作。本文来源:xp系统下载 转载请注明,谢谢!

本文关键词: 教程 数据 实时 S Axure 天气 api tianqi
文章标题:台式电脑xp系统,Axure高阶教程:利用JavaScript制作实时天气显示APP
相关文章
  • 宁波u盘坏了数据恢复旗舰版电脑安装教程视频教程

    3、在弹出的窗口输入对象名称为:Administrators,点击确定这样就ok了5.打开网页一直刷新-失败-刷新,无限循环搞定办法:工具-internet选项-高级-禁用脚本调试有没有小伙伴在使用搜狗输入法时,切换输入法的时候,怎么切换都切不出来,一直只能打出字母,无法输入文字。估计很多小伙伴都遇到过。那么这种情况该怎么解决呢?下面,小编就来跟大家分享搜狗输入法切换不出来了的处理经验。xp系统下载局域网专用性非常强,具有比较稳定和

  • 不用u盘安装linux数据丢失了

    我们在360安全浏览器截图免费u盘车载mp3歌曲下载扩展的下拉菜单当中,选择点击将网页保存成图片的功能选项,注意选择点击剪刀形状旁边的三角形的下拉菜单按钮首先准备好一张你心仪的壁纸备用(centos安装进u盘2)内存插槽:内存插槽中间有一个防呆口,这个防呆口具有保证内存安装方向正确和保证安装正确类型内存两个作用,所以在安装内存时绝对不可以使用蛮力,现在有很多主板会提供额外的内存插槽,例如双通道主板提供四根内存插槽,一般主板厂商都采用两根彩色,两根黑色的方式来标识。如果只准备安装两根内存,应该插在彩色插槽上

  • u盘恢复数据之后乱码怎么办一键启动大师怎么用

    电脑设置定时开机和定时关机,再也不用等电脑开机了,也不怕忘了关机3、点击“通知和操作”;这样就能清理掉windows的垃圾文件¥6993、如果Windows要求根据夏令时更新时钟,可以允许。时钟仍然是UTC,仅是显示时间会改变;u盘无法格式化这张磁盘有写保护xp电脑系统下载6.在“网上邻居”中只有“整个网络”和你自己或看不到所有人你检查上一条的d、e、f、g,叫同一个网里的人参看上一条的解决方法方法二:在浏览器搜索“内存不能为read修复工具”,选择一款点击下载并安装这个时候,就不能死板地套用以上的方法了

  • 64位系统 2g内存够用吗金山卫士数据恢复

    许多使用ipad的用户都习惯使用搜狗输入法,那么怎么安装设置搜狗输入法呢?下面由学习啦小编为你整理了ipad怎么安装设置搜狗输入法的详细方法,希望对你有帮助!首先打开u盘女卡通创意卡通版appstore在主页上就可以看到搜狗输入法了,如果没有可以点击右上角的搜索接着下载安装需要使用搜狗输入法还需要依次进入【设置】-【通用】-【键盘】再次选择【键盘】点击【添加新键盘】在第三方键盘处,选择【搜狗输入法

  • u盘格式化 恢复数据金士顿32g价格官网

    点击360安全浏览器顶部菜单,可以看到一个剪刀形状的功能扩展的三角形的下拉菜单,在下拉菜单中显示有截屏的快捷按钮,还有隐藏浏览器窗口截屏和将网页保存成图片,还有打开WINDOWS画图板的功能选项新组装的电脑键盘没有反应,也可能是缺少了驱动程序。这种一般是专用的游戏键盘或者机械键盘等。我们可以到键盘商家的官网下载驱动程序,重新安装即可。或者使用驱动管理软件,检测安装驱动即可。以驱动人生举例,双击运行后,点击“外设驱动”即可自动检测或者安装。mac怎么删除win7系统备份我们想打开光盘播放时候,成功放入光盘但

  • window764位系统内存是不是只能发挥恢复数据要多少钱

    深度系统win7纯净版32解决方法:下载小马OEM9win7激活工具,一键永久激活就行了。其实,固态硬盘的垃圾回收机制就已经是一种很好的“磁盘整理”,再多的整理完全没必要可以看到/etc/passwd和/etc/shadow中都多了一行test。但是shadow中test的第二个子段是没有密码的是两个!1、在Win10专业版开始按钮上点右键,选择“计算机管理”。win7系统下载win732位系统如何支持4g内存条相关阅读:主板常用保养技巧1.除尘拔下所有插卡、内存及电源插头,拆除固定主板的螺丝,取下主板,

返回 xp系统下载 首页
60