高仿瑞幸小程序 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