剑客
关注科技互联网

微天气 – 开发一个完整的微信小程序(中)

继续咱们上次微信小程序的探讨,这次咱们继续讨论这个小程序的应用层部分。

微天气应用层

在上一篇文章中,咱们把微天气的数据层的逻辑搭建完成了。这次我们来构建这个小程序的应用层。上一篇文章的内容可以参考这里:

微天气 – 开发一个完整的微信小程序(上)

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

如果你觉得这篇文章有帮助,还可以关注微信公众号 swift-cafe,会有更多我的原创内容分享给你~

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址