引言：在智慧手機軟體的裝機量中，天氣預報類的APP排在比較靠前的位置。說明使用者對天氣的關注度很高。因為人們無論是工作還是度假旅遊等各種活動都需要根據自然天氣來安排。跟著本文開發一個“微天氣”小程式，方便微信網友隨時檢視天氣。接下來兩天小編將同您一起開發一個“微天氣”小程式，本文首先向大家介紹“微天氣”的API與介面程式碼編寫。本文選自《從零開始學微信小程式開發》。

　　在一套軟體系統中，微信小程式通常是作為前端來使用的，一般還需要有後端的系統提供支援，這就需要開發者（或運營者）購買雲伺服器（或有自己的獨立主機），將後端系統部署其上。對於很多初學者來說，這些條件不容易達到。但我們可以選擇使用線上免費API介面，開發者只需要編寫好前端系統（微信小程式），在前端系統中直接呼叫這些免費API即可獲得相應的資料。

1 天氣預報API

　　要開發天氣預報類APP，首先要考慮的問題就是天氣預報資料的來源。有了天氣預報的資料來源，才能按需要在微信小程式中顯示出來。其實，微信小程式就是一個顯示天氣資訊的前端系統，而天氣預報API就是後端系統。由於天氣預報API可以在網上免費獲取，因此，本案例中開發者不需要開發後端系統，只需要根據API的要求進行訪問即可。

中華萬年曆的天氣預報介面

{    "desc": "OK",    "status": 1000,    "data": {        "wendu": "15",    "ganmao": "晝夜溫差較大，較易發生感冒，請適當增減衣服。體質較弱的朋友請注意防護。"
 
,        "forecast": [{            "fengxiang": "北風",            "fengli": "3-4級",            "high": "高溫 14℃",            "type": "晴",            "low": "低溫 3℃",            "date": "19日星期六"        },        {            "fengxiang": "無持續風向",            "fengli": "微風級",            "high": "高溫 4℃",            "type"
 
: "雨夾雪",            "low": "低溫 -1℃",            "date": "20日星期天"        },        {            "fengxiang": "北風",            "fengli": "3-4級",            "high": "高溫 0℃",            "type": "小雪",            "low": "低溫 -7℃",            "date": "21日星期一"        },        {            "fengxiang": "北風",            "fengli": "3-4級",            "high": "高溫 -3℃",            "type": "晴",            "low": "低溫 -9℃",            "date": "22日星期二"        },        {            "fengxiang": "無持續風向",            "fengli": "微風級",            "high": "高溫 -3℃",            "type": "多雲",            "low": "低溫 -10℃",            "date": "23日星期三"        }],        "yesterday": {            "fl": "微風",            "fx": "無持續風向",            "high": "高溫 10℃",            "type": "霾",            "low": "低溫 6℃",            "date": "18日星期五"        },        "aqi": "40",        "city": "北京"    }}

　　可以看出，以上返回的JSON資料很多，有當天的溫度wendu、感冒描述ganmao，還有forecast陣列中儲存的最近5天的天氣資料，以及yesterday中儲存的昨日天氣資料。

2 介面設計

　　本案例要求介面簡單，儘量在一個頁面中顯示當前天氣、最近五天的天氣，同時，還要提供按城市名稱查詢的功能，可顯示出所查詢城市的天氣預報資訊。UI設計如下。　　　　　　　　　　　　　　　　　　　　在圖中，上方顯示所查詢城市的名稱，右側顯示當前日期。接著以較大字號顯示查詢城市的溫度和感冒描述。下方排著5個小卡片顯示最近5天的天氣資訊，最下方接收使用者輸入要查詢的城市名稱，單擊“查詢”按鈕即可查詢指定城市的天氣預報資訊。　　當剛開啟該小程式時，由於使用者還沒有輸入查詢城市名稱，需要設定一個預設城市名稱，以方便顯示初始的天氣預報資訊。

3 編寫介面程式碼

　　選擇好使用的API並設計好UI介面的佈局之後，就可以建立微信小程式專案，並編寫介面程式碼和邏輯層的JavaScript程式碼了。

1 建立專案

