解决嵌套在小程序中h5页面的缓存问题
针对微信小程序中嵌套的web-view页面缓存清除方案框架技术: vue2方案一(1)方案:动态的给项目中的js和css资源文件加版本号或者时间戳,,在每次更新代码时更新js、css文件名,用户在加载页面时在引入文件名称变化时都会重新请求资源。这样就能实现清除缓存的目的。(2)实现:在vue.config.js文件中增加相关配置,在打包时给生成的js和css文件加上时间戳代码如下:const Ti
·
针对微信小程序中嵌套的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)效果:
在大部分手机上能达到清除缓存的效果,可行。
更多推荐
已为社区贡献1条内容
所有评论(0)