微信小程序缓存技术

微信小程序缓存技术，点击播放视频

//request.js
/*封装的网络请求*/
export const request=(params)=>{
    return new Promise((resolve,reject)=>{
     wx.request({
      ...params,
       success: (result)=>{
         resolve(result)
       },
       fail: (error)=>{
         reject(error)
       },
       complete: ()=>{}
     });
    })
}

//index.js文件
/* 引入网络请求模块 */
import { request } from '../../request/request.js';

// pages/category/category.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    cates: [], //分类数据
    leftMenuList: [], //分类左侧菜单数据
    rightContent: [], //分类右侧数据
    currentIndex: 0, //被点击的左侧菜单
  },
  Cates: [], //分类接口的返回值

  /*分类页面数据请求 */
  getCateList() {
    request({
      url:
        'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    }).then((res) => {
      this.Cates = res.data.message; //网络请求结果
      /**将接口数据放到本地Storage中，key为cates，value是一个obj*/
      wx.setStorageSync('cates', {
        time: Date.now(),
        data: this.Cates,
      });
      console.log('数据已放到本地Storage中');
      let leftMenuList = this.Cates.map((n) => n.cat_name); //筛选分类左侧数据
      let rightContent = this.Cates.map(
        (n) => n.children
      )[0]; //筛选分类右侧数据
      /* 设置数据 */
      this.setData({
        leftMenuList,
        rightContent,
      });
    });
  },
  /* 左侧菜单的点击事件 */
  leftItemTap(e) {
    const { index } = e.currentTarget.dataset;
    let rightContent = this.cates.map((n) => n.children)[
      index
    ]; //筛选分类右侧数据
    this.setData({
      currentIndex: index,
      rightContent,
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    /* 设置缓存技术 */
    const Cates = wx.getStorageSync('cates');
    if (!Cates) {
      // 不存在数据，发送请求获取数据
      console.log('本地Storage数据为空，发送网络请求');
      this.getCateList();
    } else {
      // 数据未过期，假设10秒内数据没有过期
      if (Date.now() - Cates.time > 1000 * 10) {
        console.log('数据超过10秒，重新发送请求');
        this.getCateList();
      } else {
        console.log(
          '本地存储有数据，并且没有超过5秒，没有过期，可以使用本地存储的数据'
        );
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(
          (n) => n.cat_name
        ); //筛选分类左侧数据
        let rightContent = this.Cates.map(
          (n) => n.children
        )[0]; //筛选分类右侧数据
        this.setData({
          leftMenuList,
          rightContent,
        });
      }
    }
  },
});

标签：缓存,微信,分类,程序,request,let,rightContent,数据,Cates
来源： https://www.cnblogs.com/wayhome123/p/14350480.html