“微天氣”微信小程序?qū)崙?zhàn)開發(fā)過程
在智能手機(jī)軟件的裝機(jī)量中，天氣預(yù)報(bào)類的APP排在比較靠前的位置。說明用戶對(duì)天氣的關(guān)注度很高。因?yàn)槿藗儫o論是工作還是度假旅游等各種活動(dòng)都需要根據(jù)自然天氣來安排。本文將帶大家開發(fā)一個(gè)“微天氣”小程序，方便微信網(wǎng)友隨時(shí)查看天氣。
天氣預(yù)報(bào)API
要開發(fā)天氣預(yù)報(bào)類APP，首先要考慮的問題就是天氣預(yù)報(bào)數(shù)據(jù)的來源。有了天氣預(yù)報(bào)的數(shù)據(jù)來源，才能按需要在微信小程序中顯示出來。其實(shí)，微信小程序就是一個(gè)顯示天氣信息的前端系統(tǒng)，而天氣預(yù)報(bào)API就是后端系統(tǒng)。由于天氣預(yù)報(bào)API可以在網(wǎng)上免費(fèi)獲取，因此，本案例中開發(fā)者不需要開發(fā)后端系統(tǒng)，只需要根據(jù)API的要求進(jìn)行訪問即可。
目前，互聯(lián)網(wǎng)上提供的天氣預(yù)報(bào)API比較多，筆者將幾個(gè)主要的API列舉出來，讀者可根據(jù)需要使用（當(dāng)然，本案例只使用其中一個(gè)即可）。
中國天氣網(wǎng)天氣預(yù)報(bào)接口
要查詢天氣預(yù)報(bào)，當(dāng)然是以中央氣象臺(tái)的數(shù)據(jù)為權(quán)威。中央氣象臺(tái)通過“中國天氣”網(wǎng)站對(duì)外發(fā)布全國各地天氣預(yù)報(bào)，國內(nèi)各大門戶網(wǎng)站的天氣預(yù)報(bào)數(shù)據(jù)都是從這個(gè)網(wǎng)站獲取的。如圖1所示就是中國氣象局的天氣預(yù)報(bào)網(wǎng)站——中國天氣網(wǎng)。
圖1 中國天氣網(wǎng)
在圖1所示的中國天氣網(wǎng)中可查看全國乃至世界各地的天氣預(yù)報(bào)信息，在上方查詢輸入框中輸入一個(gè)城市名稱進(jìn)行查詢，就可查看到詳細(xì)天氣預(yù)報(bào)數(shù)據(jù)。例如，輸入“上海”單擊右端的查詢按鈕，就可看到如圖2所示的上海當(dāng)天的詳細(xì)預(yù)報(bào)。
從圖2所示瀏覽器的地址欄可看到其地址為：
http://www.weather.com.cn/weather1d/101020100.shtml#search
這個(gè)URL地址中的101020100是上海的一個(gè)編碼，如果換成其他城市（如101270101——成都的編碼），則可看到其他城市的天氣預(yù)報(bào)信息。
圖2 查詢上海的天氣預(yù)報(bào)
對(duì)于城市編碼這個(gè)數(shù)據(jù)，可以從網(wǎng)站上收集到，將其保存到一個(gè)文本文件中，查詢時(shí)從文件中讀入即可。例如，將收集到的城市編碼按以下格式保存到city.txt文件中。
北京,101010100|北京海淀,101010200|北京朝陽,101010300|北京順義,101010400|北京懷柔,101010500|北京通州,101010600|北京昌平,101010700|北京延慶,101010800|北京豐臺(tái),101010900|北京石景山,101011000|北京大興,101011100|北京房山,101011200|北京密云,101011300|北京門頭溝,101011400|北京平谷,101011500|上海,101020100|上海閔行,101020200|上海寶山,101020300|上海嘉定,101020500|……
在上面的數(shù)據(jù)格式中，每一個(gè)區(qū)域名稱和編碼之間用逗號(hào)分隔，而區(qū)域之間用豎線分隔。這樣做的好處是可用Python中的split函數(shù)分隔數(shù)據(jù)，具體方法詳見后面的代碼。
知道城市編碼后，就可通過城市編碼去訪問對(duì)應(yīng)的網(wǎng)頁，得到該城市的天氣預(yù)報(bào)數(shù)據(jù)。首先想到的方法當(dāng)然是用wx.request方法打開對(duì)應(yīng)的網(wǎng)頁，獲取HTML數(shù)據(jù)，然后進(jìn)行分析。不過，這里對(duì)HTML進(jìn)行分析的過程非常麻煩，且效率不高。
不過，中國天氣網(wǎng)提供了專用的數(shù)據(jù)接口，通過訪問這些數(shù)據(jù)接口API，可獲得JSON數(shù)據(jù)。這樣，就不會(huì)有其他雜亂的HTML代碼來干擾。而微信小程序?qū)SON數(shù)據(jù)是可以直接解析的，因此，使用這些API接口是最方便的。
1. 天氣實(shí)況信息
要獲取天氣實(shí)況信息，可通過以下接口：
http://www.weather.com.cn/data/sk/101010100.html
其中，數(shù)字部分是城市編碼，101010100是北京的編碼，因此，上面的接口查詢到的是北京的天氣實(shí)況信息（如果換成101020100，則返回的是上海的天氣實(shí)況信息）。
在瀏覽器中輸入以上URL地址，可得到如圖3所示的結(jié)果。
圖3 查詢北京的天氣預(yù)報(bào)
圖3所示返回的是JSON數(shù)據(jù)，不過，這里作為文本顯示，不太容易看得清，整理一下格式，得到的JSON數(shù)據(jù)如下所示：
{
"weatherinfo": {
"city": "北京",
"cityid": "101010100",
"temp": "18",
"WD": "東南風(fēng)",
"WS": "1級(jí)",
"SD": "17%",
"WSE": "1",
"time": "17:05",
"isRadar": "1",
"Radar": "JC_RADAR_AZ9010_JB",
"njd": "暫無實(shí)況",
"qy": "1011",
"rain": "0"
}
}
可看出，返回的JSON對(duì)象中有一個(gè)weatherinfo對(duì)象，其中的各屬性分別表示了天氣預(yù)報(bào)中的一項(xiàng)信息，如city是城市名稱，temp是當(dāng)前溫度，WD風(fēng)向，WS是風(fēng)速……
2. 全天天氣預(yù)報(bào)
要獲取全天天氣預(yù)報(bào)的信息，可通過以下接口：
http://www.weather.com.cn/data/cityinfo/101010100.html
其中，數(shù)字部分是城市編碼，101010100是北京的編碼，因此，上面的接口查詢到的是北京的天氣信息。訪問該接口返回的JSON數(shù)據(jù)如下所示：
{
"weatherinfo": {
"city": "北京",
"cityid": "101010100",
"temp1": "-2℃",
"temp2": "16℃",
"weather": "晴",
"img1": "n0.gif",
"img2": "d0.gif",
"ptime": "18:00"
}
}
3.天氣詳情
使用以下接口可獲取最詳盡的天氣預(yù)報(bào)信息。
http://m.weather.com.cn/data/101010100.html
以上接口返回的JSON數(shù)據(jù)格式如下：
{
"weatherinfo": {
"city": "北京",
"city_en": "beijing",
"date_y": "2016年11月16日",
"date": "",
"week": "星期四",
"fchh": "11",
"cityid": "101010100",
"temp1": "2℃~-7℃",
"temp2": "1℃~-7℃",
"temp3": "4℃~-7℃",
"temp4": "7℃~-5℃",
"temp5": "5℃~-3℃",
"temp6": "5℃~-2℃",
"tempF1": "35.6℉~19.4℉",
"tempF2": "33.8℉~19.4℉",
"tempF3": "39.2℉~19.4℉",
"tempF4": "44.6℉~23℉",
"tempF5": "41℉~26.6℉",
"tempF6": "41℉~28.4℉",
"weather1": "晴",
"weather2": "晴",
"weather3": "晴",
"weather4": "晴轉(zhuǎn)多云",
"weather5": "多云",
"weather6": "多云轉(zhuǎn)陰",
"img1": "0",
"img2": "99",
"img3": "0",
"img4": "99",
"img5": "0",
"img6": "99",
"img7": "0",
"img8": "1",
"img9": "1",
"img10": "99",
"img11": "1",
"img12": "2",
"img_single": "0",
"img_title1": "晴",
"img_title2": "晴",
"img_title3": "晴",
"img_title4": "晴",
"img_title5": "晴",
"img_title6": "晴",
"img_title7": "晴",
"img_title8": "多云",
"img_title9": "多云",
"img_title10": "多云",
"img_title11": "多云",
"img_title12": "陰",
"img_title_single": "晴",
"wind1": "北風(fēng)3-4級(jí)轉(zhuǎn)微風(fēng)",
"wind2": "微風(fēng)",
"wind3": "微風(fēng)",
"wind4": "微風(fēng)",
"wind5": "微風(fēng)",
"wind6": "微風(fēng)",
"fx1": "北風(fēng)",
"fx2": "微風(fēng)",
"fl1": "3-4級(jí)轉(zhuǎn)小于3級(jí)",
"fl2": "小于3級(jí)",
"fl3": "小于3級(jí)",
"fl4": "小于3級(jí)",
"fl5": "小于3級(jí)",
"fl6": "小于3級(jí)",
"index": "冷",
"index_d": "天氣冷，建議著棉衣、皮夾克加羊毛衫等冬季服裝。年老體弱者宜著厚棉衣或冬大衣。",
"index48": "冷",
"index48_d": "天氣冷，建議著棉衣、皮夾克加羊毛衫等冬季服裝。年老體弱者宜著厚棉衣或冬大衣。",
"index_uv": "弱",
"index48_uv": "弱",
"index_xc": "適宜",
"index_tr": "一般",
"index_co": "較不舒適",
"st1": "1",
"st2": "-8",
"st3": "2",
"st4": "-4",
"st5": "5",
"st6": "-5",
"index_cl": "較不宜",
"index_ls": "基本適宜",
"index_ag": "極不易發(fā)"
}
}
不過，現(xiàn)在中國天氣網(wǎng)已不能通過這個(gè)接口獲取數(shù)據(jù)了。
中華萬年歷的天氣預(yù)報(bào)接口
中華萬年歷的天氣預(yù)報(bào)接口地址如下：
http://wthrcdn.etouch.cn/weather_mini?city=北京
該接口很簡(jiǎn)單，只需要給出城市的名稱即可，不像中囯天氣網(wǎng)的接口還需要根據(jù)城市名稱去查詢城市編碼，然后再去訪問接口。接口返回的數(shù)據(jù)也是JSON格式，具體形式如下所示：
{
"desc": "OK",
"status": 1000,
"data": {
"wendu": "15",
"ganmao": "晝夜溫差較大，較易發(fā)生感冒，請(qǐng)適當(dāng)增減衣服。體質(zhì)較弱的朋友請(qǐng)注意防護(hù)。",
"forecast": [{
"fengxiang": "北風(fēng)",
"fengli": "3-4級(jí)",
"high": "高溫 14℃",
"type": "晴",
"low": "低溫 3℃",
"date": "19日星期六"
},
{
"fengxiang": "無持續(xù)風(fēng)向",
"fengli": "微風(fēng)級(jí)",
"high": "高溫 4℃",
"type": "雨夾雪",
"low": "低溫 -1℃",
"date": "20日星期天"
},
{
"fengxiang": "北風(fēng)",
"fengli": "3-4級(jí)",
"high": "高溫 0℃",
"type": "小雪",
"low": "低溫 -7℃",
"date": "21日星期一"
},
{
"fengxiang": "北風(fēng)",
"fengli": "3-4級(jí)",
"high": "高溫 -3℃",
"type": "晴",
"low": "低溫 -9℃",
"date": "22日星期二"
},
{
"fengxiang": "無持續(xù)風(fēng)向",
"fengli": "微風(fēng)級(jí)",
"high": "高溫 -3℃",
"type": "多云",
"low": "低溫 -10℃",
"date": "23日星期三"
}],
"yesterday": {
"fl": "微風(fēng)",
"fx": "無持續(xù)風(fēng)向",
"high": "高溫 10℃",
"type": "霾",
"low": "低溫 6℃",
"date": "18日星期五"
},
"aqi": "40",
"city": "北京"
}
}
可以看出，以上返回的JSON數(shù)據(jù)很多，有當(dāng)天的溫度wendu、感冒描述ganmao，還有forecast數(shù)組中保存的最近5天的天氣數(shù)據(jù)，以及yesterday中保存的昨日天氣數(shù)據(jù)。
只需要一個(gè)接口就可獲得詳細(xì)的天氣信息，因此，本案例選擇使用該API接口。
界面設(shè)計(jì)
本案例要求界面簡(jiǎn)單，盡量在一個(gè)頁面中顯示當(dāng)前天氣、最近五天的天氣，同時(shí)，還要提供按城市名稱查詢的功能，可顯示出所查詢城市的天氣預(yù)報(bào)信息。UI設(shè)計(jì)如圖4所示。
圖4 UI設(shè)計(jì)
在圖4所示UI中，上方顯示所查詢城市的名稱，右側(cè)顯示當(dāng)前日期。接著以較大字號(hào)顯示查詢城市的溫度和感冒描述。下方排著5個(gè)小卡片顯示最近5天的天氣信息，最下方接收用戶輸入要查詢的城市名稱，單擊“查詢”按鈕即可查詢指定城市的天氣預(yù)報(bào)信息。
當(dāng)剛打開該小程序時(shí)，由于用戶還沒有輸入查詢城市名稱，需要設(shè)置一個(gè)默認(rèn)城市名稱，以方便顯示初始的天氣預(yù)報(bào)信息。
編寫界面代碼
選擇好使用的API并設(shè)計(jì)好UI界面的布局之后，就可以創(chuàng)建微信小程序項(xiàng)目，并編寫界面代碼和邏輯層的JavaScript代碼了。
創(chuàng)建項(xiàng)目
首先按以下步驟創(chuàng)建出項(xiàng)目。
（1）創(chuàng)建名為ch11的項(xiàng)目目錄。
（2）啟動(dòng)微信小程序開發(fā)工具，在啟動(dòng)界面中單擊“添加項(xiàng)目”按鈕，打開如圖5所示的對(duì)話框。
（3）在圖5所示對(duì)話框中填寫好相應(yīng)的項(xiàng)目名稱，并選擇保存項(xiàng)目的目錄，單擊“添加項(xiàng)目”按鈕即可創(chuàng)建好一個(gè)項(xiàng)目的框架。
圖5 添加項(xiàng)目
本項(xiàng)目只有一個(gè)頁面，因此也就不需要再添加其他頁面，將index頁面中已有的內(nèi)容刪除，然后再在index頁面中編寫WXML和JS代碼即可。
（4）修改顯示標(biāo)題，打開app.json文件，修改成以下內(nèi)容：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微天氣",
"navigationBarTextStyle":"black"
}
}
編寫界面代碼
根據(jù)圖4所示的UI設(shè)計(jì)，打開index.wxml文件，刪除該文件原有內(nèi)容，輸入以下wxml代碼。
<view class="content">
<!--顯示當(dāng)天的天氣信息-->
<view class="info">
<!--城市名稱 當(dāng)前日期-->
<view class="city">{{city}} ({{today}})</view>
<!--當(dāng)天溫度-->
<view class="temp">{{weather.wendu}}℃</view>
<!--感冒描述-->
<view class="weather">{{weather.ganmao}}</view>
</view>
<!--昨天的天氣信息-->
<view class="yesterday">
<view class="detail"><text class="yesterday-title">昨天</text>
{{weather.yesterday.date}}</view>
<view class="detail"> {{weather.yesterday.type}} <!--天氣類型，如陰、晴-->
{{weather.yesterday.fx}} <!--風(fēng)向-->
{{weather.yesterday.fl}} <!--風(fēng)力-->
{{weather.yesterday.low}} <!--最低溫度-->
{{weather.yesterday.high}} <!--最高溫度-->
</view>
</view>
<!--最近五天天氣信息-->
<view class="forecast" >
<view class="next-day" wx:key="{{index}}" wx:for="{{weather.forecast}}" >
<!--日期-->
<view class="detail date">{{item.date}}</view>
<!--天氣類型-->
<view class="detail">{{item.type}}</view>
<!--最高溫度-->
<view class="detail">{{item.high}}</view>
<!--最低溫度-->
<view class="detail">{{item.low}}</view>
<!--風(fēng)向-->
<view class="detail">{{item.fengxiang}}</view>
<!--風(fēng)力-->
<view class="detail">{{item.fengli}}</view>
</view>
</view>
<!--搜索-->
<view class="search-area">
<input bindinput="inputing" placeholder="請(qǐng)輸入城市名稱"
value="{{inputCity}}" />
<button type="primary" size="mini" bindtap="bindSearch">查詢</button>
</view>
</view>
以上wxml代碼添加了注釋，每一部分的作用都在注釋中進(jìn)行了描述。
編寫界面樣式代碼
保存以上wxml代碼之后，在開發(fā)工具左側(cè)的預(yù)覽區(qū)中并沒有看到如圖4中的UI效果。為了達(dá)到設(shè)計(jì)的布局效果，需要編寫樣式代碼對(duì)wxml組件進(jìn)行控制。其實(shí)，在上面的wxml代碼中，已經(jīng)為各組件設(shè)置了class屬性，接下來只需要在index.wxss中針對(duì)每一個(gè)class編寫相應(yīng)的樣式代碼即可，具體代碼如下：
.content{
height: 100%;
width:100%;
display:flex;
flex-direction:column;
font-family: 微軟雅黑, 宋體;
box-sizing:border-box;
padding:20rpx 10rpx;
color: #252525;
font-size:16px;
background-color:#F2F2F8;
}
/*當(dāng)天天氣信息*/
.info{
margin-top:50rpx;
width:100%;
height:160px;
}
/*城市名稱*/
.city{
margin: 20rpx;
border-bottom:1px solid #043567;
}
/*當(dāng)天溫度*/
.temp{
font-size: 120rpx;
line-height: 130rpx;
text-align: center;
padding-top:20rpx;
color:#043567;
}
/*感冒描述*/
.weather{
line-height: 22px;
margin: 10px 0;
padding: 0 10px;
}
/*昨天天氣信息*/
.yesterday{
width:93%;
padding:20rpx;
margin-top:50rpx;
border-radius:10rpx;
border:1px solid #043567;
}
/*昨天的*/
.yesterday-title{
color:red;
}
/*最近五天天氣信息*/
.forecast{
width: 100%;
display:flex;
margin-top:50rpx;
align-self:flex-end;
}
/*每一天的天氣信息*/
.next-day{
width:20%;
height:450rpx;
text-align:center;
line-height:30px;
font-size:14px;
margin: 0 3rpx;
border:1px solid #043567;
border-radius:10rpx;
}
/*日期*/
.date{
margin-bottom:20rpx;
border-bottom:1px solid #043567;
color:#F29F39;
}
/*搜索區(qū)域*/
.search-area{
display:flex;
background: #f4f4f4;
padding: 1rem 0.5rem;
}
/*搜索區(qū)域的輸入框*/
.search-area input{
width:70%;
height: 38px;
line-height: 38px;
border: 1px solid #ccc;
box-shadow: inset 0 0 10px #ccc;
color: #000;
background-color:#fff;
border-radius: 5px;
}
/*搜索區(qū)的按鈕*/
.search-area button{
width: 30%;
height: 40px;
line-height: 40px;
margin-left: 5px;
}
在上面的wxss代碼中，每一個(gè)class設(shè)置前都有相應(yīng)的注釋，可與wxml代碼對(duì)應(yīng)起來。
保存好index.wxss文件之后，開發(fā)工具左側(cè)預(yù)覽區(qū)可看到如圖6所示的界面效果。
圖6 界面效果
編寫邏輯層代碼
由于在index.js中還沒有設(shè)置初始化數(shù)據(jù)，所以在圖6所示界面中看不到具體的數(shù)據(jù)，從而也導(dǎo)致界面的效果沒達(dá)到設(shè)置的要求。
接下來就編寫邏輯層代碼index.js，為了檢查界面設(shè)計(jì)效果，首先編寫初始數(shù)據(jù)，然后再逐步深入地編寫其他相關(guān)業(yè)務(wù)邏輯代碼。
編寫數(shù)據(jù)初始化代碼
在index.wxml中編寫了很多數(shù)據(jù)，因此需要在index.js中先把這些數(shù)據(jù)進(jìn)行初始化，然后在開發(fā)工具的模擬器中就可預(yù)覽結(jié)果。
打開index.js文件，刪除原來的內(nèi)容，重新編寫以下代碼：
Page({
data: {
weather:{
wendu:18,
ganmao:'晝夜溫差較大，較易發(fā)生感冒，請(qǐng)適當(dāng)增減衣服。體質(zhì)較弱的朋友請(qǐng)注意防護(hù)。',
yesterday:{
date:'17日星期四',
type:'陰',
fx:'南風(fēng)',
fl:'微風(fēng)級(jí)',
low:'低溫 8℃',
high:'高溫 16℃'
},
forecast:[
{
date:'18日星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風(fēng)',
fengli:'微風(fēng)級(jí)'
},{
date:'18日星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風(fēng)',
fengli:'微風(fēng)級(jí)'
},{
date:'18日星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風(fēng)',
fengli:'微風(fēng)級(jí)'
},{
date:'18日星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風(fēng)',
fengli:'微風(fēng)級(jí)'
},{
date:'18日星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風(fēng)',
fengli:'微風(fēng)級(jí)'
}
]
},
today:'2016-11-18',
city:'北京', //城市名稱
inputCity:'', //輸入查詢的城市名稱
}
})
編寫好以上初始化數(shù)據(jù)之后，保存index.js，在開發(fā)工具左側(cè)預(yù)覽區(qū)域可看到如圖7所示的界面效果。
圖7 界面效果
以上代碼很長(zhǎng)，主要是由于模擬了5天的天氣數(shù)據(jù)，實(shí)際上，在小程序運(yùn)行時(shí)，應(yīng)該在打開小程序之后就馬上通過API獲取天氣數(shù)據(jù)，因此上面的初始化數(shù)據(jù)代碼中，只需要用以下語句將weather初始化為一個(gè)空對(duì)象即可，而上面添加在weather中的屬性數(shù)據(jù)都可以刪除。
weather:{}
獲取當(dāng)前位置的城市名稱
根據(jù)本案例的要求，當(dāng)用戶打開本案例之后，首先要獲取用戶當(dāng)前所在城市的天氣信息，這就需要獲取用戶當(dāng)前所在城市的名稱。要完成這個(gè)功能，需要經(jīng)過幾個(gè)轉(zhuǎn)折。
首先，可以使用微信小程序的獲取當(dāng)前地理位置經(jīng)緯度的API（就是wx. getLocation），通過該API即可獲取用戶所在位置的經(jīng)緯度。
有了用戶所在的經(jīng)緯度，還需要查詢?cè)摻?jīng)緯度對(duì)應(yīng)的城市名稱。這可以使用百度地圖的接口來實(shí)現(xiàn)，百度地圖Geocoding API服務(wù)地址如下：
http://api.map.baidu.com/geocoder/v2/
調(diào)用該接口需要傳遞以下幾個(gè)參數(shù)。
- output：設(shè)置接口返回的數(shù)據(jù)格式為json或者xml。
- ak：這是必須設(shè)置的一個(gè)參數(shù)，是用戶在百度申請(qǐng)注冊(cè)的key，自v2開始參數(shù)修改為“ak”，之前版本參數(shù)為“key”。
- sn：若用戶所用ak的校驗(yàn)方式為sn校驗(yàn)時(shí)該參數(shù)必須啟用。
- callback：一個(gè)回調(diào)函數(shù)，將json格式的返回值通過callback函數(shù)返回以實(shí)現(xiàn)jsonp功能。
例如，在瀏覽器中輸入以下地址：
http://api.map.baidu.com/geocoder/v2/?ak=ASAT5N3tnHIa4APW0SNPeXN5&location=30.572269,104.066541&output=json&pois=0
返回的JSON格式如下所示：
{
"status": 0,
"result": {
"location": {
"lng": 104.06654099999996,
"lat": 30.572268897395259
},
"formatted_address": "四川省成都市武侯區(qū)G4201(成都繞城高速)",
"business": "",
"addressComponent": {
"country": "中國",
"country_code": 0,
"province": "四川省",
"city": "成都市",
"district": "武侯區(qū)",
"adcode": "510107",
"street": "G4201(成都繞城高速)",
"street_number": "",
"direction": "",
"distance": ""
},
"pois": [],
"poiRegions": [],
"sematic_description": "**中心w6區(qū)西南108米",
"cityCode": 75
}
}
在以上JSON數(shù)據(jù)中，通過result.addressComponent.city可獲取傳入經(jīng)緯度對(duì)應(yīng)的城市名稱。因此，在本案例中可通過這種方式獲取用戶當(dāng)前所在城市的名稱。
根據(jù)以上分析，在index.js的onLoad事件處理函數(shù)中編寫如下所示代碼：
var util = require('../../utils/util.js');
Page({
data: {
……
},
onLoad: function (options) {
this.setData({
today:util.formatTime(new Date()).split(' ')[0] //更新當(dāng)前日期
});
var self = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
wx.request({
url:'http://api.map.baidu.com/geocoder/v2/' +
'?ak=ASAT5N3tnHIa4APW0SNPeXN5&location='+
res.latitude+',' + res.longitude + '&output=json&pois=0',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var city = res.data.result.addressComponent.city.replace('市','');//城市名稱
self.searchWeather(city); //查詢指定城市的天氣信息
}
})
}
})
},
})
以上代碼中，第1行使用require導(dǎo)入工具方法，用來格式化日期。
根據(jù)城市名稱獲取天氣預(yù)報(bào)
獲取了城市名稱，接下來就可使用以下接口獲取指定城市名稱的天氣預(yù)報(bào)信息：
http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
在上面的接口中，城市名稱中不包含“市”這個(gè)字，如“成都市”只需要傳入“成都”。
在本節(jié)前面介紹該接口時(shí)，只查看了接口執(zhí)行成功后返回的JSON數(shù)據(jù)，如果傳入的城市名稱有誤，則返回如下所示JSON數(shù)據(jù)：
{
"desc": "invilad-citykey",
"status": 1002
}
在程序中可通過status判斷數(shù)據(jù)查詢是否成功。
由于根據(jù)城市名稱查詢天氣預(yù)報(bào)信息的代碼需要重復(fù)調(diào)用，因此，單獨(dú)編寫成一個(gè)函數(shù)，方便在查詢時(shí)調(diào)用。
//根據(jù)城市名稱查詢天氣預(yù)報(bào)信息
searchWeather:function(cityName){
var self = this;
wx.request({
//天氣預(yù)報(bào)查詢接口
url: 'http://wthrcdn.etouch.cn/weather_mini?city='+cityName,
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if(res.data.status == 1002) //無此城市
{
//顯示錯(cuò)誤信息
wx.showModal({
title: '提示',
content: '輸入的城市名稱有誤，請(qǐng)重新輸入！',
showCancel:false,
success: function(res) {
self.setData({inputCity:''});
}
})
}else{
var weather = res.data.data; //獲取天氣數(shù)據(jù)
for(var i=0;i<weather.forecast.length;i++)
{
var d = weather.forecast[i].date;
//處理日期信息，添加空格
weather.forecast[i].date = ' ' + d.replace('星期',' 星期');
}
self.setData({
city:cityName, //更新顯示城市名稱
weather:weather, //更新天氣信息
inputCity:'' //清空查詢輸入框
})
}
}
})
}
在上面代碼中，獲取的date中保存的是“19日星期六”這種格式的字符串，為了使日期和星期分別顯示在兩行中，這里使用了一種小技巧，就是在日期字符串中添加了2個(gè)全角狀態(tài)的空格，這樣在顯示這個(gè)字符串時(shí)自動(dòng)斷行。
編寫好以上這些代碼之后，保存，在開發(fā)工具左側(cè)可看到已經(jīng)獲取當(dāng)前的天氣數(shù)據(jù)，而不是前面初始化的數(shù)據(jù)了，如圖8所示。
圖8 用戶所在地天氣預(yù)報(bào)
這樣，本案例的主要代碼就算編寫完成了。不過，還只能顯示用戶當(dāng)前所在地的天氣信息，如果要查看其他城市的天氣，還需要繼續(xù)編寫相應(yīng)的查詢代碼。
查詢天氣預(yù)報(bào)
查詢代碼的編寫很簡(jiǎn)單，只需要獲取用戶輸入的城市名稱，然后傳入searchWeather函數(shù)即可。具體的代碼如下：
//輸入事件
inputing:function(e){
this.setData({inputCity:e.detail.value});
},
//搜索按鈕
bindSearch:function(){
this.searchWeather(this.data.inputCity);
}
保存以上代碼之后，在開發(fā)工具左側(cè)模擬器中輸入查詢的城市名稱，如輸入“三亞”，單擊“查詢”按鈕，界面中即可顯示“三亞”的天氣信息，如圖9所示。
圖9 查詢城市天氣
如果在下方輸入框輸入一個(gè)不存在的城市名稱，將顯示如圖11-10所示的提示信息。
圖10 城市名稱錯(cuò)誤的提示
