无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

在上一篇文章中，咱們把微天氣的數(shù)據(jù)層的邏輯搭建完成了。這次我們來構(gòu)建這個小程序的應(yīng)用層。

數(shù)據(jù)層開發(fā)完成，接下來我們就可以專注應(yīng)用層的邏輯了。 我們這個小程序不需要修改 app.js 只保留它的默認(rèn)代碼即可：

主要的應(yīng)用層邏輯都在 index.js 這個頁面上：

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

然后 Page 對象中， data 數(shù)據(jù)層定義了天氣數(shù)據(jù)的結(jié)構(gòu)：

data: {

    weather: {}

}

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

onLoad: function () {

var that = this;

util.loadWeatherData(function(data){

 that.setData({

   weather: data

 });

});    

}

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

that.data.weather = data

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

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

二：UI 層

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

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

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

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

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

來看看 top 的完整定義：

<!-- 

<view class="top">

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

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

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

</view> 

-->

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

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

<!-- 

<view class="topRegion">

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

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

</view> 

-->

還是簡單的數(shù)據(jù)綁定， 體現(xiàn)在界面上就是這個區(qū)域：

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

<!-- 

<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 這個語法。 這個標(biāo)記相當(dāng)于對傳入它的屬性進(jìn)行一個循環(huán)遍歷， 也就是 。 然后這個標(biāo)簽內(nèi)部的子標(biāo)簽會根據(jù)集合的數(shù)量重復(fù)出現(xiàn)，如果要引用每次遍歷到的元素， 可以使用 item， 比如我們這里的 和 等。

這樣，我們最終在界面看到的效果是一個循環(huán)遍歷后的結(jié)果:

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

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

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

結(jié)尾

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