“微天氣”微信小程序實戰開發過程
在智能手機軟件的裝機量中，天氣預報類的APP排在比較靠前的位置。說明用戶對天氣的關注度很高。因為人們無論是工作還是度假旅游等各種活動都需要根據自然天氣來安排。本文將帶(dai)大家(jia)開發一個“微天(tian)氣”小程序，方便微信(xin)網友(you)隨時查看天(tian)氣。
天氣預報API
要開(kai)發(fa)天氣(qi)預報(bao)類APP，首先要考慮的(de)問題就(jiu)是天氣(qi)預報(bao)數(shu)(shu)據的(de)來源。有了天氣(qi)預報(bao)的(de)數(shu)(shu)據來源，才能按需(xu)(xu)要在微信(xin)小程(cheng)序(xu)中顯示出來。其實，微信(xin)小程(cheng)序(xu)就(jiu)是一個(ge)顯示天氣(qi)信(xin)息的(de)前端(duan)系(xi)統(tong)，而天氣(qi)預報(bao)API就(jiu)是后端(duan)系(xi)統(tong)。由于天氣(qi)預報(bao)API可(ke)以在網上免費獲取，因此，本案例中開(kai)發(fa)者(zhe)不需(xu)(xu)要開(kai)發(fa)后端(duan)系(xi)統(tong)，只需(xu)(xu)要根(gen)據API的(de)要求進(jin)行訪問即(ji)可(ke)。
目前，互聯網上(shang)提供的天氣預報API比(bi)較(jiao)多，筆者(zhe)將幾個主要(yao)的API列(lie)舉(ju)出來，讀(du)者(zhe)可(ke)根(gen)據需要(yao)使(shi)用（當然，本案例只使(shi)用其(qi)中一個即(ji)可(ke)）。
中國天氣網天氣預報接口
要查詢天(tian)氣預(yu)報(bao)，當然(ran)是以中央(yang)氣象(xiang)臺的(de)數據(ju)為權威。中央(yang)氣象(xiang)臺通過“中國(guo)天(tian)氣”網(wang)(wang)站對(dui)外發布(bu)全國(guo)各地天(tian)氣預(yu)報(bao)，國(guo)內各大門(men)戶網(wang)(wang)站的(de)天(tian)氣預(yu)報(bao)數據(ju)都是從這個網(wang)(wang)站獲取的(de)。如圖1所示就是中國(guo)氣象(xiang)局的(de)天(tian)氣預(yu)報(bao)網(wang)(wang)站——中國(guo)天(tian)氣網(wang)(wang)。
圖1 中(zhong)國(guo)天氣(qi)網
在圖(tu)1所(suo)示(shi)的中國(guo)天氣(qi)網中可查(cha)(cha)(cha)看全國(guo)乃至世界各地的天氣(qi)預報(bao)信息，在上方查(cha)(cha)(cha)詢(xun)輸入框(kuang)中輸入一個城市名稱進行查(cha)(cha)(cha)詢(xun)，就可查(cha)(cha)(cha)看到詳(xiang)細天氣(qi)預報(bao)數據(ju)。例(li)如，輸入“上海(hai)(hai)”單擊右端的查(cha)(cha)(cha)詢(xun)按鈕，就可看到如圖(tu)2所(suo)示(shi)的上海(hai)(hai)當(dang)天的詳(xiang)細預報(bao)。
從(cong)圖(tu)2所示瀏覽器的地址(zhi)欄(lan)可看到其(qi)地址(zhi)為：
//www.weather.com.cn/weather1d/101020100.shtml#search
這個URL地址中的(de)(de)(de)101020100是上(shang)海的(de)(de)(de)一個編(bian)(bian)碼，如果換成其他(ta)城(cheng)市（如101270101——成都(dou)的(de)(de)(de)編(bian)(bian)碼），則可看到(dao)其他(ta)城(cheng)市的(de)(de)(de)天(tian)氣預報信(xin)息。
圖2 查詢上海(hai)的(de)天(tian)氣預報
對(dui)于城市編(bian)碼這個數據，可(ke)以(yi)從(cong)網站(zhan)上收(shou)集到(dao)，將其保存(cun)到(dao)一個文本文件(jian)中，查詢(xun)時從(cong)文件(jian)中讀(du)入即可(ke)。例如(ru)，將收(shou)集到(dao)的城市編(bian)碼按以(yi)下(xia)格(ge)式保存(cun)到(dao)city.txt文件(jian)中。
北(bei)(bei)(bei)(bei)(bei)京(jing),101010100|北(bei)(bei)(bei)(bei)(bei)京(jing)海(hai)淀,101010200|北(bei)(bei)(bei)(bei)(bei)京(jing)朝陽(yang),101010300|北(bei)(bei)(bei)(bei)(bei)京(jing)順義,101010400|北(bei)(bei)(bei)(bei)(bei)京(jing)懷柔(rou),101010500|北(bei)(bei)(bei)(bei)(bei)京(jing)通州(zhou),101010600|北(bei)(bei)(bei)(bei)(bei)京(jing)昌平(ping),101010700|北(bei)(bei)(bei)(bei)(bei)京(jing)延慶(qing),101010800|北(bei)(bei)(bei)(bei)(bei)京(jing)豐臺,101010900|北(bei)(bei)(bei)(bei)(bei)京(jing)石(shi)景山,101011000|北(bei)(bei)(bei)(bei)(bei)京(jing)大興,101011100|北(bei)(bei)(bei)(bei)(bei)京(jing)房山,101011200|北(bei)(bei)(bei)(bei)(bei)京(jing)密云,101011300|北(bei)(bei)(bei)(bei)(bei)京(jing)門頭溝,101011400|北(bei)(bei)(bei)(bei)(bei)京(jing)平(ping)谷,101011500|上海(hai),101020100|上海(hai)閔(min)行,101020200|上海(hai)寶山,101020300|上海(hai)嘉定,101020500|……
在上(shang)面的數(shu)據格式(shi)中(zhong)，每一個區(qu)域名稱和編碼之間(jian)用(yong)逗號(hao)分隔(ge)，而區(qu)域之間(jian)用(yong)豎線(xian)分隔(ge)。這樣做的好(hao)處是可用(yong)Python中(zhong)的split函數(shu)分隔(ge)數(shu)據，具體方法詳(xiang)見后面的代碼。
知道城市編碼后，就可通過城市編碼去訪問對(dui)應的(de)網頁，得(de)到該城市的(de)天氣預報數據(ju)。首先想(xiang)到的(de)方(fang)法(fa)當然是用(yong)wx.request方(fang)法(fa)打開對(dui)應的(de)網頁，獲(huo)取HTML數據(ju)，然后進(jin)(jin)行分析(xi)。不過，這(zhe)里對(dui)HTML進(jin)(jin)行分析(xi)的(de)過程非常(chang)麻煩，且效率(lv)不高。
不過，中國(guo)天氣(qi)網(wang)提(ti)供了(le)專用的(de)數(shu)(shu)據(ju)接口，通過訪(fang)問這些(xie)數(shu)(shu)據(ju)接口API，可獲(huo)得JSON數(shu)(shu)據(ju)。這樣，就不會(hui)有其他雜亂的(de)HTML代(dai)碼來干擾。而微信小(xiao)程序對JSON數(shu)(shu)據(ju)是可以(yi)直接解析(xi)的(de)，因此，使用這些(xie)API接口是最方便(bian)的(de)。
1. 天氣實況(kuang)信息
要獲取天氣實況(kuang)信息，可(ke)通過以下接口(kou)：
//www.weather.com.cn/data/sk/101010100.html
其中，數(shu)字(zi)部(bu)分是(shi)(shi)城(cheng)市(shi)編(bian)(bian)碼，101010100是(shi)(shi)北京的編(bian)(bian)碼，因此，上面的接口查詢到的是(shi)(shi)北京的天氣(qi)(qi)實況(kuang)信息（如果換成101020100，則返(fan)回(hui)的是(shi)(shi)上海的天氣(qi)(qi)實況(kuang)信息）。
在瀏(liu)覽器(qi)中(zhong)輸入以(yi)上URL地址，可得到(dao)如圖(tu)3所示的結果。
圖(tu)3 查詢北京的天氣預(yu)報
圖3所示返回的是JSON數(shu)據，不(bu)過，這(zhe)里作為(wei)文本(ben)顯示，不(bu)太(tai)容易看(kan)得清，整理一下(xia)格式，得到的JSON數(shu)據如下(xia)所示：
{
"weatherinfo": {
"city": "北京",
"cityid": "101010100",
"temp": "18",
"WD": "東南風",
"WS": "1級",
"SD": "17%",
"WSE": "1",
"time": "17:05",
"isRadar": "1",
"Radar": "JC_RADAR_AZ9010_JB",
"njd": "暫(zan)無實況",
"qy": "1011",
"rain": "0"
}
}
可看出，返(fan)回的(de)(de)JSON對象中(zhong)有一(yi)個weatherinfo對象，其中(zhong)的(de)(de)各屬性分別表示了天氣(qi)預(yu)報中(zhong)的(de)(de)一(yi)項信息，如city是(shi)城(cheng)市名稱(cheng)，temp是(shi)當前(qian)溫度，WD風向，WS是(shi)風速(su)……
2. 全天天氣預報(bao)
要獲取全天天氣預報的信息，可通過以下接口：
//www.weather.com.cn/data/cityinfo/101010100.html
其中，數字部分是城市編碼，101010100是北京(jing)的(de)編碼，因此(ci)，上面的(de)接(jie)口(kou)查(cha)詢(xun)到(dao)的(de)是北京(jing)的(de)天氣信(xin)息。訪問(wen)該接(jie)口(kou)返(fan)回的(de)JSON數據如下所示(shi)：
{
"weatherinfo": {
"city": "北(bei)京",
"cityid": "101010100",
"temp1": "-2℃",
"temp2": "16℃",
"weather": "晴",
"img1": "n0.gif",
"img2": "d0.gif",
"ptime": "18:00"
}
}
3.天氣詳情
使(shi)用以(yi)下接口可(ke)獲取最詳盡的天氣(qi)預報信(xin)息。
//m.weather.com.cn/data/101010100.html
以上接口返回的JSON數據格式如下：
{
"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": "晴(qing)",
"weather3": "晴",
"weather4": "晴轉(zhuan)多云",
"weather5": "多云",
"weather6": "多云轉(zhuan)陰",
"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": "晴(qing)",
"img_title2": "晴",
"img_title3": "晴",
"img_title4": "晴",
"img_title5": "晴",
"img_title6": "晴",
"img_title7": "晴",
"img_title8": "多云",
"img_title9": "多云",
"img_title10": "多(duo)云",
"img_title11": "多云(yun)",
"img_title12": "陰(yin)",
"img_title_single": "晴",
"wind1": "北風3-4級轉微風",
"wind2": "微風",
"wind3": "微風",
"wind4": "微風",
"wind5": "微風",
"wind6": "微風",
"fx1": "北風",
"fx2": "微風(feng)",
"fl1": "3-4級(ji)轉(zhuan)小于3級(ji)",
"fl2": "小于3級",
"fl3": "小于3級",
"fl4": "小于3級",
"fl5": "小(xiao)于3級",
"fl6": "小于3級",
"index": "冷",
"index_d": "天氣冷，建議著棉(mian)衣(yi)、皮夾(jia)克(ke)加羊(yang)毛(mao)衫等冬季服裝。年老(lao)體弱(ruo)者宜著厚棉(mian)衣(yi)或冬大衣(yi)。",
"index48": "冷",
"index48_d": "天氣(qi)冷(leng)，建議著棉衣(yi)、皮夾克加羊毛衫(shan)等冬季服裝。年老體弱(ruo)者宜著厚棉衣(yi)或冬大衣(yi)。",
"index_uv": "弱",
"index48_uv": "弱",
"index_xc": "適宜(yi)",
"index_tr": "一(yi)般",
"index_co": "較不舒適",
"st1": "1",
"st2": "-8",
"st3": "2",
"st4": "-4",
"st5": "5",
"st6": "-5",
"index_cl": "較不宜",
"index_ls": "基本(ben)適宜",
"index_ag": "極不易發"
}
}
不(bu)過，現在中(zhong)國天(tian)氣網(wang)已不(bu)能通過這個接(jie)口獲取數據了。
中華萬年歷的天氣預報接口
中華萬年歷的(de)天氣(qi)預報接口(kou)地址如下：
//wthrcdn.etouch.cn/weather_mini?city=北京
該接(jie)口很簡單，只需(xu)要(yao)給出城(cheng)市(shi)的名(ming)稱即可，不像(xiang)中囯天氣網的接(jie)口還需(xu)要(yao)根據城(cheng)市(shi)名(ming)稱去(qu)查詢城(cheng)市(shi)編(bian)碼，然后再(zai)去(qu)訪問(wen)接(jie)口。接(jie)口返回的數據也是JSON格式，具體形式如下所示：
{
"desc": "OK",
"status": 1000,
"data": {
"wendu": "15",
"ganmao": "晝夜溫差(cha)較(jiao)大(da)，較(jiao)易發生感冒，請適當增減衣服。體質較(jiao)弱的(de)朋友請注意防(fang)護。",
"forecast": [{
"fengxiang": "北風",
"fengli": "3-4級(ji)",
"high": "高溫 14℃",
"type": "晴",
"low": "低溫(wen) 3℃",
"date": "19日星期六(liu)"
},
{
"fengxiang": "無(wu)持續(xu)風(feng)向(xiang)",
"fengli": "微風級",
"high": "高溫 4℃",
"type": "雨夾雪",
"low": "低溫 -1℃",
"date": "20日星期天(tian)"
},
{
"fengxiang": "北風",
"fengli": "3-4級",
"high": "高溫(wen) 0℃",
"type": "小雪",
"low": "低溫 -7℃",
"date": "21日星期(qi)一(yi)"
},
{
"fengxiang": "北風",
"fengli": "3-4級(ji)",
"high": "高(gao)溫 -3℃",
"type": "晴",
"low": "低(di)溫 -9℃",
"date": "22日星期二"
},
{
"fengxiang": "無持續風向",
"fengli": "微風(feng)級(ji)",
"high": "高溫 -3℃",
"type": "多云(yun)",
"low": "低溫 -10℃",
"date": "23日星期三"
}],
"yesterday": {
"fl": "微風",
"fx": "無持續風向",
"high": "高(gao)溫 10℃",
"type": "霾",
"low": "低溫 6℃",
"date": "18日(ri)星期五(wu)"
},
"aqi": "40",
"city": "北京"
}
}
可以(yi)(yi)看出，以(yi)(yi)上返回(hui)的(de)(de)JSON數據(ju)很多，有(you)當天(tian)(tian)的(de)(de)溫度(du)wendu、感冒描述ganmao，還有(you)forecast數組中(zhong)保(bao)存(cun)的(de)(de)最近5天(tian)(tian)的(de)(de)天(tian)(tian)氣(qi)數據(ju)，以(yi)(yi)及yesterday中(zhong)保(bao)存(cun)的(de)(de)昨日天(tian)(tian)氣(qi)數據(ju)。
只需要一個接口(kou)就可獲得詳細的(de)天(tian)氣信(xin)息，因此(ci)，本案例(li)選擇使用該API接口(kou)。
界面設計
本(ben)案例要(yao)求(qiu)界面簡單，盡量(liang)在(zai)一個頁面中顯示(shi)當前天(tian)氣、最近五(wu)天(tian)的天(tian)氣，同時(shi)，還要(yao)提供按城市名(ming)稱查(cha)詢的功能，可(ke)顯示(shi)出所查(cha)詢城市的天(tian)氣預報(bao)信息。UI設計如(ru)圖4所示(shi)。
圖4 UI設計
在圖(tu)4所示(shi)(shi)UI中，上方顯(xian)示(shi)(shi)所查詢(xun)(xun)城(cheng)市的(de)名稱，右側(ce)顯(xian)示(shi)(shi)當前日期。接(jie)著(zhu)(zhu)以較大(da)字號顯(xian)示(shi)(shi)查詢(xun)(xun)城(cheng)市的(de)溫度和感(gan)冒描述。下(xia)方排(pai)著(zhu)(zhu)5個小卡片顯(xian)示(shi)(shi)最近5天(tian)的(de)天(tian)氣(qi)信息(xi)，最下(xia)方接(jie)收(shou)用(yong)戶輸入要(yao)查詢(xun)(xun)的(de)城(cheng)市名稱，單擊(ji)“查詢(xun)(xun)”按(an)鈕即可查詢(xun)(xun)指(zhi)定城(cheng)市的(de)天(tian)氣(qi)預報信息(xi)。
當(dang)剛(gang)打開該(gai)小程序時，由于用戶還沒有輸入(ru)查詢(xun)城市名稱，需要設置一(yi)個默認城市名稱，以方便顯示初(chu)始的天氣預報信息。
編寫界面代碼
選擇好使用的API并(bing)設(she)計好UI界面的布局之后(hou)，就可以創(chuang)建微(wei)信(xin)小(xiao)程序項(xiang)目，并(bing)編寫界面代(dai)碼(ma)和邏輯層的JavaScript代(dai)碼(ma)了。
創建項目
首先按以下(xia)步驟創建出(chu)項目。
（1）創建名為ch11的項目目錄。
（2）啟動微信小程序開發工具，在啟動界面中單擊“添加項目”按鈕，打開如圖5所示的對話框。
（3）在圖5所(suo)示(shi)對(dui)話框(kuang)中填(tian)寫好相應的項目名(ming)稱，并(bing)選(xuan)擇(ze)保(bao)存(cun)項目的目錄，單擊“添加項目”按(an)鈕即可創建好一個項目的框(kuang)架。
圖5 添加項目(mu)
本(ben)項目只有(you)(you)一個頁面(mian)，因(yin)此(ci)也就不需(xu)要再添加其他(ta)頁面(mian)，將index頁面(mian)中已有(you)(you)的內容刪(shan)除，然后再在(zai)index頁面(mian)中編(bian)寫WXML和JS代(dai)碼即可。
（4）修改顯示標題(ti)，打開app.json文(wen)件，修改成以下內容：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微天氣(qi)",
"navigationBarTextStyle":"black"
}
}
編寫界面代碼
根(gen)據(ju)圖(tu)4所示的(de)UI設計，打開index.wxml文件，刪除(chu)該文件原有內容，輸入以下(xia)wxml代碼(ma)。
<view class="content">
<!--顯示當天的天氣信息-->
<view class="info">
<!--城市(shi)名稱 當前日期-->
<view class="city">{{city}} ({{today}})</view>
<!--當天溫(wen)度-->
<view class="temp">{{weather.wendu}}℃</view>
<!--感冒描述-->
<view class="weather">{{weather.ganmao}}</view>
</view>
<!--昨(zuo)天(tian)(tian)的天(tian)(tian)氣(qi)信息-->
<view class="yesterday">
<view class="detail"><text class="yesterday-title">昨天</text>
{{weather.yesterday.date}}</view>
<view class="detail"> {{weather.yesterday.type}} <!--天氣類(lei)型，如陰、晴-->
{{weather.yesterday.fx}} <!--風向-->
{{weather.yesterday.fl}} <!--風力-->
{{weather.yesterday.low}} <!--最低溫(wen)度-->
{{weather.yesterday.high}} <!--最(zui)高溫(wen)度-->
</view>
</view>
<!--最近五天天氣信息-->
<view class="forecast" >
<view class="next-day" wx:key="{{index}}" wx:for="{{weather.forecast}}" >
<!--日期-->
<view class="detail date">{{item.date}}</view>
<!--天氣類(lei)型-->
<view class="detail">{{item.type}}</view>
<!--最高溫度-->
<view class="detail">{{item.high}}</view>
<!--最(zui)低溫度-->
<view class="detail">{{item.low}}</view>
<!--風向-->
<view class="detail">{{item.fengxiang}}</view>
<!--風(feng)力-->
<view class="detail">{{item.fengli}}</view>
</view>
</view>
<!--搜(sou)索-->
<view class="search-area">
<input bindinput="inputing" placeholder="請輸入城(cheng)市名稱"
value="{{inputCity}}" />
<button type="primary" size="mini" bindtap="bindSearch">查詢</button>
</view>
</view>
以上wxml代碼添加了注釋，每(mei)一部分的作(zuo)用都在注釋中進行了描述。
編寫界面樣式代碼
保(bao)存以上wxml代(dai)碼(ma)之后，在開發工具(ju)左(zuo)側的(de)預覽區中并沒有(you)看(kan)到如圖4中的(de)UI效果(guo)。為了(le)(le)達到設(she)計的(de)布(bu)局效果(guo)，需(xu)要(yao)編(bian)寫樣式代(dai)碼(ma)對(dui)wxml組件(jian)進行控制。其實，在上面的(de)wxml代(dai)碼(ma)中，已(yi)經為各組件(jian)設(she)置(zhi)了(le)(le)class屬性，接(jie)下(xia)來只需(xu)要(yao)在index.wxss中針對(dui)每一(yi)個class編(bian)寫相應(ying)的(de)樣式代(dai)碼(ma)即可，具(ju)體代(dai)碼(ma)如下(xia)：
.content{
height: 100%;
width:100%;
display:flex;
flex-direction:column;
font-family: 微(wei)軟雅黑(hei), 宋體;
box-sizing:border-box;
padding:20rpx 10rpx;
color: #252525;
font-size:16px;
background-color:#F2F2F8;
}
/*當天天氣信(xin)息*/
.info{
margin-top:50rpx;
width:100%;
height:160px;
}
/*城市名稱(cheng)*/
.city{
margin: 20rpx;
border-bottom:1px solid #043567;
}
/*當天溫度*/
.temp{
font-size: 120rpx;
line-height: 130rpx;
text-align: center;
padding-top:20rpx;
color:#043567;
}
/*感(gan)冒描述(shu)*/
.weather{
line-height: 22px;
margin: 10px 0;
padding: 0 10px;
}
/*昨天天氣(qi)信息*/
.yesterday{
width:93%;
padding:20rpx;
margin-top:50rpx;
border-radius:10rpx;
border:1px solid #043567;
}
/*昨天(tian)的*/
.yesterday-title{
color:red;
}
/*最近五天天氣信息*/
.forecast{
width: 100%;
display:flex;
margin-top:50rpx;
align-self:flex-end;
}
/*每一天的天氣信(xin)息*/
.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;
}
/*搜索區域*/
.search-area{
display:flex;
background: #f4f4f4;
padding: 1rem 0.5rem;
}
/*搜索區域的輸入(ru)框*/
.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;
}
/*搜索區的按(an)鈕*/
.search-area button{
width: 30%;
height: 40px;
line-height: 40px;
margin-left: 5px;
}
在上面的(de)wxss代碼(ma)中(zhong)，每(mei)一個class設(she)置前都有相應(ying)的(de)注釋，可與wxml代碼(ma)對(dui)應(ying)起來(lai)。
保存(cun)好index.wxss文件(jian)之后，開發工(gong)具(ju)左(zuo)側預覽區可看到如(ru)圖6所示的(de)界面效果(guo)。
圖6 界面效(xiao)果
編寫邏輯層代碼
由(you)于在(zai)index.js中還(huan)沒有設(she)置(zhi)(zhi)初始化數據(ju)，所以(yi)在(zai)圖(tu)6所示界面(mian)中看不(bu)到具體的數據(ju)，從而也導致界面(mian)的效(xiao)果沒達到設(she)置(zhi)(zhi)的要(yao)求。
接下來就編寫(xie)(xie)邏(luo)輯(ji)層代碼(ma)index.js，為了檢查界面(mian)設計效果，首先編寫(xie)(xie)初始(shi)數據(ju)，然(ran)后再逐步深入地編寫(xie)(xie)其他相關業(ye)務邏(luo)輯(ji)代碼(ma)。
編寫數據初始化代碼
在(zai)(zai)index.wxml中(zhong)(zhong)編寫了很(hen)多數據(ju)，因此需要(yao)在(zai)(zai)index.js中(zhong)(zhong)先把這些數據(ju)進行初始化，然后在(zai)(zai)開發(fa)工具的模(mo)擬器中(zhong)(zhong)就(jiu)可預覽(lan)結果。
打(da)開index.js文件，刪除原(yuan)來的內(nei)容，重新編寫以下代碼：
Page({
data: {
weather:{
wendu:18,
ganmao:'晝(zhou)夜溫差較(jiao)大，較(jiao)易發生感冒，請(qing)適當(dang)增減衣服。體質較(jiao)弱(ruo)的朋友請(qing)注意防(fang)護。',
yesterday:{
date:'17日星期四',
type:'陰',
fx:'南風(feng)',
fl:'微風級(ji)',
low:'低溫 8℃',
high:'高(gao)溫 16℃'
},
forecast:[
{
date:'18日(ri)星期五',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南(nan)風',
fengli:'微風級(ji)'
},{
date:'18日星(xing)期五(wu)',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風',
fengli:'微風級'
},{
date:'18日星期(qi)五(wu)',
type:'陰',
high:'高溫 16℃',
low:'低溫 8℃',
fengxiang:'南風',
fengli:'微風級(ji)'
},{
date:'18日星期五',
type:'陰',
high:'高(gao)溫 16℃',
low:'低溫 8℃',
fengxiang:'南(nan)風',
fengli:'微(wei)風級'
},{
date:'18日星期(qi)五',
type:'陰',
high:'高溫 16℃',
low:'低溫(wen) 8℃',
fengxiang:'南風',
fengli:'微風級'
}
]
},
today:'2016-11-18',
city:'北(bei)京', //城(cheng)市名稱
inputCity:'', //輸(shu)入查詢的城(cheng)市名稱
}
})
編寫好以(yi)上(shang)初始化數據之后，保存index.js，在開發工具左側預覽區域可看(kan)到如圖(tu)7所示的界(jie)面效果。
圖(tu)7 界面效果
以上(shang)代碼很長(chang)，主要是由于模擬了5天的天氣數(shu)據，實際上(shang)，在(zai)小程(cheng)序(xu)運行時，應該在(zai)打開(kai)小程(cheng)序(xu)之后就馬(ma)上(shang)通過API獲取天氣數(shu)據，因此上(shang)面(mian)的初(chu)始(shi)化(hua)數(shu)據代碼中(zhong)，只需(xu)要用(yong)以下語句將(jiang)weather初(chu)始(shi)化(hua)為一個空對象(xiang)即可，而上(shang)面(mian)添加在(zai)weather中(zhong)的屬性數(shu)據都可以刪除。
weather:{}
獲取當前位置的城市名稱
根據本(ben)案例的(de)要(yao)求(qiu)，當(dang)用戶打開本(ben)案例之后，首(shou)先(xian)要(yao)獲(huo)取(qu)用戶當(dang)前(qian)所(suo)在城市的(de)天氣信息，這(zhe)就需要(yao)獲(huo)取(qu)用戶當(dang)前(qian)所(suo)在城市的(de)名稱(cheng)。要(yao)完(wan)成(cheng)這(zhe)個功能，需要(yao)經(jing)過幾(ji)個轉(zhuan)折。
首先，可(ke)以使用微(wei)信小(xiao)程序的獲取當前地理(li)位置經緯(wei)度的API（就是(shi)wx. getLocation），通過該API即可(ke)獲取用戶所在位置的經緯(wei)度。
有了用戶所(suo)在的經(jing)緯(wei)度，還需(xu)要查詢(xun)該(gai)經(jing)緯(wei)度對應的城市名稱。這可以(yi)使用百度地圖的接口來(lai)實現，百度地圖Geocoding API服務地址如下：
//api.map.baidu.com/geocoder/v2/
調用該接(jie)口需要(yao)傳(chuan)遞以下幾個參數。
- output：設置接口返回的數據格式為json或者xml。
- ak：這是必須設置的一個參數，是用戶在百度申請注冊的key，自v2開始參數修改為“ak”，之前版本參數為“key”。
- sn：若用戶所用ak的校驗方式為sn校驗時該參數必須啟用。
- callback：一個回調函數，將json格式的返回值通過callback函數返回以實現jsonp功能。
例如，在瀏覽器中輸入以下地址：
//api.map.baidu.com/geocoder/v2/?ak=ASAT5N3tnHIa4APW0SNPeXN5&location=30.572269,104.066541&output=json&pois=0
返回的JSON格式如下(xia)所示：
{
"status": 0,
"result": {
"location": {
"lng": 104.06654099999996,
"lat": 30.572268897395259
},
"formatted_address": "四川省成(cheng)都(dou)市武侯區G4201(成(cheng)都(dou)繞(rao)城高速)",
"business": "",
"addressComponent": {
"country": "中國",
"country_code": 0,
"province": "四川省",
"city": "成都市",
"district": "武(wu)侯區",
"adcode": "510107",
"street": "G4201(成(cheng)都繞城高速)",
"street_number": "",
"direction": "",
"distance": ""
},
"pois": [],
"poiRegions": [],
"sematic_description": "**中心w6區西南108米",
"cityCode": 75
}
}
在(zai)以上JSON數據中，通過(guo)result.addressComponent.city可獲(huo)取傳入經(jing)緯度對應的城(cheng)市名稱(cheng)(cheng)。因此，在(zai)本(ben)案例中可通過(guo)這(zhe)種方式獲(huo)取用戶當前(qian)所在(zai)城(cheng)市的名稱(cheng)(cheng)。
根據(ju)以(yi)上分析，在index.js的onLoad事件處(chu)理函(han)數中編寫如下所(suo)示代碼(ma)：
var util = require('../../utils/util.js');
Page({
data: {
……
},
onLoad: function (options) {
this.setData({
today:util.formatTime(new Date()).split(' ')[0] //更(geng)新當前日期
});
var self = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
wx.request({
url:'//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); //查詢指定城市的天氣信息
}
})
}
})
},
})
以(yi)上代(dai)碼中，第1行(xing)使用(yong)require導入工具(ju)方法(fa)，用(yong)來格式化日期(qi)。
根據城市名稱獲取天氣預報
獲取(qu)了城市名稱(cheng)，接下來就可使用以下接口獲取(qu)指定(ding)城市名稱(cheng)的天氣預報(bao)信息：
//wthrcdn.etouch.cn/weather_mini?city=城市名稱
在上面的接口中，城市名稱中不包含“市”這個字，如“成都市”只需要傳入“成都”。
在本節前面介紹該接口時，只查看了接口執行成功(gong)后返回(hui)的(de)JSON數據，如果傳入的(de)城市名(ming)稱(cheng)有誤(wu)，則返回(hui)如下所示JSON數據：
{
"desc": "invilad-citykey",
"status": 1002
}
在(zai)程序中可通(tong)過status判斷數據(ju)查(cha)詢是否成功。
由于根據城市名稱查詢天(tian)氣預報信息的代碼(ma)需要重(zhong)復調用，因此，單獨編寫成一個函數，方便在查詢時調用。
//根據城市名稱查詢天氣預(yu)報信息
searchWeather:function(cityName){
var self = this;
wx.request({
//天氣預報查詢接口
url: '//wthrcdn.etouch.cn/weather_mini?city='+cityName,
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if(res.data.status == 1002) //無(wu)此(ci)城市
{
//顯示(shi)錯誤信息(xi)
wx.showModal({
title: '提示(shi)',
content: '輸入的城市(shi)名稱(cheng)有(you)誤，請(qing)重新(xin)輸入！',
showCancel:false,
success: function(res) {
self.setData({inputCity:''});
}
})
}else{
var weather = res.data.data; //獲取天(tian)氣數據
for(var i=0;i<weather.forecast.length;i++)
{
var d = weather.forecast[i].date;
//處理(li)日期(qi)信息(xi)，添加空格
weather.forecast[i].date = ' ' + d.replace('星期',' 星期');
}
self.setData({
city:cityName, //更新顯示城市(shi)名稱
weather:weather, //更(geng)新天氣信息
inputCity:'' //清空查詢輸入框(kuang)
})
}
}
})
}
在上(shang)面代碼中(zhong)(zhong)，獲(huo)取的date中(zhong)(zhong)保(bao)存的是“19日(ri)星(xing)期(qi)六”這(zhe)種格(ge)式的字符串(chuan)，為(wei)了使(shi)(shi)日(ri)期(qi)和星(xing)期(qi)分(fen)別顯(xian)示在兩行中(zhong)(zhong)，這(zhe)里使(shi)(shi)用了一種小技巧，就是在日(ri)期(qi)字符串(chuan)中(zhong)(zhong)添加了2個全(quan)角狀態的空(kong)格(ge)，這(zhe)樣在顯(xian)示這(zhe)個字符串(chuan)時(shi)自動斷(duan)行。
編(bian)寫好以上這(zhe)些(xie)代碼之(zhi)后，保存，在開發工具(ju)左側可(ke)看到(dao)已經獲(huo)取當(dang)前的天氣(qi)數據，而不是前面初(chu)始化的數據了，如(ru)圖(tu)8所示。
圖8 用戶所(suo)在地天(tian)氣預報(bao)
這樣，本案例的主要(yao)代碼(ma)就算編(bian)寫完成(cheng)了(le)。不過(guo)，還只能顯(xian)示用戶(hu)當前(qian)所在地的天(tian)氣信(xin)息，如(ru)果要(yao)查看(kan)其(qi)他城市的天(tian)氣，還需要(yao)繼續(xu)編(bian)寫相應(ying)的查詢代碼(ma)。
查詢天氣預報
查詢代碼(ma)(ma)的編(bian)寫(xie)很簡單(dan)，只需要獲(huo)取用戶(hu)輸入(ru)的城市(shi)名稱，然(ran)后傳入(ru)searchWeather函(han)數即可。具體(ti)的代碼(ma)(ma)如下(xia)：
//輸(shu)入事(shi)件(jian)
inputing:function(e){
this.setData({inputCity:e.detail.value});
},
//搜索按鈕(niu)
bindSearch:function(){
this.searchWeather(this.data.inputCity);
}
保(bao)存以上代碼之(zhi)后，在開發工(gong)具左側模(mo)擬器中輸入(ru)查詢的城(cheng)市名稱(cheng)，如輸入(ru)“三亞(ya)”，單擊“查詢”按(an)鈕，界(jie)面中即可顯示“三亞(ya)”的天(tian)氣信息，如圖9所示。
圖9 查詢城市(shi)天(tian)氣
如(ru)果在下(xia)方輸入(ru)框輸入(ru)一個(ge)不存(cun)在的城市名(ming)稱，將(jiang)顯示如(ru)圖11-10所示的提示信息。
圖10 城(cheng)市名稱錯誤的提示
