• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序缓存技术

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序缓存技术:https://www.bilibili.com/video/BV1nE41117BQ?p=63

/**

  • 思路:
  • 1.先判断本地存储中有没有旧数据
  • 2.没有旧数据,直接发送新请求
  • 3.有旧数据,同时旧数据没有过期,就使用本地存储中的数据
    */
//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,
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: 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,
        });
      }
    }
  },
});

     const billList = uni.getStorageSync(\'bill\') == \'\' ? \'{}\' : uni.getStorageSync(\'bill\');
      const bill = JSON.parse(billList);
      if (bill[r] == undefined) {
        const res = await this.queryResult(day);
        console.log(\'网络请求七天\');
        this.bill[r] = res;
        bill[r] = res;
        uni.setStorageSync(\'bill\', JSON.stringify(bill));
      } else if (bill[r] == \'null\') {
        const res = await this.queryResult(day);
        console.log(\'网络请求七天\');
        this.bill[r] = res;
        bill[r] = res;
        uni.setStorageSync(\'bill\', JSON.stringify(bill));
      } else {
        console.log("缓存中的数据")
        this.bill[r] = bill[r];
      }

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序多图转base64上传发布时间:2022-07-18
下一篇:
微信小程序跳转微信小程序传参发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap