在智能手機(jī)軟件的裝機(jī)量中，天氣預(yù)報(bào)類的APP排在比較靠前的位置。說明用戶對天氣的關(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)站對外發(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)

對于城市編碼這個(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ū)域名稱和編碼之間用逗號分隔，而區(qū)域之間用豎線分隔。這樣做的好處是可用Python中的split函數(shù)分隔數(shù)據(jù)，具體方法詳見后面的代碼。

知道城市編碼后，就可通過城市編碼去訪問對應(yīng)的網(wǎng)頁，得到該城市的天氣預(yù)報(bào)數(shù)據(jù)。首先想到的方法當(dāng)然是用wx.request方法打開對應(yīng)的網(wǎng)頁，獲取HTML數(shù)據(jù)，然后進(jìn)行分析。不過，這里對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級",
        "SD": "17%",
        "WSE": "1",
        "time": "17:05",
        "isRadar": "1",
        "Radar": "JC_RADAR_AZ9010_JB",
        "njd": "暫無實(shí)況",
        "qy": "1011",
        "rain": "0"
    }
}

可看出，返回的JSON對象中有一個(gè)weatherinfo對象，其中的各屬性分別表示了天氣預(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級轉(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級轉(zhuǎn)小于3級",
        "fl2": "小于3級",
        "fl3": "小于3級",
        "fl4": "小于3級",
        "fl5": "小于3級",
        "fl6": "小于3級",
        "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=北京

該接口很簡單，只需要給出城市的名稱即可，不像中囯天氣網(wǎng)的接口還需要根據(jù)城市名稱去查詢城市編碼，然后再去訪問接口。接口返回的數(shù)據(jù)也是JSON格式，具體形式如下所示：

{
    "desc": "OK",
    "status": 1000,
    "data": {
        "wendu": "15",
    "ganmao": "晝夜溫差較大，較易發(fā)生感冒，請適當(dāng)增減衣服。體質(zhì)較弱的朋友請注意防護(hù)。",
        "forecast": [{
            "fengxiang": "北風(fēng)",
            "fengli": "3-4級",
            "high": "高溫 14℃",
            "type": "晴",
            "low": "低溫 3℃",
            "date": "19日星期六"
        },
        {
            "fengxiang": "無持續(xù)風(fēng)向",
            "fengli": "微風(fēng)級",
            "high": "高溫 4℃",
            "type": "雨夾雪",
            "low": "低溫 -1℃",
            "date": "20日星期天"
        },
        {
            "fengxiang": "北風(fēng)",
            "fengli": "3-4級",
            "high": "高溫 0℃",
            "type": "小雪",
            "low": "低溫 -7℃",
            "date": "21日星期一"
        },
        {
            "fengxiang": "北風(fēng)",
            "fengli": "3-4級",
            "high": "高溫 -3℃",
            "type": "晴",
            "low": "低溫 -9℃",
            "date": "22日星期二"
        },
        {
            "fengxiang": "無持續(xù)風(fēng)向",
            "fengli": "微風(fēng)級",
            "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ì)

本案例要求界面簡單，盡量在一個(gè)頁面中顯示當(dāng)前天氣、最近五天的天氣，同時(shí)，還要提供按城市名稱查詢的功能，可顯示出所查詢城市的天氣預(yù)報(bào)信息。UI設(shè)計(jì)如圖4所示。

圖4 UI設(shè)計(jì)

在圖4所示UI中，上方顯示所查詢城市的名稱，右側(cè)顯示當(dāng)前日期。接著以較大字號顯示查詢城市的溫度和感冒描述。下方排著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所示的對話框。 
（3）在圖5所示對話框中填寫好相應(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="請輸入城市名稱" 
        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ì)的布局效果，需要編寫樣式代碼對wxml組件進(jìn)行控制。其實(shí)，在上面的wxml代碼中，已經(jīng)為各組件設(shè)置了class屬性，接下來只需要在index.wxss中針對每一個(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代碼對應(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ā)生感冒，請適當(dāng)增減衣服。體質(zhì)較弱的朋友請注意防護(hù)。',
      yesterday:{
        date:'17日星期四',
        type:'陰',
        fx:'南風(fēng)',
        fl:'微風(fēng)級',
        low:'低溫 8℃',
        high:'高溫 16℃'
      },
      forecast:[
        {
          date:'18日星期五',
          type:'陰',
          high:'高溫 16℃',
          low:'低溫 8℃',
          fengxiang:'南風(fēng)',
          fengli:'微風(fēng)級'
        },{
          date:'18日星期五',
          type:'陰',
          high:'高溫 16℃',
          low:'低溫 8℃',
          fengxiang:'南風(fēng)',
          fengli:'微風(fēng)級'
        },{
          date:'18日星期五',
          type:'陰',
          high:'高溫 16℃',
          low:'低溫 8℃',
          fengxiang:'南風(fēng)',
          fengli:'微風(fēng)級'
        },{
          date:'18日星期五',
          type:'陰',
          high:'高溫 16℃',
          low:'低溫 8℃',
          fengxiang:'南風(fēng)',
          fengli:'微風(fēng)級'
        },{
          date:'18日星期五',
          type:'陰',
          high:'高溫 16℃',
          low:'低溫 8℃',
          fengxiang:'南風(fēng)',
          fengli:'微風(fēng)級'
        }
      ]
    },
    today:'2016-11-18',
    city:'北京',    //城市名稱
    inputCity:'', //輸入查詢的城市名稱
  }
})

編寫好以上初始化數(shù)據(jù)之后，保存index.js，在開發(fā)工具左側(cè)預(yù)覽區(qū)域可看到如圖7所示的界面效果。

圖7 界面效果

以上代碼很長，主要是由于模擬了5天的天氣數(shù)據(jù)，實(shí)際上，在小程序運(yùn)行時(shí)，應(yīng)該在打開小程序之后就馬上通過API獲取天氣數(shù)據(jù)，因此上面的初始化數(shù)據(jù)代碼中，只需要用以下語句將weather初始化為一個(gè)空對象即可，而上面添加在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)緯度，還需要查詢該經(jīng)緯度對應(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ù)，是用戶在百度申請注冊的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)緯度對應(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: '輸入的城市名稱有誤，請重新輸入！',
              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)

查詢代碼的編寫很簡單，只需要獲取用戶輸入的城市名稱，然后傳入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ò)誤的提示