引言：在智能手機軟體的裝機量中，天氣預報類的app排在比較靠前的位置。說明使用者對天氣的關注度很高。因為人們無論是工作還是度假旅遊等各種活動都需要根據自然天氣來安排。跟着本文開發一個“微天氣”小程式，友善微信網友随時檢視天氣。 接下來兩天小編将同您一起開發一個“微天氣”小程式，本文首先向大家介紹“微天氣”的api與界面代碼編寫。本文選自《從零開始學微信小程式開發》。
在一套軟體系統中，微信小程式通常是作為前端來使用的，一般還需要有後端的系統提供支援，這就需要開發者（或營運者）購買雲伺服器（或有自己的獨立主機），将後端系統部署其上。對于很多初學者來說，這些條件不容易達到。但我們可以選擇使用線上免費api接口，開發者隻需要編寫好前端系統（微信小程式），在前端系統中直接調用這些免費api即可獲得相應的資料。
要開發天氣預報類app，首先要考慮的問題就是天氣預報資料的來源。有了天氣預報的資料來源，才能按需要在微信小程式中顯示出來。其實，微信小程式就是一個顯示天氣資訊的前端系統，而天氣預報api就是後端系統。由于天氣預報api可以在網上免費擷取，是以，本案例中開發者不需要開發後端系統，隻需要根據api的要求進行通路即可。
中華萬年曆的天氣預報接口位址如下：
該接口很簡單，隻需要給出城市的名稱即可，接口傳回的資料也是json格式，具體形式如下所示：
可以看出，以上傳回的json資料很多，有當天的溫度wendu、感冒描述ganmao，還有forecast數組中儲存的最近5天的天氣資料，以及yesterday中儲存的昨日天氣資料。
本案例要求界面簡單，盡量在一個頁面中顯示目前天氣、最近五天的天氣，同時，還要提供按城市名稱查詢的功能，可顯示出所查詢城市的天氣預報資訊。ui設計如下。
在圖中，上方顯示所查詢城市的名稱，右側顯示目前日期。接着以較大字号顯示查詢城市的溫度和感冒描述。下方排着5個小卡片顯示最近5天的天氣資訊，最下方接收使用者輸入要查詢的城市名稱，單擊“查詢”按鈕即可查詢指定城市的天氣預報資訊。
當剛打開該小程式時，由于使用者還沒有輸入查詢城市名稱，需要設定一個預設城市名稱，以友善顯示初始的天氣預報資訊。
選擇好使用的api并設計好ui界面的布局之後，就可以建立微信小程式項目，并編寫界面代碼和邏輯層的javascript代碼了。
根據本書前面各章的案例，首先按以下步驟建立出項目。
（1）建立名為ch11的項目目錄。
（2）啟動微信小程式開發工具，在啟動界面中單擊“添加項目”按鈕，打開如下的對話框。
（3）在上面對話框中填寫好相應的項目名稱，并選擇儲存項目的目錄，單擊“添加項目”按鈕即可建立好一個項目的架構。
本項目隻有一個頁面，是以也就不需要再添加其他頁面，将index頁面中已有的内容删除，然後再在index頁面中編寫wxml和js代碼即可。
（4）修改顯示标題，打開app.json檔案，修改成以下内容：
根據ui設計，打開index.wxml檔案，删除該檔案原有内容，輸入以下wxml代碼。
以上wxml代碼添加了注釋，每一部分的作用都在注釋中進行了描述。
儲存以上wxml代碼之後，在開發工具左側的預覽區中并沒有看到ui設計圖中的ui效果。為了達到設計的布局效果，需要編寫樣式代碼對wxml元件進行控制。其實，在上面的wxml代碼中，已經為各元件設定了class屬性，接下來隻需要在index.wxss中針對每一個class編寫相應的樣式代碼即可，具體代碼如下：
在上面的wxss代碼中，每一個class設定前都有相應的注釋，可與wxml代碼對應起來。
儲存好index.wxss檔案之後，開發工具左側預覽區可看到下面的界面效果。
至此我們介紹了“微天氣”的api與界面代碼編寫，我們将在明天的推送中向您繼續介紹邏輯層代碼以及查詢代碼的編寫。
想及時獲得更多精彩文章，可在微信中搜尋“博文視點”或者掃描下方二維碼并關注。