微信小程序中template和缓存的使用

---

1 使用template模板、数据抽取

• 项目的目录
  
• 代码的逻辑流程
  

2 缓存

• 在上面 1 流程的基础上，app.js中添加如下代码，具有缓存作用

第一种

var shopData = require("./demo2/templates/data.js")

App({
  onLaunch: function() {
    // 缓存
    wx.setStorage({
      key: 'newshopList',
      data: shopData.shop,
      success: function(res) {},
      fail: function() {},
      complete: function() {}
    })
  }
})

第二种同步缓存

var shopData = require("./demo2/templates/data.js")

App({

  onLaunch: function() {
    // 同步设置缓存
    var loadShop = wx.getStorageSync('newshopList');
    if(!loadShop){
      //如果缓存不存在
      var dataShop = require("./demo2/templates/data.js")
      wx.clearStorageSync();
      wx.setStorageSync('newshopList', dataShop.shop);
    }
  }
})

3 使用缓存操作类

注释掉 2 中的代码

• 在 上面 1流程基础上，templates文件夹中添加cacheShop.js

class CacheShop {
  constructor() {
    this.shopKey = 'shopListKey'  // 自定义本地缓存键值
  }

  // 获取数据
  GetAllShopData() {
    let res = wx.getStorageSync(this.shopKey)
    if (!res) {
      res = require('./data.js').shop  // 获取数据
      this.SaveShopData(res)
    }
    return res
  }
  
  //保存或更新缓存数据
  SaveShopData(data) {
    wx.setStorageSync(this.shopKey, data)
  }
}

export {
  CacheShop
}

• 更改demo2.js

import { CacheShop } from './templates/cacheShop.js'

Page({

  data: {},
  onLoad: function () {
    let shops = new CacheShop()
    this.setData({
      newshopList: shops.GetAllShopData()
    })
  }
  
})

• 查看缓存效果
  为保证代码缓存的正确性，改变代码，点击清除数据缓存
  

没有直接上代码，下面也是部分代码(没有添加样式抽取） ，可能会看的云里雾里；

如若里面的图片无法保证明白template的 逻辑流程 ，最下面是全部代码压缩包的链接

链接：https://pan.baidu.com/s/1TWXVc05nMA723O1hBOzOlQ
提取码：tzcf