关于前端:微信小程序01授权登录相关

微信小程序登录及受权相干内容

1. 实现点击受权，受权后显示头像，button 暗藏：

1. 点击 button 取得用户信息，显示头像和昵称
2. 取得用户信息后受权 button 不再显示
3. 开启小程序时，查问是否受权过，受权过了间接显示头像昵称，不显示 button

未受权时

获取信息后

2. 点击 button 取得用户信息

`<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="onGetuserinfo"> 获取头像昵称 </button>`

open-type=”getUserInfo” 是 button 自带的属性，点击后能够关上受权对话框：

bindgetuserinfo=”onGetuserinfo” 也是 button 自带的事件，文档：

js 局部：

data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  
onGetuserinfo: function(e) {
    // e 是
    console.log(e);
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

2. 登录时判断是否受权过，并获取 userinfo

onLoad: function() {
    let that = this;
    // 能够通过 wx.getSetting 先查问一下用户是否受权了 "scope.record" 这个 scope
    wx.getSetting({success(res) {console.log('getsetting', res);
        if (res.authSetting['scope.userInfo']) {
          // 必须是在用户曾经受权的状况下调用
          wx.getUserInfo({success: function(res) {
              that.setData({
                hasUserInfo: true,
                canIUse: true,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })
  },