小程序微信授权登录

最新推荐文章于 2023-12-20 10:32:49 发布

正在秃头的张H

最新推荐文章于 2023-12-20 10:32:49 发布

阅读量212

点赞数

分类专栏：软工课设文章标签：小程序微信

本文链接：https://blog.csdn.net/weixin_46160632/article/details/121617749

版权

微信小程序用户授权登录实现 getUserProfile 数据缓存

关键词由CSDN通过智能技术生成

软工课设专栏收录该内容

5 篇文章 1 订阅

订阅专栏

wxml

<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
 <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
 <text class="nickcheng">{{userInfo.nickName}}</text>
 <button bindtap="loginOut">退出登录</button>
</view>

js

Page({
  // 2021.11.15日新加
  data:{
    userInfo:''
  },
  onLoad(){
    let user=wx.getStorageSync('user')
    console.log('进入小程序的index页面获取缓存',user)
    this.setData({
      userInfo:user
    })
  },
 //授权登录
  login(){
    wx.getUserProfile({
      desc:'必须授权才可以继续使用',
      success:res=>{
        let user=res.userInfo
        //把用户信息进行缓存到本地
        wx.setStorageSync('user', user)
        console.log('用户信息',res.userInfo)
        this.setData({
          userInfo:user
        })
      },
      fail:res=>{
        console.log('授权失败',res)
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('user', null)
  }
})

wxss

.root{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.touxiang{
  width:200rpx;
  height:200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}