uniapp 利用本地缓存提前渲染界面

我们要实现了一个购物商城的小程序，首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据，等待wx.request的success回调之后把数据通过setData渲染到界面上，如下代码所示。

page.js拉取商品列表数据展示在界面上

Page({

  onLoad: function() {

    var that = this

    wx.request({

      url: 'https://test.com/getproductlist',

      success: function (res) {

        if (res.statusCode === 200) {

          that.setData({

            list: res.data.list

          })

        }

      }

    })

  }

})

设想一下当用户退出小程序再进来，界面仍然会有白屏现象，因为我们需要等待拉取商品列表的请求回来才能渲染商品列表。当然我们还可以再做一些体验上的优化，例如在发请求前，可能我们会在界面上显示一个Loading提示用户在加载中，但是并没有解决这个延迟渲染的现象，这个时候我们可以利用本地缓存来提前渲染界面。

我们在拉取商品列表后把列表存在本地缓存里，在onLoad发起请求前，先检查是否有缓存过列表，如果有的话直接渲染界面，然后等到wx.request的success回调之后再覆盖本地缓存重新渲染新的列表，如下代码所示。

page.js利用本地缓存提前渲染界面

Page({

  onLoad: function() {

    var that = this

    var list =wx.getStorageSync("list")



    if (list) { // 本地如果有缓存列表，提前渲染

      that.setData({

        list: list

      })

    }

    wx.request({

      url: 'https://test.com/getproductlist',

      success: function (res) {

        if (res.statusCode === 200) {

          list = res.data.list

          that.setData({ // 再次渲染列表

            list: list

          })

          wx.setStorageSync("list",list) // 覆盖缓存数据

        }

      }

    })

  }

})

这种做法可以让用户体验你的小程序时感觉加载非常快，但是你还要留意这个做法的缺点，如果小程序对渲染的数据实时性要求非常高的话，用户看到一个旧数据的界面会非常困惑。因此一般在对数据实时性/一致性要求不高的页面采用这个方法来做提前渲染，用以优化小程序体验。

缓存用户登录态SessionId
通常用户在没有主动退出登录前，用户的登录态会一直保持一段时间[10]，就无需用户频繁地输入账号密码。如果我们把SessionId记录在Javascript中某个内存变量，当用户关闭小程序再进来小程序时，之前内存的SessionId已经丢失，此时我们就需要利用本地缓存的能力来持久化存储SessionId。

代码清单4-17 利用本地缓存持久存储用户登录态SessionId

//page.js

var app = getApp()

Page({

  onLoad: function() {

    // 调用wx.login获取微信登录凭证

    wx.login({

      success: function(res) {

        // 拿到微信登录凭证之后去自己服务器换取自己的登录凭证

        wx.request({

          url: 'https://test.com/login',

          data: { code: res.code },

          success: function(res) {

            var data = res.data

            // 把 SessionId 和过期时间放在内存中的全局对象和本地缓存里边

            app.globalData.sessionId =data.sessionId

            wx.setStorageSync('SESSIONID',data.sessionId)



            // 假设登录态保持1天

            var expiredTime = +new Date() +1*24*60*60*1000

            app.globalData.expiredTime =expiredTime

            wx.setStorageSync('EXPIREDTIME',expiredTime)

          }

        })

      }

    })

  }

})

在重新打开小程序的时候，我们把上一次存储的SessionId内容取出来，恢复到内存。

代码清单4-18 利用本地缓存恢复用户登录态SessionId

//app.js

App({

  onLaunch: function(options) {

    var sessionId =wx.getStorageSync('SESSIONID')

    var expiredTime =wx.getStorageSync('EXPIREDTIME')

    var now = +new Date()



    if (now - expiredTime <=1*24*60*60*1000) {

      this.globalData.sessionId = sessionId

      this.globalData.expiredTime = expiredTime

    }

  },

  globalData: {

    sessionId: null,

    expiredTime: 0

  }

})