小程序缓存问题，h5缓存问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序缓存问题，h5缓存问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

h5的缓存：

通过打包的时候加了配置会自动将静态资源文件后面追加hash数值，这样静态文件发生变化的时候会生成新的hash值，之后每次发包的静态文件路径就是不同的了，所以升级版本就避免了缓存的问题

  h5: {
    publicPath: "/h5",
    staticDirectory: "static",
    esnextModules: ["taro-ui"],
    output: {
      filename: "js/[name].[hash].js",
      chunkFilename: "js/[name].[chunkhash].js",
    },
    imageUrlLoaderOption: {
      limit: 5000,
      name: "static/images/[name].[hash].[ext]",
    },
    miniCssExtractPluginOption: {
      filename: "css/[name].[hash].css",
      chunkFilename: "css/[name].[chunkhash].css",
    }
   }

是小程序跳转h5 时候参数带有时间戳，每次打开都是新的链接

<template>
  <web-view v-if="token" :src="linkUrl"></web-view>
</template>
<script>
export default {
  data() {
    return {
      isLoad: false,
      token: "",
      linkUrl: "",
    };
  },
  watch: {
    token(value) {
      console.log(value, "azhe1"); 
      this.linkUrl = `XXX/h5/#/h5/pages/photo/index?token=${value}&timeStamp=${new Date().getTime()}`;
      this.token = value;
    },
  },
  onShareAppMessage: function() {
    return {
      title: "XXX", // 分享名称
      path: "pages/auth/XXX/webView", // 这里写你这个页面的路径
      // imageUrl: image,
      imageUrl:
        "", //这个是显示的图片，不写就默认当前页面的截图
      success: function(shareTickets) {
        console.log(shareTickets + "成功");
        // 转发成功
      },
      fail: function(res) {
        console.log(res + "失败");
        // 转发失败
      },
      complete: function(res) {
        // 不管成功失败都会执行
      },
    };
  },
  created() {
    if (!this.$store.getters.token) {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    }
    wx.showShareMenu({
      withShareTicket: true,
    });
  },
  onLoad() {
    console.log("load");
  },
  mounted() {
    console.log(this.linkUrl, "haha");
  },
  onShow() {
    if (this.$store.getters.token) {
      this.token = this.$store.getters.token;
      this.linkUrl = `XXX/h5/#/h5/pages/photo/index?token=${value}&timeStamp=${new Date().getTime()}`;
    }
  },
};
</script>

3.通过meta标签清除缓存

 <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

h5和小程序是两个单独部署的，所以互不影响

小程序的缓存：

只有在正式版可以测试，使用 wx.getUpdateManager API进行处理，在有新版本时提示用户重启小程序更新新版本文章来源地址https://www.toymoban.com/news/detail-647885.html

  methods: {
    // 下载小程序最新版本并重启
    downLoadAndUpdate: function(updateManager) {
      wx.showLoading();
      // 静默下载更新小程序新版本，onUpdateReady：当新版本下载完成回调
      updateManager.onUpdateReady(function() {
        wx.hideLoading();
        // applyUpdate：强制当前小程序应用上新版本并重启
        updateManager.applyUpdate();
      });
      // onUpdateFailed：当新版本下载失败回调
      updateManager.onUpdateFailed(function() {
        // 下载新版本失败
        wx.showModal({
          title: "已有新版本",
          content: "新版本已经上线了，请删除当前小程序，重新搜索打开",
        });
      });
    },
    autoUpdate: function() {
      let _this = this;
      // 获取小程序更新机制的兼容，由于更新的功能基础库要1.9.90以上版本才支持，所以此处要做低版本的兼容处理
      if (wx.canIUse("getUpdateManager")) {
        // wx.getUpdateManager接口，可以获知是否有新版本的小程序、新版本是否下载好以及应用新版本的能力，会返回一个UpdateManager实例
        const updateManager = wx.getUpdateManager();
        // 检查小程序是否有新版本发布，onCheckForUpdate：当小程序向后台请求完新版本信息，会通知这个版本告知检查结果
        updateManager.onCheckForUpdate(function(res) {
          // 请求完新版本信息的回调
          if (res.hasUpdate) {
            // 检测到新版本，需要更新，给出提示
            wx.showModal({
              title: "更新提示",
              content: "检测到新版本，是否下载新版本并重启小程序",
              success: function(res) {
                if (res.confirm) {
                  // 用户确定更新小程序，小程序下载和更新静默进行
                  _this.downLoadAndUpdate(updateManager);
                } else if (res.cancel) {
                  // 若用户点击了取消按钮，二次弹窗，强制更新，如果用户选择取消后不需要进行任何操作，则以下内容可忽略
                  wx.showModal({
                    title: "提示",
                    content:
                      "本次版本更新涉及到新功能的添加，旧版本将无法正常使用",
                    showCancel: false, // 隐藏取消按钮
                    confirmText: "确认更新", // 只保留更新按钮
                    success: function(res) {
                      if (res.confirm) {
                        // 下载新版本，重启应用
                        _this.downLoadAndUpdate(updateManager);
                      }
                    },
                  });
                }
              },
            });
          }
        });
      } else {
        // 在最新版本客户端上体验小程序
        wx.showModal({
          title: "提示",
          content:
            "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
        });
      }
    },
  },
onLaunch: function() {
    this.autoUpdate();
  }