258资源分享网

一：应用层

在上一篇文章中，咱们把微天气的数据层的逻辑搭建完成了。这次我们来构建这个小程序的应用层。

数据层开发完成，接下来我们就可以专注应用层的逻辑了。 我们这个小程序不需要修改 app.js 只保留它的默认代码即可：

//app.js

App({

onLaunch: function () {

}, 

globalData:{

userInfo:null

}

})

主要的应用层逻辑都在 index.js 这个页面上：

//index.js

//获取应用实例

var util = require('../../util.js')

Page({

data: {

weather: {}

},

onLoad: function () {

var that = this;

util.loadWeatherData(function(data){ 

that.setData({

weather: data

});

});    

}

})

大体看一下， 也并不复杂。 首先使用 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：

<!--index.wxml-->

<!-- 

<view class="container">  

<view class="top">

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

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

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

</view>

<view class="topRegion">

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

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

</view>

<view class="summary" >

<view>一周天气预报</view>

<view style="margin-top:20rpx">{{weather.daily.summary}}</view>

</view>

<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>

</view> 

-->

首页的所有 UI 内容就都在这里了， 大家是否还记得咱们这个小程序主界面的样子？ 贴出来再给大家回顾一下：

这个界面就是上面那段代码生成的了。 接下来咱们逐一分解。 把上面的完整代码简化一下，咱们先来看看整个 UI 的结构：

<!-- 

<view class="container">  

<view class="top">

</view>

<view class="topRegion">

</view>

<view class="summary" >

</view>

<view class="daily" >

</view>

</view>

</view>

-->

最外层是一个 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> 

-->