當(dāng)大家用Axure制作APP原型時(shí)，即使高保真效果也只是在視覺(jué)層面上實(shí)現(xiàn)了原型效果，但頁(yè)面中的數(shù)據(jù)內(nèi)容還都只是預(yù)先設(shè)定好的，例如：使用中繼器、表格等，模擬真實(shí)作品。那么有沒(méi)有一種方法，讓我們制作的原型也能獲取到真實(shí)數(shù)據(jù)呢？

本例通過(guò)JavaScript實(shí)現(xiàn)實(shí)時(shí)獲取天氣功能，意在激發(fā)大家興趣，制作更多基于Axure獲取實(shí)時(shí)信息的案例。廢話不多說(shuō)，上圖為敬：

點(diǎn)擊查看原型：

這個(gè)原型到底有什么獨(dú)特之處嗎？在剛打開(kāi)的時(shí)候，整個(gè)頁(yè)面呈現(xiàn)的數(shù)據(jù)都是之前設(shè)定好的，當(dāng)點(diǎn)擊左上角的『刷新』的時(shí)候，頁(yè)面會(huì)通過(guò)一個(gè)天氣查詢api獲取到當(dāng)前真實(shí)數(shù)據(jù)，然后加載出來(lái)。怎么樣，是不是被它吸引到了？

原理

這個(gè)實(shí)例中主要用到了Axure的以下幾個(gè)功能：

（1）中繼器

由于『昨天』、『今天』、『明天』的天氣概要布局相同，可以使用中繼器更加規(guī)范顯示。

（2）JavaScript

在獲取天氣api時(shí)，通過(guò)Ajax的GET方式從天氣api服務(wù)器中獲取實(shí)時(shí)數(shù)據(jù)。

（3）全局變量

接收并儲(chǔ)存獲取到的實(shí)時(shí)數(shù)據(jù)。

（4）字符串函數(shù)

通過(guò)indexOf()、replace()、slice()等字符串函數(shù)對(duì)接收到的數(shù)據(jù)進(jìn)行加工，之后存儲(chǔ)到中繼器中。

以下為整個(gè)實(shí)例流程圖：

功能實(shí)現(xiàn)

1. 獲取api數(shù)據(jù)

在本例中，我們通過(guò)『http://t.weather.sojson.com/api/weather/city/101010100』api獲取到北京天氣的實(shí)時(shí)數(shù)據(jù)，大家可以看到，數(shù)據(jù)是以json格式返回的，此接口可以獲得當(dāng)天的天氣詳情和從昨天到未來(lái)15天的天氣數(shù)據(jù)。

那么Axure是如何實(shí)現(xiàn)調(diào)用api的呢？

我們先設(shè)定一個(gè)全局變量『tianqi』，當(dāng)點(diǎn)擊刷新按鈕時(shí)，先設(shè)置全局變量值為空，再通過(guò)『打開(kāi)鏈接』功能插入Javascript腳本，參數(shù)選擇「鏈接外部網(wǎng)址」，「打開(kāi)當(dāng)前窗口」調(diào)用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代碼的意思就是調(diào)用JavaScript，通過(guò)「ajax」對(duì)象的「GET」方式，從「http://t.weather.sojson.com/api/weather/city/101010100」地址獲取數(shù)據(jù)，因?yàn)檫@個(gè)api不需要傳遞參數(shù)，所以「data」字段并沒(méi)有賦值。之后將獲取到的數(shù)據(jù)通過(guò)「JSON.stringify」轉(zhuǎn)為字符串后賦值給全局變量「tianqi」。

怎么樣？是不是很神奇。

如果你不明白，去百度下ajax的「GET」方法就能略知一二了。通過(guò)這一步，我們的全局變量「tianqi」就已經(jīng)獲取到了實(shí)時(shí)的天氣數(shù)據(jù)。那么之后怎么加工呢？

2. 格式化數(shù)據(jù)

目前的全局變量值如下圖，是沒(méi)辦法直接使用的。那我們?nèi)绾胃袷交@些數(shù)據(jù)呢，這時(shí)就需要字符串函數(shù)了。

如圖所示，整個(gè)數(shù)據(jù)中包含了2部分，第一部分是當(dāng)天的天氣情況，第二部分是從昨天開(kāi)始到之后的十五天天氣情況。由于時(shí)間關(guān)系，本次實(shí)例中只使用到了「第一部分」和「昨天到明天」的天氣情況。

