完整微信小程序開發教程實例詳解：微天氣《下》：應用層，UI層 ... ...

時間：2016-10-19 10:12:00

一：應用層

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

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

//app.js
App({
onLaunch: function () {

},
globalData:{
userInfo:null
}
})

主要的應用層邏輯都在 index.js 這個(ge) 頁麵上：

//index.js
//獲取應用實例
var util = require('../../util.js')
Page({
data: {
weather: {}
},
onLoad: function () {
var that = this;
util.loadWeatherData(function(data){
that.setData({
weather: data
});
});
}
})

大體(ti) 看一下，也並不複雜。首先使用 require 語句導入我們(men) 上一篇文章中定義(yi) 的 util.js 文件。這裏麵提供了獲取天氣數據的整個(ge) 邏輯。

然後 Page 對象中， data 數據層定義(yi) 了天氣數據的結構：

data: {

weather: {}

}

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

onLoad: function () {

var that = this;

util.loadWeatherData(function(data){

that.setData({

weather: data

});

}

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

that.data.weather = data

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

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

二：UI 層

那麽(me) 咱們(men) 繼續，首先咱們(men) 來看一下 index.wxml, 這個(ge) 頁麵中定義(yi) 了 index 頁麵的 UI：

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

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

最外層是一個(ge) class 為(wei) container 的 View，它的裏麵放了 4 個(ge) 子 View，分別為(wei) top， topRegion，summary 和 daily。

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

來看看 top 的完整定義(yi) ：

<!--

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

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

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

</view>

-->

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

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

<!--

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

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

</view>

-->

還是簡單的數據綁定，體(ti) 現在界麵上就是這個(ge) 區域：

summary 區域的邏輯和前麵兩(liang) 個(ge) 分別不大，就不多說了。最後再來看一下 daily 部分，這裏麵用到了一個(ge) 循環語法：

<!--

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

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

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

</view>

-->

它的第一個(ge) 子視圖使用了 wx:for 這個(ge) 語法。這個(ge) 標記相當於(yu) 對傳(chuan) 入它的屬性進行一個(ge) 循環遍曆，也就是。然後這個(ge) 標簽內(nei) 部的子標簽會(hui) 根據集合的數量重複出現，如果要引用每次遍曆到的元素，可以使用 item，比如我們(men) 這裏的和等。

這樣，我們(men) 最終在界麵看到的效果是一個(ge) 循環遍曆後的結果:

到此為(wei) 止， index.wxml 的內(nei) 容咱們(men) 就都介紹完了。但是單純的隻有這些還不能構成完整的 UI 界麵。還需要最後一個(ge) 東(dong) 西，那就是 wxss，也就是樣式表。那麽(me) 繼續來看幾個(ge) 例子：

.container {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background-image: url(images/bg.jpg);
background-size: 100%;
padding: 20rpx;
}

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

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