微信小程序实现登录功能

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、小程序登录的API

获取用户信息。

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性别 0：未知、1：男、2：女
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
  }
})

会弹出授权（官方要求）
然后获取到的内容给页面的data

2.做缓存维持登录状态

      login(){
        wx.getUserProfile({
            desc: '必须授权登录才可以使用',
         
            success: res=>{
                let user = res.userInfo
                wx.setStorageSync('user', user)
                this.setData({
                    //也可以直接写到wxml里面 这就是另一种登录方式
                    nickName:res.userInfo.nickName,
                    touxiang:res.userInfo.avatarUrl,
                    login:false //记录登录的状态
                })
                wx.setStorage({
                    key:"nologin",
                    data:"false"
                  })//将登录状态在缓存中放一份
            },
            fail: res=>{
                console.log('授权失败',res)
            }
        })
    },

Onload生命周期：只在第一次创建页面时执行

退出登录

我的做法主要时结合了缓存

tuichu:function(){
    let that = this
    wx.showModal({
        title: '提示',
        content: '是否退出登录',
        success (res) {           
          if (res.confirm) {
            wx.removeStorageSync('user')
            wx.removeStorageSync('nologin')//移除这两个缓存也就退出了登录
            that.setData({
                login:true
            })
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
},

如果没登录就隐藏模块

<view class="btn" bindtap="login" wx:if="{{login}}">登录view>

总结

总结：需要做对登录状态的判断 避免重复调用函数来登录 也是保存下登录的状态 保证在自己不主动退出登录的情况下 一直保持登录状态
实现方式 将获取到的信息顺带储存到缓存中（但是微信缓存满10M会自动清理缓存 这种情况还未遇到过 知道的可以告知 多谢）