【微信小程序】使用微信API获取用户信息实现登录

实现步骤

1. 通过定义button按钮点击事件，点击登录后触发事件

2. 通过wx.getUserProfile API调用用户信息

3. 获取成功就将数据存储到本地存储中，使用wx.setStorageSync('user', user)

4. 存储完获取本地数据wx.getStorageSync('user')

5. 页面渲染数据 实现登录

wxml页面

  <!--登录-->
  <button  wx:if="{{!userInfo}}" bindtap="login">登录</button>
  <view wx:else class="root">
    <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
    <text class="nicheng">{{userInfo.nickName}}</text>
  </view>


<!--退出登录-->
<view  wx:if="{{userInfo}}">
        <button bindtap="nologin" >
            <text>退出登录</text> 
        </button>
</view>

js页面 

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    // 用户信息
    userInfo:'',
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      
    })

    // 用于获取缓存，进入小程序时调用
    let user=wx.getStorageSync('user')
    this.setData({
      userInfo:user
    })
  },


   // 登录
  login(){
    console.log('点击事件执行了')
    wx.getUserProfile({
      desc: '必须授权才能使用',
      success:res=>{
        let user=res.userInfo
        wx.setStorageSync('user', user)
  console.log('成功',res)
  
  this.setData({
    userInfo:user
  })

  wx.navigateBack({
  })

  },
      fall:res=>{
        console.log('失败',res)
      }
    })
  
  },


  // 退出登录
  nologin(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('user', null)
   }



})

wxss页面

.touxiang {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  margin-left: 40%;
}
.nicheng{
  color:white;
}