原生调用webView白屏解决方案

一、适用场景

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为对应包名
   
   adb logcat -s  *: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);