微信小程序缓存技术

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序缓存技术，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2007字，纯文字阅读大概需要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,
    });
  },

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

内容总结

以上是互联网集市为您收集整理的微信小程序缓存技术全部内容，希望文章能够帮你解决微信小程序缓存技术所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---