小程序开发中的数据流向分析

我们知道无论什么样的软件或网站，其根本的目的就是处理数据，在没有框架的基础上，我们需要自己把控数据的流向，所以我们对此非常的清晰。但是在没有框架的基础上开发我们的软件是非常耗时的，因此明确框架的数据流向就变的异常重要。本片博客将介绍小程序中登录功能的数据流向。掌握了基本的数据流向 其他的功能肯定不在话下

拿小程序官方提供的登录功能作为实例分析。

1. 刚开始的界面 需要点击获取头像昵称信息
   
2. 点击之后会触发小程序小程序自定义的属性 bindgetuserinfo属性值（getUserInfo 这里的是函数名字下面的open-type对应的是数据类型）所对应的函数进而向本地获取用户的头像昵称等非隐私信息，且必须写open-type其属性值是getUserInfo
   
3. index.wxml 从其中我们可以看出我们需要以下的数据
   
4. index.js中的getUserInfo函数

getUserInfo: function(e) {
    console.log(e)
    console.log("sofency")
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

解释：
e:该参数是携带返回值的对象，很神奇的 该功能掩盖了如何获取的过程 我们只需要调用就可以。
e.detail.UserInfo e 输出的数据如下，而我们需要的数据在detail下的UserInfo中


app.globalData.userinfo 将首次登陆的数据存放在全局数据中该数据存储app.js中

这里说一下为什么要设置全局数据，在没有全局数据时，进行页面的跳转时，再返回到当前页面时，index.wxml就要重新从网络中加载index.js中data里面的数据，这是肯定不行，非常的耗时间。那么就有了全局数据的概念，我们第一次获取数据后存储到全局数据中，那么我们下次再获取数据的时候先看看全局数据里面有木有，没有的话再从网络中进行加载。
就好比之前买一个东西要跑100公里去买，现在有一个人在你家门口开了一个超市，你买东西就很方便了

this.setData({
userInfo: e.detail.userInfo, 将数据给本页面里面的userinfo属性值
hasUserInfo: true 设置为有数据
})

index.js中的数据 将上面将数据传送过来 那么此时的hasUserInfo就有了数据

页面数据的加载函数onload: 而不是针对点击获取头像的响应函数

最后的那个原因写错了 只针对 之前的版本可能没有open-type属性 即根据按钮判断是否允许获取数据

5. 你可能会对onload下面的这个函数有疑问都是获取信息感觉重复 实际上并没有，关于
   
   我测试了他们执行的顺序
   先执行页面的onload函数 再执行login 最后执行getSetting
   那么getSetting是干什么的，getSetting是申请授权的，即我们想要获取用户的信息我们就要将获取用户信息的设置打开（在小程序官方文档中介绍说获取用户的头像信息或自动授权 不再弹出授权信息，除非需要打开其他需要的设置时才会弹出授权界面）