動(dòng)手開(kāi)發(fā)一個(gè)名為“微天氣”的微信小程序（上）

引言：在智能手機(jī)軟件的裝機(jī)量中，天氣預(yù)報(bào)類的APP排在比較靠前的位置。說(shuō)明用戶對(duì)天氣的關(guān)注度很高。因?yàn)槿藗儫o(wú)論是工作還是度假旅游等各種活動(dòng)都需要根據(jù)自然天氣來(lái)安排。跟著本文開(kāi)發(fā)一個(gè)“微天氣”小程序，方便微信網(wǎng)友隨時(shí)查看天氣。
接下來(lái)兩天小編將同您一起開(kāi)發(fā)一個(gè)“微天氣”小程序，本文首先向大家介紹“微天氣”的API與界面代碼編寫。本文選自《從零開(kāi)始學(xué)微信小程序開(kāi)發(fā)》。

　　在一套軟件系統(tǒng)中，微信小程序通常是作為前端來(lái)使用的，一般還需要有后端的系統(tǒng)提供支持，這就需要開(kāi)發(fā)者（或運(yùn)營(yíng)者）購(gòu)買云服務(wù)器（或有自己的獨(dú)立主機(jī)），將后端系統(tǒng)部署其上。對(duì)于很多初學(xué)者來(lái)說(shuō)，這些條件不容易達(dá)到。但我們可以選擇使用在線免費(fèi)API接口，開(kāi)發(fā)者只需要編寫好前端系統(tǒng)（微信小程序），在前端系統(tǒng)中直接調(diào)用這些免費(fèi)API即可獲得相應(yīng)的數(shù)據(jù)。

1 天氣預(yù)報(bào)API

　　要開(kāi)發(fā)天氣預(yù)報(bào)類APP，首先要考慮的問(wèn)題就是天氣預(yù)報(bào)數(shù)據(jù)的來(lái)源。有了天氣預(yù)報(bào)的數(shù)據(jù)來(lái)源，才能按需要在微信小程序中顯示出來(lái)。其實(shí)，微信小程序就是一個(gè)顯示天氣信息的前端系統(tǒng)，而天氣預(yù)報(bào)API就是后端系統(tǒng)。由于天氣預(yù)報(bào)API可以在網(wǎng)上免費(fèi)獲取，因此，本案例中開(kāi)發(fā)者不需要開(kāi)發(fā)后端系統(tǒng)，只需要根據(jù)API的要求進(jìn)行訪問(wèn)即可。

中華萬(wàn)年歷的天氣預(yù)報(bào)接口

　　中華萬(wàn)年歷的天氣預(yù)報(bào)接口地址如下：
　　http://wthrcdn.etouch.cn/weather_mini?city=北京
　　該接口很簡(jiǎn)單，只需要給出城市的名稱即可，接口返回的數(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": "無(wú)持續(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": "無(wú)持續(xù)風(fēng)向",            "fengli": "微風(fēng)級(jí)",            "high": "高溫 -3℃",            "type": "多云",            "low": "低溫 -10℃",            "date": "23日星期三"
        }],        "yesterday": {            "fl": "微風(fēng)",            "fx": "無(wú)持續(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ù)。

2 界面設(shè)計(jì)

　　本案例要求界面簡(jiǎn)單，盡量在一個(gè)頁(yè)面中顯示當(dāng)前天氣、最近五天的天氣，同時(shí)，還要提供按城市名稱查詢的功能，可顯示出所查詢城市的天氣預(yù)報(bào)信息。UI設(shè)計(jì)如下。
　　　　　　　　　　　　　　　　　　
　　在圖中，上方顯示所查詢城市的名稱，右側(cè)顯示當(dāng)前日期。接著以較大字號(hào)顯示查詢城市的溫度和感冒描述。下方排著5個(gè)小卡片顯示最近5天的天氣信息，最下方接收用戶輸入要查詢的城市名稱，單擊“查詢”按鈕即可查詢指定城市的天氣預(yù)報(bào)信息。
　　當(dāng)剛打開(kāi)該小程序時(shí)，由于用戶還沒(méi)有輸入查詢城市名稱，需要設(shè)置一個(gè)默認(rèn)城市名稱，以方便顯示初始的天氣預(yù)報(bào)信息。

3 編寫界面代碼

　　選擇好使用的API并設(shè)計(jì)好UI界面的布局之后，就可以創(chuàng)建微信小程序項(xiàng)目，并編寫界面代碼和邏輯層的JavaScript代碼了。

1 創(chuàng)建項(xiàng)目

　　根據(jù)本書前面各章的案例，首先按以下步驟創(chuàng)建出項(xiàng)目。
（1）創(chuàng)建名為ch21的項(xiàng)目目錄。
（2）啟動(dòng)微信小程序開(kāi)發(fā)工具，在啟動(dòng)界面中單擊“添加項(xiàng)目”按鈕，打開(kāi)如下的對(duì)話框。
　　　　　　　　　　　　　　
（3）在上面對(duì)話框中填寫好相應(yīng)的項(xiàng)目名稱，并選擇保存項(xiàng)目的目錄，單擊“添加項(xiàng)目”按鈕即可創(chuàng)建好一個(gè)項(xiàng)目的框架。
　　本項(xiàng)目只有一個(gè)頁(yè)面，因此也就不需要再添加其他頁(yè)面，將index頁(yè)面中已有的內(nèi)容刪除，然后再在index頁(yè)面中編寫wxml和js代碼即可。
（4）修改顯示標(biāo)題，打開(kāi)app.json文件，修改成以下內(nèi)容：

{  "pages":[    "pages/index/index",    "pages/logs/logs"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "微天氣",    "navigationBarTextStyle":"black"
  }
}

2 編寫界面代碼

　　根據(jù)UI設(shè)計(jì)，打開(kāi)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)行了描述。

3 編寫界面樣式代碼

　　保存以上wxml代碼之后，在開(kāi)發(fā)工具左側(cè)的預(yù)覽區(qū)中并沒(méi)有看到UI設(shè)計(jì)圖中的UI效果。為了達(dá)到設(shè)計(jì)的布局效果，需要編寫樣式代碼對(duì)wxml組件進(jìn)行控制。其實(shí)，在上面的wxml代碼中，已經(jīng)為各組件設(shè)置了class屬性，接下來(lái)只需要在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)起來(lái)。
　　保存好index.wxss文件之后，開(kāi)發(fā)工具左側(cè)預(yù)覽區(qū)可看到下面的界面效果。
　　　　　　　　　　　　　　　　　　
　　至此我們介紹了“微天氣”的API與界面代碼編寫，我們將在明天的推送中向您繼續(xù)介紹邏輯層代碼以及查詢代碼的編寫。
　　本文選自《從零開(kāi)始學(xué)微信小程序開(kāi)發(fā)》，點(diǎn)此鏈接可在博文視點(diǎn)官網(wǎng)查看此書。
　　　　　　　　　　　　　　　　　　　　
　　想及時(shí)獲得更多精彩文章，可在微信中搜索“博文視點(diǎn)”或者掃描下方二維碼并關(guān)注。