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

た入场券 2022-12-14 13:58 462阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

> 我们要实现了一个购物商城的小程序，首页是展示一堆商品的列表。一般的实现方法就是在页面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
    
      }
    
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6ec53c8fea6f481eb459b9b046eba875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/b45850e363ec4244ad3e378f4bcaa482.png