解决嵌套在小程序中h5页面的缓存问题

针对微信小程序中嵌套的web-view页面缓存清除方案
框架技术: vue2
尝试过清除微信缓存,手机缓存,退出重新登陆发现都不起作用

方案一

(1)方案:
动态的给项目中的js和css资源文件加版本号或者时间戳,,在每次更新代码时更新js、css文件名,用户在加载页面时在引入文件名称变化时都会重新请求资源。这样就能实现清除缓存的目的。
(2)实现:
在vue.config.js文件中增加相关配置,在打包时给生成的js和css文件加上时间戳
代码如下:

const Timestamp = new Date().getTime()
module.exports = {
	   configureWebpack: (config) => {
	      config.output.filename = `js/[name].${Timestamp}.js`,
	      config.output.chunkFilename = `js/[name].${Timestamp}.js`
	    }
	  }
}

在这里插入图片描述
(3)效果:
更改h5代码后,再次打开发现并没有清除缓存,效果不理想。

通过百度才知道小程序web-view中的h5页面只有在web-view的引入路径变化时才会重新请求资源,因为小程序是第三方的,所以没办法改变引入路径,所以这个方案不可行

方案二

(1)方案:
在html页面中加入meta标签,强制不缓存资源文件,可以在每次请求时都加载最新的项目资源
(2)实现代码如下:

	<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" />

(3)效果:
在大部分手机上能达到清除缓存的效果,可行。

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值