Android与H5交互探索之旅

本文已独家授权郭霖 ( guolin_blog ) 公众号发布！

周一清早，某技术（对接我司业务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，谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权，非商业转载请注明出处(开头或结尾请添加转载出处，添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果