微信小程序-微天气(中)

微信小程序-微天气(中)

2021-03-12
¥ 0 终身VIP免费 升级终身VIP
下载不了?请联系网站客服提交链接错误!
增值服务: 安装指导 环境配置 二次开发 网站建设 模板修改 源码安装 LOGO设计 图片设计
微信小程序-微天气(中)
最近更新 2021年03月12日
资源编号 12874

微信小程序-微天气(中)

郑重承诺丨总裁主题提供安全交易、信息保真!
增值服务:
安装指导
环境配置
二次开发
网站建设
模板修改
源码安装
¥ 0 (终身VIP免费 升级终身VIP开通VIP尊享优惠特权
立即下载 升级会员 最新活动
详情介绍

微信小程序-微天气(中)

数据层开发完成,接下来我们就可以专注应用层的逻辑了。 我们这个小程序不需要修改 app.js 只保留它的默认代码即可:
  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.   },
  5.   globalData:{
  6.     userInfo:null
  7.   }
  8. })

复制代码

主要的应用层逻辑都在 index.js 这个页面上:
  1. //index.js
  2. //获取应用实例
  3. var util = require(‘../../util.js’)
  4. Page({
  5.   data: {
  6.     weather: {}
  7.   },
  8.   onLoad: function () {
  9.     var that = this;
  10.     util.loadWeatherData(function(data){
  11.       that.setData({
  12.         weather: data
  13.       });
  14.     });
  15.   }
  16. })

复制代码

大体看一下, 也并不复杂。 首先使用 require 语句导入我们上一篇文章中定义的 util.js 文件。 这里面提供了获取天气数据的整个逻辑。
然后 Page 对象中, data 数据层定义了天气数据的结构:
  1. data: {
  2.     weather: {}
  3. }

复制代码

在 onLoad 方法中, 使用 util 中的 loadWeatherData 方法获取天气数据并设置到 UI 上:
  1. onLoad: function () {
  2.         var that = this;
  3.         util.loadWeatherData(function(data){
  4.           that.setData({
  5.             weather: data
  6.           });
  7.         });
  8. }

复制代码

这个逻辑也不难理解,获取到数据后, 使用 setData 方法将它设置到数据层中。 注意,一定要用 setData 方法。 不能直接用这种属性赋值形式:
  1. that.data.weather = data

复制代码

这样虽然也能设置底层数据,但它不能更新 UI 层的显示。 这也是微信数据绑定机制的一个原理。 所以大家在操作数据绑定的时候,一定要注意这一点, 否则就会容易造成很麻烦的调试问题。
到此为止, 小程序的应用逻辑部分就完成了。 怎么样,很简单吧。 对于应用层这块的逻辑,主要注意数据绑定和声明周期相关的内容即可。这两个地方比较容易产生非预期的结果。 其他地方和我们开发其他程序基本差不多。 关于应用层逻辑,咱们就聊到这里, 下篇再和大家聊聊 UI 层相关的内容。这样我们就可以对小程序的整个开发过程有一个了解了。

 

资源下载此资源仅限注册用户下载,请先
客服QQ:3482249445
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

小程序网 小程序 微信小程序-微天气(中) https://www.10000ii.com/12874.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

微信小程序-微天气(中)-海报

分享本文封面