微信小程序授权登陆源码

微信小程序授权登陆源码

wxml：

<view class="container">

  <view class="userinfo">
    <block wx:if="{{hasUserInfo}}">
      <button bindtap="auth"> 获取头像昵称 </button>
    <!--   <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> -->
    </block>
    <block wx:else>
      <!-- bindtap="xxx"   可添加绑定事件，在点击头像的时候进行跳转页面 -->
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>

  </view>

</view>

wxss:

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

js:

Page({

  data: {
    userInfo: {},
    hasUserInfo: true,   
   
  },
 
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
   auth(e) {
      wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: false
        })
      }

    })
  },
  
})