微信小程序getUserProfile，获取头像和昵称实现登录

 我做的是微信小程序getUserProfile登录实现，点击后可以获取微信头像和微信昵称

1.点击

2.点击授权

 

3.获取成功

 下面是代码

HTML代码

<view class="content">

<button bindtap="login" wx:if="{{isshow}}" class="an" >请点击登录</button>

<view class="userinfo" wx:else>

<image src="{{img}}" class="img"></image>

<view class="name">{{name}}</view>

</view>

</view>

css代码

.name{

  font-size: 25px;

}

.an{

background-color: rgb(247, 248, 248);

height: 40px;

top: 40px;

}

.img{

  width: 65px;

  height: 65px;

  display: inline-block;

  border-radius: 50%;

  overflow: hidden;

  border: 1px solid #131212;

  margin-right: 20px;

}

.userinfo{

 top: 10px;

  display: flex;

  flex-direction: row;

  width: 100%;

  height: 100px;

  align-items: center;  

}

.content{

  padding: 0px;

  margin-bottom: 30px;

  height: 100px;

 flex-direction: column;

 background-color: rgb(30, 211, 45);

  }

js代码

Page({

  data: {

    name:"",

    img:"",

    isshow:true,

  },

  login() {

    var that=this

    wx.getUserProfile({

      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (file) => {

        console.log(file.userInfo.nickName)

        console.log(file.userInfo.avatarUrl)

        that.setData({

          img:file.userInfo.avatarUrl,

name:file.userInfo.nickName,

isshow:false,

        })

   

      }

    })

  },

})