uniapp开发公众号H5时用户缓存无法清除问题

业务场景：

此项目是一个vx公众号h5项目，每次更新版的时候用户端由于有缓存，每次都是使用滞后的版本，由此也被许多用户投诉

解决方案：

一、index.html文件如何保证不缓存，每次都使用服务器上最新的代码？

此时需要一下标签：

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

由于自定义了meta标签想要实现自动化打包添加该标签，需要添加自定义html模板

1.新建template.h5.html文件，代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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" /><title><%= htmlWebpackPlugin.options.title %></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

2、在manifest.json=>h5配置=>index.html模板路径添加文件名称： template.h5.html

添加此标签后用户每次请求的都是服务器是上最新版本的html文件，但是不能保证js文件都是最新的，因此还需要第二步

二、保证每次打包后的js文件名和之前的文件名字都不一样，此时找不到文件名就会到服务器请求最新的文件，即可保安每次不会使用缓存文件，需要在vue.config.js文件添加以下代码

let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V1.0.1-'; // 版本号
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {filePath = 'static/js/'TimeStamp = new Date().getTime();process.env.VUE_APP_INDEX_CSS_HASH=`${Version}${TimeStamp}`   //给css文件也使用该时间戳
}module.exports = {configureWebpack: {output: { //重构文件名filename: `${filePath}[name].${Version}${TimeStamp}.js`, // index文件重命名为带有版本号+时间戳的格式chunkFilename: `${filePath}[name].${Version}${TimeStamp}.js` // static/js/pages-home-index.-V1-754654657.js  },},
}

uniapp开发公众号H5时用户缓存无法清除问题相关推荐

uniapp开发-公众号h5、小程序、移动app
uniapp 官网官网:https://uniapp.dcloud.io/ uniapp页面页面布局:flexdisplay.flex-direcoration.align-center.just ...
公众号h5获取手机号权限_微信公众号h5获取用户openId的方法和步骤
微信h5静大享上.是发了概开程态间些告人屏果会区.默.非静默授权获取用户openId的方法和步骤微和二第说,班.都年很过过事发工开宗定据发指互数个遍前互就: 一.openId是什么? openId享. ...
微信公众号h5获取用户openId的方法和步骤
微信h5静默.非静默授权获取用户openId的方法和步骤: 一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是 ...
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
微信公众号开发,一站式踩坑开发前提:例如你们域名是https://www.baidu.com 配置nginx反向代理,把你项目的端口重定向到你们测试环境或线上环境域名 # 访问https://bai ...
uni-app微信公众号H5支付页面
准备工作初始化公众平台测试账号系统. 地址: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 登录后,会得到一个测试公众 ...
uniapp微信公众号H5获取code进行登录
目前在做H5商城,需要公众号的菜单跳进小程序,前端需要获取到公众号的code传给后端来确认用户的openId,但是咱们前端如何通过小程序或者H5,来获取公众号的code呢? 通过查阅资料,我来总结一下 ...
开发公众号H5本地调试重定向登录流程
微信公众号的网页开发授权微信信息,是需要重定向到微信的一个地址,然后重定向返回的,并且重定向返回的地址需要在公众号后台去配置域名,我们想要在本地调试此功能,就需要在本地做一个域名映射来实现: 第一步: ...
uniapp开发公众号视频全屏播放退出以后层级过高
uniapp开发微信公众号视频播放 **问题描述:** 在使用uniapp自带的原生视频标签,遇到点击视频播放以后.在点另外的一个弹出层,发现弹出层被video标签覆盖. ![有时候官网给的tips没 ...
uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放 2
文章目录前言一.废话不多说直接上代码总结前言根据上次发布的文章进一步改善了全屏横屏播放,去除了导航栏,实现伪全屏,但是ios系统不行,只能用自带的全屏按钮,让用户点击. 来点我遇到的问题吧 ...

uniapp开发公众号H5时用户缓存无法清除问题

uniapp开发公众号H5时用户缓存无法清除问题相关推荐

最新文章

热门文章