微信小程序登录弹框问题

1. getUserInfo

相信刚接触微信小程序开发的人都在想 官方给出的这个是什么意思
我来解释一下吧

还记得我们在最开始使用微信小程序的时候吗? 第一次进一个微信小程序的时候会直接弹出来个框
询问我们是否允许哟用户获取信息,微信官方觉得这样不好,一上来就让客户点击一个不明所以的
允许,很多客户都会不点,用户体验度很差,所以呢,我们的微信官方,将不再允许直接弹框,
而是进入你的小程序后,你可以在首页或者我的里面设置一个`button`组件当客户点击了这个组件
我们就可以使用wx.getUserInfo这个API来获得用户的数据,而这些事情在我们创建小程序时,
微信官方已经帮我们创建好了,就是下面这张图

程序解读:

• 如果(我们的 非 hasUserInfo 并且 CanIUser)
  • 那么设置一个button组件 open-type属性为getUserInfo,并且绑定一个点击事件,
• 否则(我们已经获得了用户信息)
  • 就显示用户的头像和昵称

hasUserInfo是我们设置的一个变量,默认为false,
canIUser也是我们设置的一个变量,默认为 wx.canIUser(‘button.open-type.getUserInfo’)
wx.canIUser(“组件.属性.选择”)是这个API的用法,判断这个组件的属性的选择是否在当前版本可以用,

2.当我们点击这个获取用户信息button时:

我们的getUserInfo函数的参数e就变为下面这个json对象(其实e就是我们button组件)

首先我们将app.js里的globalData的userInfo变量设置为button.detail.userInfo是一个json对象,方便我们在其他页面想使用用户信息用globalData即可
然后把本页面的js里的data里的userInfo也改为用户信息json对象
然后把hasUserInfo置位true, 这个是true了那我们的首页面就变成图片喽,

官方的意思是,如果我们没有经过用户授权,即点击button按钮,是不能使用wx.getUserInfo这个API的,如果使用会直接失败.

• 3.怎么判断用户是否授权

如果getSetting返回的res.authSetting[‘scope.userInfo’] 为true那么就是已经授权
为什么呢因为open-type是个神奇的属性,当我们的用户点击时就能向微信服务器发一个消息,证明授权了.
授权了就可以用wx.getUserInfo了

wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

我们在点击button组件的时候 就会把信息存好,但是,为啥我们的app.js里还要用getSetting吗,因为我们一旦退出小程序,那么我们的的app.js或者index.js都会恢复,然后我们在进来的时候,已经授权了,所以我们可以直接取获取用户信息了.
不得不说这个功能真的是让人头痛.绕了一大圈子