Android和H5那些不可描述的事情...

/   今日科技快讯   /

近日，代表了750家移动运营商利益的全球移动通信系统协会的行业分析报告显示，禁止从中国供应商购买通信设备，将使欧洲5G网络成本增加约550亿欧元，并将导致该技术的推出延迟18个月左右。在路透社报道中提到的中国供应商，除了华为，还有中兴。

/   作者简介   /

大家周一好！新的一周继续努力吧！

本篇文章来自老司机骑小猪看流星的投稿，分享了在Android开发过程中关于H5相关的知识，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章。

骑小猪看流星的博客地址：

https://www.jianshu.com/u/0111a7da544b

/   前言   /

周一清早，某技术（对接我司业务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);.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)object, String name)

参数一：具体的对象，也就是H5与Android交互的实体类

参数二：参数一对象的实例化对象，也就是给前端调用的类名

具体使用，参考代码如下：

A： 传入类和对象名（对象名与H5需要协商好），如果对象名不一致，H5无法调用Android的原生方法 ，而且要仔细区分大小写、l(小写的L)与I（大写的i）这些类似的字符等等（稍微不注意就写错，一写错就无法调用....）

webView.addJavascriptInterface(new H5CallBackAndroid(), "callBack");"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传过来的数据 无效：");        }    }}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();    }});

    @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'    }}//。。。省略
    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 *;}
-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 红色箭头，然后看一下蓝色方框内的是不是很熟悉，当然这里只是简单介绍如何快速使用以供参考。

调试小技巧

推荐阅读：

使用黑科技启动未注册的Activity

Shortcuts，让你可以在系统的桌面上为所欲为

自撸一个Android IM库，即时通讯很难吗？

欢迎关注我的公众号

学习技术或投稿

长按上图，识别图中二维码即可关注