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

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

1 天氣預報API

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

中華萬年歷的天氣預報接口

　　中華萬年歷的天氣預報接口地址如下：
　　wthrcdn.etouch.cn/weather_mini?city=北京
　　該接口很簡單，只需要給出城市的名稱即可，接口返回的數據也是JSON格式，具體形式如下所示：

{    "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">
  <!--顯示當天的天氣信息-->
  <view class="info">
    <!--城市名稱 當前日期-->
    <view class="city">{{city}} ({{today}})</view>
    <!--當天溫度-->
    <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}}  <!--風向-->
        {{weather.yesterday.fl}}  <!--風力-->
        {{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>
      <!--風向-->
      <view class="detail">{{item.fengxiang}}</view>
      <!--風力-->
      <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代碼添加了注釋，每一部分的作用都在注釋中進行了描述。

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文件之后，開發工具左側預覽區可看到下面的界面效果。

以上就是微信小程序開發之“微天氣”教程（一）的詳細內容，更多請關注php中文網其它相關文章！