黯然微信小程序杂记（二）：小程序最新版登录并进行缓存模块的实现 附源码

CSDN私信我，有关微信小程序的事情可以交流讨论，共同学习！

一、功能描述

由于微信官方更改了 getUserInfo、authorize 接口，无法弹出授权窗口，大家可以在微信小程序开发者工具
看到会提示接口过期。所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 组件点击之后触
发登录事件。
本登录模块还实现了用户信息缓存功能。

二、mine.wxml界面图片

登录前：

点击登录后：

三、mine.wxml代码

<view class="container">
  <!--用户信息-->
  <view class="category-item">

    <view class="personal-info">
      <view class="user-avatar">
        <image wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
        <image wx:else src="/icons/wx_app_unline.png"/>
      </view>
      <view class="user-name">
        <view class="user-nickname">
        <text wx:if="{{userInfo}}">{{userInfo.nickName}}</text>
        <button class='in' wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">登录/注册</button>
        </view>
        <view class="user-location">
          <open-data wx:if="{{userInfo}}" type="userCity" lang="zh_CN"></open-data>
        </view>
      </view>
    </view>
   </view>

四、mine.wxss代码

.container {
    background-color: #efeff4;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    min-height: 100vh;
    color:#7F8389;
    font-size:24rpx;
}
.category-item {
    width: 100%;
    margin: 0 0 20rpx 0;
    border-top: 1rpx solid #d9d9d9;
    border-bottom: 1rpx solid #d9d9d9;
    background-color: #fff;
}
/*******************用户和相关操作*************************************/
/*用户*/
.personal-info {
    height: 130rpx;
    display: flex;
    padding: 20rpx 0;
}
.personal-info .user-avatar {
    margin: 0 30rpx;
    width: 130rpx;
    height: 130rpx;
    position: relative;
}
.personal-info .user-avatar image {
    vertical-align: top;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    border-radius: 50%;
}
.personal-info .user-name {
    margin-right: 30rpx;
    flex: 1;
    padding-top: 10rpx;
}
.user-name .user-nickname{
    color:black;
    font-size:36rpx;
}

五、mine.js代码

var app = getApp();
Page({

data: {
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  onLoad: function () {
    if (app.globalData.g_userInfo) {
      this.setData({
        userInfo: app.globalData.g_userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }
  },
  getUserInfo: function (e) {
    console.log("mine.js执行登录按钮事件")
    app.globalData.g_userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
  })

六、app.js代码

//app.js
App({
onLaunch: function () {
  this._getUserInfo();//加载登录函数
},

// 获取用户信息
_getUserInfo: function () {
  var userInfoStorage = wx.getStorageSync('user');//从缓存中取出用户信息
  if (!userInfoStorage) {//如果没有用户信息缓存
    var that = this;
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: res => {
              console.log("app.js调用api获取用户信息");
              that.globalData.g_userInfo = res.userInfo//设置app的全局变量
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
              wx.setStorageSync('user', res.userInfo)//设置用户信息缓存
            },
            fail: function (res) {
              console.log(res);
            }
          })
        }
      }
    })
  }
  else {
    console.log("app.js从缓存中获取用户信息");
    this.globalData.g_userInfo = userInfoStorage;//有用户信息缓存直接取出给全局变量
    
  }
},

globalData: {
  userInfo: null
}
})

七、源码怎么用？

app.js微信小程序是有固定位置的；
mine.wxml、mine.wxss、mine.js只要在同一个目录下就行，目录路径无所谓。
完成登录功能请把以上代码全复制粘贴过去。
本登录功能还实现了微信小程序的缓存功能。不缓存的微信小程序不是个小程序！缓存很重要！

查看下一篇

黯然微信小程序杂记（三）：微信小程序实现倒计时功能 附讲解教学 附源码