小程序模板網(wǎng)

“微天氣”微信小程序?qū)崙?zhàn)開發(fā)過程

發(fā)布時(shí)間:2017-12-07 08:54 所屬欄目:小程序開發(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ò)誤的提示


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18069.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