支付宝小程序--登录功能--前台

支付宝小程序–登录功能–前台

实现效果：

前期准备（）：

编写代码：

axml:

  <view class="user-info">
    <image class="user-avatural" src="{{ userInfo.avatar }}"></image>
    <button a:if="{{!isHaveAuth}}" class="user-info-button" open-type="getAuthorize" onGetAuthorize="onGetAuthorize" onError="onAuthError" scope="userInfo" size="mini">
    点击登录
    </button>
    <text a:else>{{userInfo.nickName}}</text>
  </view>

acss:

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #ff7440;
  height: 354rpx;
  padding: 50rpx 0;
  box-sizing: border-box;
}

.user-info .user-avatural {
  width: 169rpx;
  height: 169rpx;
  border-radius: 50%;
}

.user-info-button{
  background-color: #fff; 
  color: #000; 
  font-size: 35rpx;
  line-height: 2.0;
  border-radius: 20rpx;
}

js:

  //点击登录
  onGetAuthorize(res) {
    let that = this; 
    //获取用户信息
    my.getUserInfo((flag, data, userInfo) => {
      console.log(flag, data, userInfo);
      if (flag) {
        that.setData({
          isHaveAuth: true
        });
      };
      that.setData({
        userInfo: userInfo
      });
    });    
  },  

js-model:

  //获取用户信息
  getUserInfo(callBack) {
    let that = this, userInfo = null, authCode = null;
    // 主动授权（弹框）：auth_user，静默授权（不弹框）：auth_base    
    my.getAuthCode({
      scopes: 'auth_user', 
      success: (res) => {
        if(res.authCode){
          authCode = res.authCode;
          // 拿到用户数据、以下方的报文格式解析两层 response  
          my.getOpenUserInfo({
            fail: (res) => {
            },
            success: (res) => {
              userInfo = JSON.parse(res.response).response; 
              typeof callBack == 'function' && callBack(true, authCode, userInfo);            
            }
          });      
        }
      },
    });
  }

uthCode, userInfo);
}
});
}
},
});
}