前端 - 微信小程序加载内嵌H5白屏问题？
微信小程序加载内嵌网页h5白屏
<web-view wx:else src="{{webSrc}}"></web-view>
微信小程序通过web-view加载网页h5,每次新发版后，会出现部分手机加载网页白屏，过一段时间（一天左右），才会加载成功
2024/03/12 11:41:05 [error] 20#20: *1728 open() "/usr/share/nginx/html/ctvs-bus-h5/css/chunk-vendors.74f7cce9.css" failed (2: No such file or directory), client: 119.23.123.183, server: _, request: "GET /ctvs-bus-h5/css/chunk-vendors.74f7cce9.css HTTP/1.1", host: "xxx.xxx.com", referrer: "http://xxxxx/xxx/xxx?1710243664894&Authorization=xxx"
查看nginx日志发现白屏是请求到了上一个版本的js或css文件，nginx找不到该文件报404错误
尝试过在websrc上加时间戳，还是无法解决该问题,请问有解决办法吗？
共有1个答案
你的问题可能是由于微信小程序的缓存机制或者浏览器的缓存机制导致的。当微信小程序加载内嵌的H5页面时，它可能会缓存这些页面，包括其中的JS和CSS文件。当你更新这些文件后，由于缓存的存在，部分用户可能仍然加载到旧的版本，从而导致404错误。
有几种可能的解决方案：
- 强制刷新：在你的H5页面中，可以尝试使用meta标签来禁止浏览器缓存，或者在用户加载页面时强制刷新页面。例如，你可以在HTML的
<head>部分添加以下meta标签：
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, proxy-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />这将使得每次用户访问页面时，浏览器都会向服务器发送请求以获取最新的内容，而不是从缓存中加载。
- 版本控制：在你的JS和CSS文件名中添加版本号或时间戳，以确保每次更新后文件名都会改变。这样，即使浏览器或微信小程序缓存了旧的页面，由于文件名已经改变，它们也无法找到旧的JS或CSS文件。在你的情况中，你提到已经尝试在
websrc上加时间戳，但没有解决问题。请确保你是如何添加时间戳的，并确保它在每次构建或发布新版本时都会改变。 - 清理微信小程序的缓存：对于微信小程序本身，你可以尝试在发布新版本后，让用户手动清理微信小程序的缓存。这可以通过在微信小程序的详情页面中点击“清理缓存”按钮来实现。
- 检查服务器配置：确保你的服务器配置正确，并且正确地处理了缓存请求。在你的nginx日志中，看起来是请求到了上一个版本的JS或CSS文件，这可能是由于服务器配置错误或缓存设置不当导致的。
希望这些建议能帮助你解决问题。如果问题仍然存在，你可能需要更深入地调查你的服务器配置、微信小程序的缓存机制以及H5页面的缓存设置。
-
使用同个域名，在微信开发者工具中，调用后端接口报错600009，但是在h5（网页端）正常访问到数据，是什么原因 看到网上说在开发者工具勾选“不校验合法域名”，勾选了还是没用，不知道问题出在哪
-
本文向大家介绍微信小程序页面滑动屏幕加载数据效果，包括了微信小程序页面滑动屏幕加载数据效果的使用技巧和注意事项，需要的朋友参考一下 滑动屏幕加载数据是任何小程序中都会用到的功能，本文我就将这个功能整理给大家，希望对大家有意。我们先看看效果图： 创建目录 首先我们现在项目中创建资讯目录，以下是我自己创建的目录，大家可以根据自己的需求创建。如图所示： 创建lists.js文件 以下是lists.js代
-
使用 openDocument 的方式打开的话需要新开页面打开 pdf,使用 web-view 的方式也是类似新开页面。微信小程序能否在当前页面以内嵌的方式预览 pdf?
-
image标签外层为什么要包裹block，不可以直接写成如下代码吗？ 包裹block是出于什么考虑呀？
-
@megalo/target 的 platform 设置成 wechat，mini-css-extract-plugin 提取文件后缀改成微信小程序的 wxss。 const createMegaloTarget = require( '@megalo/target' ) const compiler = require( '@megalo/template-compiler' ) const M
-
1、第三方应用授权对接 之前对接小程序只提供了开发者授权的方式，这种方式的弊端是，如果客户同时对接了其他的系统，会产生access token冲突，导致消息发不过来。因此新增第三方平台授权的方式，客户可以在智齿后台直接扫二维码授权对接。流程如下： 1.1、选择授权方式，进入配置页 点击绑定小程序时选择授权方式，默认推荐第三方平台授权： 点击确定进入配置页： 1.2、扫描授权二维码 点击“微信公