動手開發一個名為“微天氣”的微信小程序（上）

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

本文選自《從零開始學微信小程序開發》。

　　在一套軟件系統中，微信小程序一般是作為前端來使用的，一般還須要有后端的系統提供支持。這就須要開發人員（或運營者）購買雲server（或有自己的獨立主機），將后端系統部署其上。對於非常多剛開始學習的人來說。這些條件不easy達到。但我們能夠選擇使用在線免費API接口，開發人員僅僅須要編寫好前端系統（微信小程序），在前端系統中直接調用這些免費API就可以獲得對應的數據。

1 天氣預報API

　　要開發天氣預報類APP。首先要考慮的問題就是天氣預報數據的來源。有了天氣預報的數據來源。才干按須要在微信小程序中顯示出來。事實上。微信小程序就是一個顯示天氣信息的前端系統。而天氣預報API就是后端系統。

因為天氣預報API能夠在網上免費獲取，因此。本案例中開發人員不須要開發后端系統，僅僅須要依據API的要求進行訪問就可以。

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

　　中華萬年歷的天氣預報接口地址例如以下：
　　http://wthrcdn.etouch.cn/weather_mini?city=北京
　　該接口非常easy，僅僅須要給出城市的名稱就可以。接口返回的數據也是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天的天氣信息，最下方接收用戶輸入要查詢的城市名稱，單擊“查詢”button就可以查詢指定城市的天氣預報信息。
　　當剛打開該小程序時。因為用戶還沒有輸入查詢城市名稱。須要設置一個默認城市名稱，以方便顯示初始的天氣預報信息。

3 編寫界面代碼

　　選擇好使用的API並設計好UI界面的布局之后，就能夠創建微信小程序項目。並編寫界面代碼和邏輯層的JavaScript代碼了。

1 創建項目

　　依據本書前面各章的案例。首先按下面步驟創建出項目。
（1）創建名為ch11的項目文件夾。

（2）啟動微信小程序開發工具，在啟動界面中單擊“加入項目”button，打開例如以下的對話框。
　　　　　　　　　　　　　　
（3）在上面對話框中填寫好對應的項目名稱，並選擇保存項目的文件夾，單擊“加入項目”button就可以創建好一個項目的框架。
　　本項目僅僅有一個頁面，因此也就不須要再加入其它頁面，將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文件之后，開發工具左側預覽區可看到以下的界面效果。
　　　　　　　　　　　　　　　　　　
　　至此我們介紹了“微天氣”的API與界面代碼編寫，我們將在明天的推送中向您繼續介紹邏輯層代碼以及查詢代碼的編寫。

　　本文選自《從零開始學微信小程序開發》，點此鏈接可在博文視點官網查看此書。

　　　　　　　　　　　　　　　　　　　　
　　想及時獲得很多其它精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼並關注。