微信h5苹果手机出现“网络出错,无法显示该页面“

最新推荐文章于 2025-05-07 11:33:19 发布

原创最新推荐文章于 2025-05-07 11:33:19 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章讲述了在微信公众号H5环境中，用户从B页面返回A页面时遇到的问题，包括页面无法正常加载和接口接收失败。通过分析发现，问题与B页面加载的可回溯JS文件和录屏功能有关。最终解决方案是在B页面返回事件中结束录屏并移除JS文件，实现页面重定向至A页面，解决了该问题。

微信公众号h5,用户在使用的过程中,退出页面后再次点击链接显示如下图,点击重试和刷新也是一样,并且只在使用手机网络时会存在,
变更为wifi,或者打开飞行模式大概一分钟后关闭飞行模式,使用手机网络又可以访问页面(如果用户着急可以先使用这个办法进行访问)

1,查资料说,微信h5有缓存,使用meta标签设置强制不缓存,没有解决

    <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 http-equiv="Cache" content="no-cache" />

经过测试同学复现,是在b页面点击返回a页面时才会出现该问题

2,尝试在b页面返回按钮的点击事件里,使用路由replace的方式进行回退

router.replace("");

问题还是存在,并且a页面的调用提交接口接受不到接口返回,导致卡在a页面

3,反思b页面和其他页面有什么区别,因为其他页面上一步,下一步操作后退出不会出现此现象.
得出:b页面会加载可回溯js文件,猜测是有影响,并且项目是单页面应用,页面跳回a页面的时候也是在录屏的.

解决:在b页面的返回事件中结束录屏(并不管用),移除js文件,页面重定向到a页面

const handleBefore = () => {
  endRecord("FaceCheck");
  setTimeout(() => {
    document.getElementById("emWebrecord")?.remove();
    window.location.replace('a页面路由');
  }, 200);
};

到此,彻底解决该问题!