微信小程序授权登录界面

原先用的 wx.getUserInfo(Object object) ，现已改革

现用的 wx.getUserProfile(Object object)，获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。

1 login.js页面

const app = getApp()
//获取应用实例
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true   
      })   
    }
  },
  goto:function(){
  wx.switchTab({
    url:'../pages/index/index'
  })
},
  getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {  
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true,         
        })         
      },   
    })  
  },
  bindGetUserProfile: function (e) {
    if (e.detail.userProfile) {
      //用户按了允许授权按钮
      var that = this;
      // 获取到用户的信息了，打印到控制台上看下
      console.log("用户的信息如下：");
      console.log(e.detail.userProfile);
      //授权成功后,通过改变 hasUserInfo 的值，让实现页面显示出来，把授权页面隐藏起来
      that.setData({
        hasUserInfo: false
      });
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function (res) {
          // 用户没有授权成功，不需要改变 hasUserInfo 的值
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          } }   }); } }})

2 login.wxml

<view class="content">
    <block wx:if="{{!hasUserInfo}}">
        <view class="header">
    <image src='../image/wx_login.png'></image>
        </view>
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 申请获取以下权限</button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> 
    </block>
    <block wx:else>
     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>   
     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      <button class='btn' bindtap="goto" >登录成功 点击跳转</button>
    </block>
  </view>

3 login.wxss

.header {
    margin: 90rpx 0 90rpx 50rpx;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}
.header image {
    width: 200rpx;
    height: 200rpx;
}
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}

.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}
.bottom1{
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}
.btn {
  padding: 0 60rpx;
  margin: 90rpx 0 90rpx 50rpx;
  background-color: #19be6b;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  font-size: 16px;
  top: 10%;
  left: 20%;
  position: relative;
  text-decoration: none;
  height: 44px;
  line-height: 44px;
  box-shadow: inset 0 0 0 1px #19be6b;  
  background: #fff !important;
  color: #19be6b !important;
  display: inline-block;
  border-radius: 10rpx;
}