参考:https://www.bilibili.com/video/BV1RK4y1v7zv?p=19&spm_id_from=pageDriver
import { request } from "../../request/index.js"; //必须全路径 Page({ /** * 页面的初始数据 */ data: { leftMenuList:[], rightMenuList:[], //当前选中的菜单索引 currentIndex:0 }, //接口返回数据 Cates:[], /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { /* web 和 微信小程序中的本地存储的区别: 1.读取和设置的时候区别 web: localStorage.setItem("key","value") localStorage.getItem("key") 小程序:wx.setStorageSync("key","value"); wx.getStorageSync("key"); 2.存储的时候区别 web中存储的不管是什么类型的数据,读取的时候都先转换成字符串类型,再存储进去 小程序:不存在数据转换过程 */ //this.getCates(); //加载的时候先判断本地有没有缓存,如果有缓存而且没有过期,就用缓存的数据来加载页面。 //先判断一下本地存储中 有没有旧的数据 //{time:Date.now(),data:[...]} //没有旧数据,直接网络请求 //有旧数据而且没有过期,就使用旧数据加载 const Cates = wx.getStorageSync(\'cates\');//这里的key用cates if(!Cates) {//不存在就请求数据 this.getCates(); } else { if(Date.now() - Cates.time > 60 * 60 * 1000) { this.getCates(); //如果数据缓存超过1小时,重新加载网络数据 } else { this.Cates = Cates.data; console.log("加载数据:"); console.log(this.Cates); //给左侧和右侧数据整理 let leftMenuList = this.Cates.map(v => v.cat_name); let rightMenuList = this.Cates[0].children; //加载页面数据 this.setData({ leftMenuList, rightMenuList }) } } }, getCates() { request({ url:"https://api-hmugo-web.itheima.net/api/public/v1/categories" }) .then (res=> { this.Cates = res.data.message; //把数据存储到本地缓存 wx.setStorageSync(\'cates\', {time:Date.now(),data:this.Cates}); //构造左侧的大菜单数据 let leftMenuList = this.Cates.map(v=>v.cat_name); //构造左侧的大菜单数据 let rightMenuList = this.Cates[0].children; //加载页面数据 this.setData({ leftMenuList, rightMenuList }) }) }, //左侧菜单的点击事件 menuClick(e){ let _index = e.currentTarget.dataset.index; //构造左侧的大菜单数据 let rightMenuList1 = this.Cates[_index].children; //更新数据 this.setData({ rightMenuList: rightMenuList1, currentIndex : _index }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })