微信小程序开发之将用户信息存入缓存

获取用户的头像和昵称

wxml 代码
  <view wx:if="{{!openId}}">       
    <button type="primary" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn">授权登录</button>
       <view wx:else>请升级微信版本</view>
  </view>

<view wx:if="{{openId}}">
  <view class="user">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover" /> 
    <view class="userinfo-nickname">{{userInfo.nickName}}</view> 
    <view class="user-motto">{{motto}}</view>
  </view>
</view>

这里用的是微信小程序提供的wx:if和wx.else来实现按钮和头像昵称的显示和隐藏，判断的标准是是否获得openId.注意：userInfo和openId要事先定义在页面的JS页面中，这样才可以作为判断的依据

这里是用微信开发文档提供的方法获取用户信息
请参考微信开发文档 wx.getUserInfo

一键点击弹出授权询问

bindGetUserInfo(e) {
    const that = this;

    wx.getSetting({
      success(res) {
        if (res.authSetting["scope.userInfo"]) {
          wx.getUserInfo({
            success: function (res) {
              //授权成功 
              //云函数调用
              wx.cloud.callFunction({
                name: "login",
                success: res => {
                  console.log("云函数调用成功");
                  that.setData({
                    openId: res.result.openid,
                    userInfo: e.detail.userInfo
                  }),
                  that.data.userInfo.openId = that.data.openId
                  console.log('userInfo', that.data.userInfo)
                  wx.setStorageSync("userInfo",that.data.userInfo)
                },
                fail: res => {
                  console.log("云函数调用失败");
                }
              })
            }
          })
        }
       
      }
    })
  },

这里因为要获取openid，所以用到了云函数

授权成功之后将获取的userInfo 存到缓存中，这里用到wx.setStorageSync 方法

请参考 wx.setStorageSync

然后在页面的JS中添加

onLoad: function (options) {
//页面加载
    const ui = wx.getStorageSync("userInfo");
    this.setData({
      userInfo: ui,
      openId: ui.openid
    })
  },

这样就可以实现再次登录的时候，不需要再从服务器请求用户数据了