微信小程序webview缓存处理

缓存问题

大家都知道，浏览器缓存是个非常有用的特性，它能够提升性能、减少延迟，还可以减少带宽、降低网络负荷。关于浏览器的缓存机制可以总结成下面 2 句话：

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

更进一步，我们可以粗略了解一下强制缓存和协商缓存的运行机理。若强制缓存（Expires 和 Cache-Control）生效则直接使用缓存，若不生效则进行协商缓存（Last-Modified/If-Modified-Since 和 Etag/If-None-Match），协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回 200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回 304，继续使用缓存。这段文字是想让读者拓展一下知识面，如果想要更输入了解，可以通过上面的一些关键字（强缓存、协商缓存、Expire、Cache-Control 等）去查找更详细的资料。

微信的 web-view 组件就是一个嵌在小程序里的浏览器，它在缓存上并没有完全遵照上述的规则，也即它的缓存并不能及时得到清理。想必下面的操作大家都有尝试过：

手动退出小程序，再次进入；
将微信从后台退出再打开并重新进入小程序；
修改 Nginx 关于 Cache-Control 的配置；
用 debugx5.qq.com 手动清除安卓微信浏览器缓存；
iOS 利用微信自带清楚缓存功能。

无法及时刷新缓存会导致发布了最新的页面，而小程序里仍然是以前的页面，从而会带来许多问题，如前后端的数据不一致，新的特性无法及时起作用，修改的问题没有得到解决等等。这里需要说明一下：web-view 在过一段时间（时间不定，一天或者几小时，无明显规律）是可以进行缓存刷新的，而本 Chat 要解决的是及时刷新的问题。

解决问题

解决思路

浏览器访问资源是通过 URL 地址，如果内嵌 H5 的地址不发生变化，那么 web-view 访问资源会从缓存里取，而缓存里并没有最新的数据，这就导致了服务端的最新资源根本无法到达浏览器，这也就解释了为什么修改 Nginx 的 Cache-Control 配置也无法生效的原因。所以，要想彻底解决及时刷新，必须让 web-view 去访问新的地址。我们假定小程序访问的 URL 地址为：

https://www.yourdomain.com/101/#/index

其中 101 就是构建的一个版本号，每次递增，保证次次不同即可。

小程序获取最新版本号

在小程序中，我们利用 app 的 onShow 钩子函数 [1] 来完成最新的 URL 获取，同时还要保证只有获取了版本号之后才能加载其他的页面，因此这里要用到同步接口调用 [2]。请参考下面代码：

//这里加入同步请求到服务器获取最新路径
onShow: function (options) {this.getFEVersion()
},
getFEVersion: function () {//下面是利用Promise进行同步调用的写法return new Promise(function (resolve, reject) {wx.request({//下面是本机调试的一个地址，上线时请改成自己服务端的地址url: 'http://192.168.0.168:8090/getFEVersion',data: {},method: 'POST',header: {'content-type': 'application/json',},success: function (res) {if (res.data.success) {const app = getApp();//res.data.version 是从服务端返回的最新fe的版本号，即上面的数字101app.globalData.feUrl = 'https://www.yourdomain.com/' + res.data.version + '/#/index'}resolve();},fail: function (error) {console.log(error);reject();}})});},

Nginx 配置

Nginx 正则规则，~ 表示区分大小写的正则匹配，\d 是数字的匹配的正则表达式，正好可以匹配 101 这样的数字表达式。

server{##其他配置##......##其他配置location ~ /\d {root /mnt/projects/FE/;}}

在服务器上存放项目的路径为 /mnt/projects/FE/101，下图是 Vue 项目构建好的样子。

服务端接口

下面是服务端接口的参考代码，我们可以将最新的版本号存入数据库：

@RequestMapping(value = "getFEVersion", method = RequestMethod.POST)
public Object getFEVersion(HttpServletRequest request) {ResponseVo responseVo = new ResponseVo();//从数据库中获得最新的版本号responseVo.setSuccess("101");return responseVo;
}

总结

到此，我们将小程序发布上线，重启 Nginx 使得配置生效，后续每次构建前端工程，都生成一个新的版本号，如 102、103 等等，将该版本号填入数据库中，后端接口都会及时返回最新版本号，使得小程序总是以最新的路径加载，从而做到 web-view 都能及时的加载最新的 H5 页面。

微信小程序webview缓存处理相关推荐

微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
微信小程序webview与h5通过postMessage实现实时通讯的实现
文章转自:https://www.jb51.net/article/167957.htm 这篇文章主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现,文中通过示例代码 ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
关于微信小程序webview的使用
小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.同时提供一系列工具帮助开发者快速接入并完成小程序开发.关于如何注册配置就不多言了,本文主要 ...
开发那点事（十五）微信小程序webView首次进入白屏优化方案
写在前面的话公司最近项目已经进入使用阶段,从用户那边反应过来的问题,说小程序打开太慢,中间白屏几秒,于是想办法来做一个等待效果. 优化后效果具体实现(已vue为例) 按照正常的思路,路由按需加载. ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...

微信小程序webview缓存处理

解决问题

总结

微信小程序webview缓存处理相关推荐

最新文章

热门文章