周一清早，某技术（对接我司业务SDK的技术）在有我司boss的微信群火急火燎地艾特我说为什么H5的回调 SDK 这边收不到？看到消息的我内心瞬间那是焦虑的一P，飞奔公司打开电脑双击IDE，心想别人用的好好的，这不太科学呀。
说起H5与Android的交互，简单来说就是android这边提供对象，暴露方法让H5的脚本文件进行调用，但是如果出现交互失败的情况，那就需要逐一分析挨个排除。本篇文章只针对原生Webview进行讨论，市面上一些封装好、优秀的第三方Webview这里就不涉及了。
定位一：Http 和 Https 混合资源加载
由于H5目前的大开发环境，一个Js文件（最终会被 html引用）可能会出现两种不同混合的资源（尤其是H5页游，页游会使用大量的混合资源），比如 Http和https资源。从Android5.0开始，WebView默认不支持同时加载Https和Http混合模式。如果Webview不允许混合加载，那么js文件可能就不会生效，js文件异常，就可能会导致H5无法调用Android；实际上，我们在自定义Webview时一般都允许它混合加载
WebSettings.setMixedContentMode.(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);WebSettings.setMixedContentMode（）这个方法，也就是加载内容的混合模式，谷歌提供的混合模式一共有如下三种模式
- MIXED_CONTENT_NEVER_ALLOW
这种模式代表的意思是指：Webview不允许一个安全的站点（https）去加载非安全的站点内容（http）,比如，https网页内容的图片是http链接。 - MIXED_CONTENT_ALWAYS_ALLOW
这种模式代表的意思是指：WebView是可以在一个安全的站点（Https）里加载非安全的站点内容（Http）, 这是WebView最不安全的操作模式，但是毕竟通用，也就是一了百了的写法 - MIXED_CONTENT_COMPATIBILITY_MODE
这个模式比较有趣：当涉及到混合式内容时，WebView会尝试去兼容最新Web浏览器的风格。一些不安全的内容（Http）能被加载到一个安全的站点上（Https），而其他类型的内容将会被阻塞。这些内容的类型是被允许加载还是被阻塞，可能会随着版本的不同而改变，官网并没有给出明确的定义。这种模式主要用于在App里面不能控制内容的渲染，但是又希望在一个安全的环境下运行。
综上：如果想一了百了（简单快捷）设置，直接WebSettings.MIXED_CONTENT_ALWAYS_ALLOW即可
定位二：WebSettings基本配置
WebSettings，这个抽象类主要是用来管理WebView的状态，开发者主动对WebSettings进行配置，可以丰富WebView的功能以至于来满足开发需求。如果想通过Webview来实现Android与H5的交互，需要对WebSettings进行配置
首先：实例化WebSettings ( 通过Webview.getSettings( )来获取 )：
WebSettings settings = webView.getSettings();接着：设置WebView是否允许执行JavaScript脚本，默认false，false为不允许，因此要将其手动设置为true
settings.setJavaScriptEnabled(true);然后：还有一个API也比较重要：
settings.setDomStorageEnabled(true);这个API的用法，是否开启本地DOM存储。理论上对应Html5中的localStorage(可以使用Android4.4手机和Chrome Inspcet Device联调，关于这个联调，后文会讲)，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的，因为多数浏览器都支持 localStorage 的，但是鉴于它的安全特性（任何人都能读取到它，尽管有相应的限制，将敏感数据存储在这里依然不是明智之举），Android 默认是关闭该功能的，也就是false。但是，我们一般会将其设置true。
定位三：Android与H5交互之代码细节
Android与H5的交互，实际是通过注解和对象、方法来完成的，
首先，Webview调用addJavascriptInterface方法，在立马传入具体的参数允许被H5调用，系统源码如下：
webView.addJavascriptInterface( Object object, String name)参数一：具体的对象，也就是H5与Android交互的实体类
参数二：参数一对象的实例化对象，也就是给前端调用的类名
具体使用，参考代码如下：
A： 传入类和对象名（对象名与H5需要协商好），如果对象名不一致，H5无法调用Android的原生方法 ，而且要仔细区分大小写、l(小写的L)与I（大写的i）这些类似的字符等等（稍微不注意就写错，一写错就无法调用....）
webView.addJavascriptInterface(new H5CallBackAndroid(), "callBack");B： Android 对象类的编写（参考）
public class H5CallBackAndroid {
@JavascriptInterface
public void useHtmlData(String data) {
if (data != null && data.length()>0){
Log.i("info", "H5传过来的数据 ："+data);
// Android 原生处理data
}else {
Log.i("info", "H5传过来的数据 无效：");
}
}
}注意：
- H5调Android使用的方法，需要在方法上用 @JavascriptInterface注解来定义该方法；
- 被该注解修饰的方法权限需要声明为 public 这点尤其注意
定位四：SSL
由于HTTPS协议通过SSL进行通信，当使用HTTPS通信的url在Webview出现错误时，一般会通过onReceivedSslError回调通知，常见的做法是直接忽略，让Webview继续加载
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.i("log", "shouldOverrideUrlLoading: url"+url);
return super.shouldOverrideUrlLoading(view, url);
}
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
//继续加载
handler.proceed();
}
});这里的 SslErrorHandler：也就是当前处理错误的Handler，它只有两个函数：
- SslErrorHandler.proceed()
- SslErrorHandler.cancel()
其中，SslErrorHandler.proceed()表示忽略错误继续加载；SslErrorHandler.cancel()表示取消加载。在onReceivedSslError的默认实现中是使用的SslErrorHandler.cancel()来取消加载，所以一旦出来SSL错误，HTTPS网站就会被取消加载、，如果想忽略错误继续加载就只有重写onReceivedSslError，并调用SslErrorHandler.proceed()继续加载
定位五：混淆
如果项目开启了混淆，也就是minifyEnabled设置为了true
buildTypes {
//。。。省略
release {
//开启混淆
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}但是，如果没有配置Webview的混淆规则，也是无法与H5正常交互的，这点非常重要！！！
关于Webview常见的混淆规则如下：
#保留annotation， 例如 @JavascriptInterface 等 annotation
-keepattributes *Annotation*
#保留跟 javascript相关的属性
-keepattributes JavascriptInterface
#保留JavascriptInterface中的方法
-keepclassmembers class * {
@android.webkit.JavascriptInterface <methods>;
}
#这个类是用来与js交互，所以这个类中的 字段 ，方法， 不能被混淆、全路径名称.类名
-keepclassmembers public class com.youpackgename.xxx.H5CallBackAndroid{
<fields>;
<methods>;
public *;
private *;
}更多的混淆细则，可自行通过浏览器了解查阅详细的混淆配置信息
定位六：前端兄弟的问题
如果前端兄弟写错了或者弄错了（小写的c写成大写的C、l(小写的L)与I（大写的i）等等），出现这种情况当然是无法调用到android原生的方法呀，所以必要的时候也可以找他帮忙一起看看
定位七：Android9.0新特性
由于从Android 9.0（API级别28）开始，系统内部默认禁用明文支持（也就是明面上不支持http），因此http的url均无法在webview中加载。(这种情况是针对9.0系统 webview打不开的情况，特此做补充说明)
9.0-Webview报错
解决办法
- 在AndroidManifest.xml文件中的Application标签添加android:usesCleartextTraffic="true"，参考代码如下：
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:name=".tools.App"
android:roundIcon="@mipmap/ic_launcher_round"
<!--让9.0 webview 支持htp-->
android:usesCleartextTraffic="true"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>补充：H5与Android的调试
关于H5与Android的联合调试，下面做个简单说明：
准备工作：
- PC下载并安装chrome（谷歌）浏览器
- 一台安卓手机（4.4系统以上），用usb线链接电脑，打开开发者模式，且允许WebView进行调试，需新增如下代码：
WebView.setWebContentsDebuggingEnabled(true);编译并运行代码
- chrome浏览器地址栏输入 chrome://inspect，进入后点击 inspect 即进入调试模式（需要翻（越）墙（壁））
进入调试界面
在APP上显示具体的H5界面后，该调试界面才会显示需要调试的包名等具体信息。点击inspect后，就会进入调试界面。一番操作后你会发现在网页上操作、和手机操作是同步进行的
调试界面
查看请求体、响应体该如何操作？
一番操作后（如：用户登录），如下图，点击all 红色箭头，然后看一下蓝色方框内的是不是很熟悉，当然这里只是简单介绍如何快速使用以供参考。
调试小技巧
如果这篇文章对您有开发or学习上的些许帮助，希望各位看官留下宝贵的star，谢谢。
