一、适用场景

1、不熟悉原生开发的H5开发人员

2、原生APP使用webView调用H5页面引发的白屏问题以及类似场景

二、排错方案

排错思路:

  1. 确定白屏问题是否能被解决
  2. 确定引发的白屏问题是否是原生注入到H5的
  3. 情景A:问题原生注入到H5,查看报错日志定位引发问题的具体原因协助原生开发者解决问题。情景B:问题由H5页面自身引发的,针对前端H5开发者运行代码报错白屏不显的解决方案

三、问题解决方案

排查白屏问题是否能被解决原生通过webView调用H5页面白屏引发错的原因有很多,其中大多数问题是可以由原生开发者和H5开发者所解决的,其中较为常见无法解决的问题为:安卓系统硬件支持webView通信技术

  1. 知识补充扩展知识补充扩展:WebView在Android 4.4(API level 19)及以上版本中是基于Chromium的,而在Android 4.3(API level 18)及以下版本中是基于WebKit的。WebView是一个系统组件,其版本安卓系统版本有关。如果WebView版本过低,可能会导致一些功能无法正常使用。(此处分析可以不看)。
  2. 通过主流浏览器访问webView地址,如果浏览器访问webview不白屏,那么安卓系统硬件支持。如果浏览器访问webView白屏:情景A,使用安卓系统为4.4以下版本的用户,通过系统设置应用查看手机WebView系统组件是否被禁用,如果被禁用则该型号手机厂商支持。情景B,如果安卓系统为4.4以上,那么WebView系统组件已经写到了安卓系统内核里了需要后端开发者使用如下代码测试硬件是否支持webView。
    PackageManager pm = getPackageManager();
    boolean isWebViewSupported = pm.hasSystemFeature(PackageManager.FEATURE_WEBVIEW);
    

判断白屏问题是否是原生注入到H5页面:原生通过webView调用H5页面引发白屏的原因有可能是H5本身语法兼容也可能是原生APP内部报错导致的,作为一名H5开发者需要优先判断是否是H5页面内部问题:

  1. 通过谷歌远程调试手机APP环境白屏的webview页面和浏览器环境未白屏webview页面作为对比。
  2. 情景A:若APP环境下的webview页面无DOM元素浏览器环境下的webview页面有DOM元素,则引发白屏问题很有可能是原生APP内部报错注入到H5页面。
  3. 情景B:若APP环境下的webview页面有DOM原生,通过谷歌远程调试定位引发白屏的具体不兼容语法

注:谷歌远程调试技术需要访问谷歌服务器因此需要设备能科学上网,具体使用方法可以参考 Chrome远程调试webview_chrome webview_卢同学.的博客-CSDN博客

获取APP内部报错日志协助原生定位问题:下载ADB安卓调试工具配置环境变量(自行百度),将设备连接电脑复现白屏页面获取报错日志

  1. 连接Android设备电脑,并打开USB调试模式
  2.  使用命令检查设备是否成功连接

    adb devices
    
  3. 使用logcat命令查看报错日志定位具体报错原因
    adb logcat -s <package-name>  // package-name为对应包名
    
    adb logcat -s <package-name> *:E // E为日志输入级别为Error

        注:本人遇到的是低版本安卓跨域问题

四、webView原生调用失败常见问题

  1. H5页面资源加载失败:H5页面中的资源文件(如CSS、JS、图片等)可能加载失败,导致页面无法正常显示可以通过Chrome浏览器开发者工具或Fiddler等工具查看资源加载情况,找出加载失败的资源文件并进行修复

  2. H5页面代码问题:H5页面中的代码可能存在问题,导致页面无法正常显示。例如,可能存在语法错误逻辑错误等问题。可以通过Chrome浏览器开发者工具或其他调试工具来查看H5页面的代码,找出问题并进行修复

  3. 安全策略问题:H5页面中可能存在安全策略问题,导致页面无法正常显示。例如,可能存在跨域访问问题、HTTPS证书问题等。可以通过Chrome浏览器的开发者工具或其他调试工具来查看安全策略问题,找出问题并进行修复

  4. WebView设置问题:WebView的设置可能不正确,导致页面无法正常显示。例如,可能需要启用JavaScript、启用缓存等设置。可以通过以下代码来设置WebView:

    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
    

原文地址:https://blog.csdn.net/m0_56516186/article/details/131258044

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_12781.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注