　　根據本書前面各章的案例，首先按以下步驟創建出專案。（1）建立名為ch11的專案目錄。（2）啟動微信小程式開發工具，在啟動介面中單擊“新增專案”按鈕，開啟如下的對話方塊。　　　　　　　　　　　　　　（3）在上面對話方塊中填寫好相應的專案名稱，並選擇儲存專案的目錄，單擊“新增專案”按鈕即可建立好一個專案的框架。　　本專案只有一個頁面，因此也就不需要再新增其他頁面，將index頁面中已有的內容刪除，然後再在index頁面中編寫wxml和js程式碼即可。（4）修改顯示標題，開啟app.json檔案，修改成以下內容：

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

2 編寫介面程式碼

　　根據UI設計，開啟index.wxml檔案，刪除該檔案原有內容，輸入以下wxml程式碼。

<view class="content">  <!--顯示當天的天氣資訊--><viewclass="info"><!--城市名稱 當前日期--><viewclass="city">{{city}} ({{today}})</view><!--當天溫度--><viewclass="temp">{{weather.wendu}}℃</view><!--感冒描述--><viewclass="weather">{{weather.ganmao}}</view></view><!--昨天的天氣資訊--><viewclass="yesterday"><viewclass="detail"><textclass="yesterday-title">昨天</text>{{weather.yesterday.date}}</view><viewclass="detail">{{weather.yesterday.type}}<!--天氣型別，如陰、晴-->{{weather.yesterday.fx}}<!--風向-->{{weather.yesterday.fl}}<!--風力-->{{weather.yesterday.low}}<!--最低溫度-->{{weather.yesterday.high}}<!--最高溫度--></view></view><!--最近五天天氣資訊--><viewclass="forecast" ><viewclass="next-day"wx:key="{{index}}"wx:for="{{weather.forecast}}" ><!--日期--><viewclass="detail date">{{item.date}}</view><!--天氣型別--><viewclass="detail">{{item.type}}</view><!--最高溫度--><viewclass="detail">{{item.high}}</view><!--最低溫度--><viewclass="detail">{{item.low}}</view><!--風向--><viewclass="detail">{{item.fengxiang}}</view><!--風力--><viewclass="detail">{{item.fengli}}</view></view></view><!--搜尋--><viewclass="search-area"><inputbindinput="inputing"placeholder="請輸入城市名稱"value="{{inputCity}}"  /><buttontype="primary"size="mini"bindtap="bindSearch">查詢</button></view></view>

　　以上wxml程式碼添加了註釋，每一部分的作用都在註釋中進行了描述。

3 編寫介面樣式程式碼

　　儲存以上wxml程式碼之後，在開發工具左側的預覽區中並沒有看到UI設計圖中的UI效果。為了達到設計的佈局效果，需要編寫樣式程式碼對wxml元件進行控制。其實，在上面的wxml程式碼中，已經為各元件設定了class屬性，接下來只需要在index.wxss中針對每一個class編寫相應的樣式程式碼即可，具體程式碼如下：

.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;}/*當天天氣資訊*/.info{  margin-top:50rpx;  width:100%;  height:160px;}/*城市名稱*/.city{  margin: 20rpx;  border-bottom:1px solid #043567;}/*當天溫度*/.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;}/*搜尋區域*/.search-area{    display:flex;    background: #f4f4f4;    padding: 1rem 0.5rem;}/*搜尋區域的輸入框*/.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;}/*搜尋區的按鈕*/.search-area button{   width: 30%;    height: 40px;    line-height: 40px;    margin-left: 5px;}

　　在上面的wxss程式碼中，每一個class設定前都有相應的註釋，可與wxml程式碼對應起來。　　儲存好index.wxss檔案之後，開發工具左側預覽區可看到下面的介面效果。　　　　　　　　　　　　　　　　　　　　至此我們介紹了“微天氣”的API與介面程式碼編寫，我們將在明天的推送中向您繼續介紹邏輯層程式碼以及查詢程式碼的編寫。　　本文選自《從零開始學微信小程式開發》，點此連結可在博文視點官網檢視此書。　　　　　　　　　　　　　　　　　　　　　　想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼並關注。