在上一篇文章中，咱們把微天氣的數據層的邏輯搭建完成了。這次我們來構建這個小程序的應用層。

數據層開發完成，接下來我們就可以專注應用層的邏輯了。 我們這個小程序不需要修改 app.js 只保留它的默認代碼即可：

 

主要的應用層邏輯都在 index.js 這個頁面上：

 

大體看一下， 也并不復雜。 首先使用 require 語句導入我們上一篇文章中定義的 util.js 文件。 這里面提供了獲取天氣數據的整個邏輯。

然后 Page 對象中， data 數據層定義了天氣數據的結構：

data: {

    weather: {}

 

}

在 onLoad 方法中， 使用 util 中的 loadWeatherData 方法獲取天氣數據并設置到 UI 上：

onLoad: function () {

var that = this;

util.loadWeatherData(function(data){

  that.setData({

    weather: data

  });

});    

 

}

這個邏輯也不難理解，獲取到數據后， 使用 setData 方法將它設置到數據層中。 注意，一定要用 setData 方法。 不能直接用這種屬性賦值形式：

that.data.weather = data

這樣雖然也能設置底層數據，但它不能更新 UI 層的顯示。 這也是微信數據綁定機制的一個原理。 所以大家在操作數據綁定的時候，一定要注意這一點， 否則就會容易造成很麻煩的調試問題。

到此為止， 小程序的應用邏輯部分就完成了。 怎么樣，很簡單吧。 對于應用層這塊的邏輯，主要注意數據綁定和聲明周期相關的內容即可。這兩個地方比較容易產生非預期的結果。 其他地方和我們開發其他程序基本差不多。 關于應用層邏輯，咱們就聊到這里， 下篇再和大家聊聊 UI 層相關的內容。這樣我們就可以對小程序的整個開發過程有一個了解了。

 

二：UI 層

那么咱們繼續， 首先咱們來看一下 index.wxml, 這個頁面中定義了 index 頁面的 UI：

 

首頁的所有 UI 內容就都在這里了， 大家是否還記得咱們這個小程序主界面的樣子？ 貼出來再給大家回顧一下：

這個界面就是上面那段代碼生成的了。 接下來咱們逐一分解。 把上面的完整代碼簡化一下，咱們先來看看整個 UI 的結構：

 

最外層是一個 class 為 container 的 View， 它的里面放了 4 個子 View， 分別為 top， topRegion，summary 和 daily。

top 區域是我們最頂部的地方

來看看 top 的完整定義：

<!-- 

<view class="top">

<view>{{weather.city}}</view>

<view>{{weather.current.formattedDate}}</view>

<view>{{weather.current.formattedTime}} 更新</view>

</view> 

 

-->

里面的 3 個子視圖分別對應了要顯示的幾個數據條目， 并且用一對大括號來引用我們 index.js 中定義的 data 數據中的內容。 關于數據綁定的基本知識咱們在之前的文章中已經介紹過， 如果對數據綁定不熟悉的話還可以參看之前的內容~

然后接下來就是 topRegion, 這個區域也很簡單，顯示我們當前地區的溫度以及天氣情況：

<!-- 

<view class="topRegion">

   <view id="temperature" >{{weather.current.temperature}}℃</view>

   <view id="summary" >{{weather.current.summary}}</view>

</view> 

 

-->

還是簡單的數據綁定， 體現在界面上就是這個區域：

summary 區域的邏輯和前面兩個分別不大， 就不多說了。 最后再來看一下 daily 部分， 這里面用到了一個循環語法：

<!-- 

<view class="daily" >

<view class="daily_item" wx:for="{{weather.daily.data}}">

  <view class="daily_weekday" >{{item.weekday}}</view>

  <view class="daily_temperature" >{{item.temperatureMin}}-{{item.temperatureMax}}℃ </view>      

  <view class="daily_summary" >{{item.summary}}</view>

</view>

</view>

 

-->

它的第一個子視圖使用了 wx:for 這個語法。 這個標記相當于對傳入它的屬性進行一個循環遍歷， 也就是 。 然后這個標簽內部的子標簽會根據集合的數量重復出現，如果要引用每次遍歷到的元素， 可以使用 item， 比如我們這里的 和 等。

這樣，我們最終在界面看到的效果是一個循環遍歷后的結果:

到此為止， index.wxml 的內容咱們就都介紹完了。 但是單純的只有這些還不能構成完整的 UI 界面。 還需要最后一個東西， 那就是 wxss，也就是樣式表。 那么繼續來看幾個例子：

這個是最外層 container 的樣式，它除了可以使用傳統的 css 樣式， 還可以使用微信特有的一些樣式， 比如 display: flex 和 flex-direction: column。 還要注意我們這里用到了一個新的單位 rpx。 這個也是微信自有的特性 - responsive pixel。 它相當于一個自適應尺寸，所有的屏幕寬度都是 750rpx， 我們只需要記得這個特性即可， 其他的微信小程序會根據具體的手機尺寸自行計算相對尺寸。

這里我就撿兩個重要的特點和大家介紹一下。 這個小程序完整的樣式表比較繁瑣。而且都是相似的內容， 就不跟大家過多講解。 如果大家需要了解完整的內容， 還是可以到咱們的 Github 主頁上面下載完整的項目https://github.com/swiftcafex/wechat-weather

結尾

到此為止，用了三篇文章跟大家介紹了一個小程序從構建到開發的完整過過程。 這個天氣小程序邏輯并不復雜，但通過它大家應該可以對整個開發的過程有一個親身的了解。