我們首先創(chuàng)建4個(gè)文本框，這4個(gè)文本框分別保存「當(dāng)天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。然后通過(guò)『設(shè)置文本』功能對(duì)文本框賦值，其中「當(dāng)天天氣情況」的賦值函數(shù)為：

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

這句話什么意思呢？就是說(shuō)截取「tianqi」字符串中從「shidu」字段到「yesterday」字段的字符。

3. 更新天氣數(shù)據(jù)

目前我們獲得了4段數(shù)據(jù)，分別為「當(dāng)天天氣情況」、「昨天天氣情況」、「今天天氣情況」、「明天天氣情況」。這樣就簡(jiǎn)單多了，當(dāng)我們需要當(dāng)天的溫度是，直接從「當(dāng)天天氣情況」數(shù)據(jù)中查找對(duì)應(yīng)的「wendu」就可以了。

目前「當(dāng)天天氣情況」數(shù)據(jù)如下：

shidu”:”16%”,”pm25″:11.0,”pm10″:23.0,”quality”:”優(yōu)”,”wendu“:”16″,”ganmao”:”各類人群可自由活動(dòng)”,”yesterday

我們很容易看到，「wendu」的數(shù)值是「16」。如何截取呢？我們通過(guò)以下函數(shù)將「16」賦值給頁(yè)面中的『溫度』字段。其中「LVAR1」為「當(dāng)天天氣情況」元件的元件文字。

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

4. 更新中繼器數(shù)據(jù)

如前所述，頁(yè)面中的「昨天」、「今天」、「明天」天氣情況我們通過(guò)中繼器儲(chǔ)存。更新中繼器數(shù)據(jù)我們通過(guò)『更新行』動(dòng)作實(shí)現(xiàn)。

對(duì)應(yīng)的賦值函數(shù)同樣通過(guò)字符串函數(shù)實(shí)現(xiàn)，例如「天氣類型」函數(shù)如下，LVAR1為「昨天天氣情況」元件的元件文字：

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

至此，大功告成，我們的頁(yè)面已經(jīng)加載了實(shí)時(shí)的天氣信息。

后記

這個(gè)有用嗎？

作為一名產(chǎn)品經(jīng)理，如果連自己最常用的軟件都不喜歡琢磨，何談自己要開(kāi)發(fā)的產(chǎn)品呢？

通過(guò)這種獲取api的方式，我們可以制作更多實(shí)時(shí)、真實(shí)的案例，在網(wǎng)上有無(wú)數(shù)的api，例如大小寫(xiě)轉(zhuǎn)換、MD5加密、歸屬地查詢、車輛限行，如果我們做的案例中能得當(dāng)?shù)氖褂眠@些功能，不是更好嗎？更進(jìn)一步，如果懂得開(kāi)發(fā)，我們完全可以為了原型演示開(kāi)發(fā)一個(gè)特定的api，實(shí)現(xiàn)相應(yīng)功能。

一些問(wèn)題

• JavaScript接口http限制：目前測(cè)試后已知的限制是，如果接口不是https協(xié)議，原型在axshare上無(wú)法獲取數(shù)據(jù)，原因是axshare禁止調(diào)用http接口。
• JavaScript接口跨域問(wèn)題：在網(wǎng)上測(cè)試了一些接口，發(fā)現(xiàn)使用ajax方法調(diào)用時(shí)會(huì)產(chǎn)生跨域問(wèn)題，導(dǎo)致無(wú)法接收到數(shù)據(jù)，具體解決方法沒(méi)有找到，如果有方法歡迎留言。
• 接口不穩(wěn)定解決辦法：目前通過(guò)循環(huán)調(diào)用直到接口返回正常數(shù)據(jù)時(shí)結(jié)束。
• 獲取到的數(shù)據(jù)是object：記得使用『JSON.stringify』轉(zhuǎn)換接收到的數(shù)據(jù)，因?yàn)閿?shù)據(jù)可能是json類型，要轉(zhuǎn)換為字符串才能使用。
• 案例優(yōu)化：本天氣案例基于小米手機(jī)系統(tǒng)天氣app。由于時(shí)間關(guān)系只制作了首頁(yè)，其他滑動(dòng)及點(diǎn)擊效果之后有時(shí)間可能會(huì)更新。

歡迎留言討論。

本文由 @escher 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議