小程序缓存问题,h5缓存问题

h5的缓存:

  1. 通过打包的时候加了配置 会自动将静态资源文件后面追加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",
    }
   }
  1. 是小程序跳转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进行处理,在有新版本时提示用户重启小程序更新新版本

  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();
  }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值