全栈工程师?
嗯.....目前并不是!

Axure高階教程:利用JavaScript製作實時天氣顯示APP

當大家用Axure製作APP原型時,即使高保真效果也只是在視覺層面上實現了原型效果,但頁面中的數據內容還都只是預先設定好的,例如:使用中繼器、表格等,模擬真實作品。那麼有沒有一種方法,讓我們製作的原型也能獲取到真實數據呢?

本例通過JavaScript實現實時獲取天氣功能,意在激發大家興趣,製作更多基於Axure獲取實時信息的案例。廢話不多說,上圖為敬:

點擊查看原型:

這個原型到底有什麼獨特之處嗎?在剛打開的時候,整個頁面呈現的數據都是之前設定好的,當點擊左上角的『刷新』的時候,頁面會通過一個天氣查詢api獲取到當前真實數據,然後加載出來。怎麼樣,是不是被它吸引到了?

原理

這個實例中主要用到了Axure的以下幾個功能:

(1)中繼器

由於『昨天』、『今天』、『明天』的天氣概要布局相同,可以使用中繼器更加規範顯示。

(2)JavaScript

在獲取天氣api時,通過Ajax的GET方式從天氣api服務器中獲取實時數據。

(3)全局變量

接收並儲存獲取到的實時數據。

(4)字符串函數

通過indexOf()、replace()、slice()等字符串函數對接收到的數據進行加工,之後存儲到中繼器中。

以下為整個實例流程圖:

功能實現

1. 獲取api數據

在本例中,我們通過『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實時數據,大家可以看到,數據是以json格式返回的,此接口可以獲得當天的天氣詳情和從昨天到未來15天的天氣數據。

那麼Axure是如何實現調用api的呢?

我們先設定一個全局變量『tianqi』,當點擊刷新按鈕時,先設置全局變量值為空,再通過『打開鏈接』功能插入Javascript腳本,參數選擇「鏈接外部網址」,「打開當前窗口」調用api並賦值給全局變量。

javascript:
$.ajax({
method: ‘GET’,
url: ‘http://t.weather.sojson.com/api/weather/city/101010100’,
data: {}
}).done(function(msg){
$axure.setGlobalVariable(‘tianqi’, JSON.stringify(msg));
});

這段JavaScript代碼的意思就是調用JavaScript,通過「ajax」對象的「GET」方式,從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數據,因為這個api不需要傳遞參數,所以「data」字段並沒有賦值。之後將獲取到的數據通過「JSON.stringify」轉為字符串后賦值給全局變量「tianqi」。

怎麼樣?是不是很神奇。

如果你不明白,去百度下ajax的「GET」方法就能略知一二了。通過這一步,我們的全局變量「tianqi」就已經獲取到了實時的天氣數據。那麼之後怎麼加工呢?

2. 格式化數據

目前的全局變量值如下圖,是沒辦法直接使用的。那我們如何格式化這些數據呢,這時就需要字符串函數了。

如圖所示,整個數據中包含了2部分,第一部分是當天的天氣情況,第二部分是從昨天開始到之後的十五天天氣情況。由於時間關係,本次實例中只使用到了「第一部分」和「昨天到明天」的天氣情況。

我們首先創建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)]]

4. 更新中繼器數據

如前所述,頁面中的「昨天」、「今天」、「明天」天氣情況我們通過中繼器儲存。更新中繼器數據我們通過『更新行』動作實現。

對應的賦值函數同樣通過字符串函數實現,例如「天氣類型」函數如下,LVAR1為「昨天天氣情況」元件的元件文字:

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

至此,大功告成,我們的頁面已經加載了實時的天氣信息。

後記

這個有用嗎?

作為一名產品經理,如果連自己最常用的軟件都不喜歡琢磨,何談自己要開發的產品呢?

通過這種獲取api的方式,我們可以製作更多實時、真實的案例,在網上有無數的api,例如大小寫轉換、MD5加密、歸屬地查詢、車輛限行,如果我們做的案例中能得當的使用這些功能,不是更好嗎?更進一步,如果懂得開發,我們完全可以為了原型演示開發一個特定的api,實現相應功能。

一些問題

  • JavaScript接口http限制:目前測試后已知的限制是,如果接口不是https協議,原型在axshare上無法獲取數據,原因是axshare禁止調用http接口。
  • JavaScript接口跨域問題:在網上測試了一些接口,發現使用ajax方法調用時會產生跨域問題,導致無法接收到數據,具體解決方法沒有找到,如果有方法歡迎留言。
  • 接口不穩定解決辦法:目前通過循環調用直到接口返回正常數據時結束。
  • 獲取到的數據是object:記得使用『JSON.stringify』轉換接收到的數據,因為數據可能是json類型,要轉換為字符串才能使用。
  • 案例優化:本天氣案例基於小米手機系統天氣app。由於時間關係只製作了首頁,其他滑動及點擊效果之後有時間可能會更新。

歡迎留言討論。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure高階教程:利用JavaScript製作實時天氣顯示APP》
文章链接:https://www.pmbear.com/axure%e9%ab%98%e9%9a%8e%e6%95%99%e7%a8%8b%ef%bc%9a%e5%88%a9%e7%94%a8javascript%e8%a3%bd%e4%bd%9c%e5%af%a6%e6%99%82%e5%a4%a9%e6%b0%a3%e9%a1%af%e7%a4%baapp/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们