微信小程序－微天气（中）_微信小程序小程序模板-微信小程序

欢迎光临，了解微信小程序开发，就上易用通！

微信小程序－微天气（中）

模板分类：小程序模板	模板编号： Y38	源码文件：完全开源	下载权限： VIP会员
模板大小：	模板指数： ℃	更新时间： 2018-01-16 09:31	模板等级： ☆☆☆☆☆

模板截图：

数据层开发完成，接下来我们就可以专注应用层的逻辑了。我们这个小程序不需要修改 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 层相关的内容。这样我们就可以对小程序的整个开发过程有一个了解了。

加入收藏

上一篇：微信小程序－微天气（上）

下一篇：微信小程序－微天气（下）

分享到微信朋友圈