高仿瑞幸小程序 04 小程序的全局数据

用户头像
曾伟@喵先森
关注
发布于: 2020 年 05 月 09 日
高仿瑞幸小程序 04  小程序的全局数据

今天我们只讲一件事,就是如何在小程序里面使用全局数据。涉及三个方面



1 为什么要使用全局数据

2 怎么存储全局数据

3 怎么读取全局数据



那么,为什么要使用全局数据?我们试想一下,如果有些数据所有界面都要用呢,该怎么办?一个页面一个页面的传会不会太麻烦了?



我们就在首页中尝试着使用一下全局数据。



我们在小程序的项目文件中能看到app.js这个文件。 



这个文件用来干什呢?是用来注册小程序用的,同时小程序的一系列事件都会在这个文件里得到响应。例如小程序初始化了,小程序前后台切换,还有就是可以用来存储一些全局数据。



重要的是,整个小程序只会有一个app.js的实例。这也是为什么它适合用来存储全局数据。

怎么存放呢?我们注意到app.js中有这么一行代码

this.globalData = {}



这行代码的意思是,app的实例中,有个对象叫globalData,我们通常会把全局数据存放在globalData这个对象中。



那么,当我们把全局数据存放到app.js中的话,我们又该如何读取出来呢?

首先,我们能够通过全剧函数getApp()获得app.js的唯一实例。

接着就能通过点语法取出数据了,完整代码差不多就是这个样子。



getApp().globalData.数据



所以整个过程就这么简单,分两步,放进去,取出来。



好,还记得上一节我们讲过的如何计算轮播图的顶边距吗?我们需要得到statusBarHeight和titleBarHeight。那我们现在就把这两个值放入全局数据中。



所以我们把home.js中attached函数中的代码移到app.js中,并将statusBarHeight和titleBarHeight的值赋给globalData。代码如下

this.globalData = {}
wx.getSystemInfo({
  success: (res) => {
    this.globalData.statusBarHeight = res.statusBarHeight
    this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)
  },
  failure() {
    this.globalData.statusBarHeight = 0
    this.globalData.titleBarHeight = 0
  }
})



这完成了第一步,把数据放进去。现在我们把数据取出来。

回到home.js的attached函数中,以下是取出数据的代码



attached() {
this.setData({
  statusBarHeight: app.globalData.statusBarHeight,
  titleBarHeight: app.globalData.titleBarHeight
})
},



我们注意到更新数据用的是this.setData函数。使用这个函数更新数据,绑定数据的界面才会更新。



最后,放上代码的github地址

https://github.com/gogoswift/luckin



发布于: 2020 年 05 月 09 日 阅读数: 151
用户头像

曾伟@喵先森

关注

与码共舞 2018.03.26 加入

我在浪尖浪,哪管它是前浪还是后浪。

评论 (3 条评论)

发布
用户头像
代码可以使用代码块排版~
2020 年 05 月 09 日 15:12
回复
我使用了,是不是<>这个图标按钮?
2020 年 05 月 09 日 15:32
回复
是的~
2020 年 05 月 12 日 13:26
回复
没有更多了
高仿瑞幸小程序 04  小程序的全局数据