标签：console 登录 res 页面 程序 userInfo 退出 setData wx

小程序实现登录退出

• 最简单的方式
• • WXML页面
  • WXSS页面
  • JS页面
  • 缓存的读和写

最简单的方式

调用wx.getUserProfile()

WXML页面

<view wx:if="{{!userInfo}}">
  <button bindtap="login">获取用户头像昵称</button>
</view>
<view wx:else class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
  <text>{{userInfo.nickName}}</text>
  <button bindtap="logout">退出登录</button>
</view>

WXSS页面

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

.userinfo-avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

JS页面

Page({
  data: {
    userInfo:''
  },
  login(){
    wx.getUserProfile({
      desc: '用于记录用户信息',
      success:res =>{
        console.log(res)
        this.setData({
          userInfo: res.userInfo
        })
      },
      fail:res =>{
        console.log("授权失败！",res)
      }
    })
  },
  logout(){
    this.setData({
      userInfo:''
    })
  }
})

缓存的读和写

wx.setStorageSync()

Page({
  data: {
    userInfo:''
  },
  onl oad() {
    //取缓存
    let userinfo = wx.getStorageSync('userInfo')
    this.setData({
      userInfo:userinfo
    })
  },
  login(){
    wx.getUserProfile({
      desc: '用于记录用户信息',
      success:res =>{
        console.log(res)
        //用户信息缓存到本地
        wx.setStorageSync('userInfo', res.userInfo)
        this.setData({
          userInfo: res.userInfo
        })
      },
      fail:res =>{
        console.log("授权失败！",res)
      }
    })
  },
  logout(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('userInfo', '')
  }
})

标签：console,登录,res,页面,程序,userInfo,退出,setData,wx
来源： https://blog.csdn.net/weixin_59448473/article/details/121513061

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。