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

关注

发布于: 2020 年 05 月 09 日

今天我们只讲一件事，就是如何在小程序里面使用全局数据。涉及三个方面
﻿
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
﻿