app嵌入H5页面加载空白的问题

因为缓存了首页导致的问题

前端版本发布之后,部分菜鸟用户页面加载空白.

因为前端发布后,原来的js以及css链接不可访问导致.

缓存比较严重.

解决办法:

<filter>

<filter-name>homePageNoCacheFilter</filter-name>

<filter-class>com.kata.b2b.mservice.global.HomePageNoCacheFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>homePageNoCacheFilter</filter-name>

<url-pattern>/page/index.html</url-pattern>

</filter-mapping>

<filter-mapping>

<filter-name>homePageNoCacheFilter</filter-name>

<url-pattern>/page/</url-pattern>

</filter-mapping>

package com.kata.b2b.mservice.global;

import javax.servlet.*;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

/**

* 移动端首页基本上不缓存,用于解决ios端网页缓存的问题

* Copyright (C),2011-2019,杭州湖畔网络科技有限公司

*

* @Auther :fengbin

* @Data:24-8-26

**/

public class HomePageNoCacheFilter implements Filter {

@Override

public void init(FilterConfig filterConfig) throws ServletException {

}

@Override

public void doFilter(ServletRequest request, ServletResponse response,FilterChain chain) throws IOException, ServletException {

HttpServletResponse res = (HttpServletResponse) response;

res.setHeader("Cache-Control", "no-cache"); //- 这里的单位为秒,10代表第一次请求10s后过期

res.setHeader("expires","0"); //当前页面过期时间,立刻过期。

res.setHeader("pragma","no-cache"); //HTTP1.0通过Pragma控制浏览器缓存。

chain.doFilter(request, response);

}

@Override

public void destroy() {

}

}

参考:

Tomcat环境下设置HTTP强缓存_tomcat配置cachecontrol-优快云博客

http缓存详解

HTTP缓存详解 | YiYing’s sharing

### 解决方案分析 在低版本 Android 设备上加载 Uni-appH5 页面时,可能会遇到白屏问题。这通常是由以下几个原因引起的: 1. **浏览器兼容性问题**:部分旧版 Android 系统自带的 WebView 版本较低,无法支持现代 Web 技术标准[^1]。 2. **视频编码不兼容**:如果页面嵌入了特定类型的视频文件(如 On2 VP6 或 Screen Video 编码),这些编码可能不受旧版 Android 浏览器的支持。 3. **JavaScript 执行错误**:某些 JavaScript 功能可能未被完全支持,或者由于性能限制而未能正常运行。 以下是针对这些问题的具体解决方案: #### 优化 WebView 配置 可以通过调整应用中的 `WebView` 设置来提升兼容性和性能。例如,在初始化 WebView 时启用硬件加速并设置合适的缓存策略: ```java webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setDomStorageEnabled(true); // 启用 DOM 存储功能 webView.setLayerType(View.LAYER_TYPE_HARDWARE, null); // 开启硬件加速 ``` #### 替换不兼容的媒体资源 对于使用特殊编解码技术的内容(如引用中提到的 On2 VP6 和 Screen Video),建议将其转换为更通用的标准格式,比如 MP4 (H.264)[^1]。可以利用 FFmpeg 工具完成转码操作: ```bash ffmpeg -i input.flv -c:v libx264 -preset fast output.mp4 ``` #### 调整 CSS 和 JS 加载逻辑 确保所有的样式表和脚本都能够在较老的环境中正确解析。避免依赖最新的 ECMAScript 特性;必要时可借助 Babel 将高级语法降级处理。 通过上述方法能够有效缓解甚至彻底解决 low-version Android 上 uni-app H5 页面呈现空白的现象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值