Android与H5交互探索之旅

周一清早，某技术（对接我司业务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 {@JavascriptInterfacepublic 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(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {Log.i("log", "shouldOverrideUrlLoading: url"+url);return super.shouldOverrideUrlLoading(view, url);}@Overridepublic void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {          super.onReceivedError(view, request, error);}@Overridepublic 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 trueproguardFiles 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"，参考代码如下：

<applicationandroid: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，谢谢。

原文Android最新面试实战总结 - 简书

Android与H5交互探索之旅相关推荐

Android 系统（229）---Android与h5交互专题
[Android开发进阶系列]Android与h5交互专题 1 交互原理 1.1 webview如何加载H5页面我们都知道在Android中是通过webView来加载html页面的,根据HTML文件 ...
Android 和 H5 交互-框架篇
Android 和 H5 交互-框架篇 2017-08-01 YouJZ code小生作者 | YouJZ 地址 | http://www.jianshu.com/p/02afb387b6b4 声明 ...
关于原生android与H5交互的方法
文章目录原生android与H5交互 android调用H5方法 H5调用android 原生android与H5交互前面讲解方法,结尾放代码 android调用H5方法首先需要一个WebVie ...
android 和h5交互,Android中与H5的交互
Android日常开发中,常常会遇到加载H5页面的情况,于是少不了与H5页面的交互问题.具体表现在Android调用H5代码及H5中调用Android代码两种情况. 测试页面 test.png 这里我 ...
Android和H5交互-基础篇
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的.Android中是如何和H5交互的? 1.webView加载页面我们都知道在Android中是通过webV ...
Android 与 H5 交互基础普及
文章目录前言创建一个WebView页面 WebView 与 H5交互 H5 调用 WebView 中的方法 WebView 调用 H5 中的方法另外一些重要操作处理页面导航处理页面历史总结 ...
Android与H5交互
1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...
android h5 书,android与H5交互
1 - WebView基本配置 2 -WebView和H5的交互 3 - WebView错误页面处理 4 -WebView中的Cookie操作 5 -WebView漏洞 6 -WebView内存泄漏问 ...
android与h5交互设计,H5与native交互之JSBridge
JSBridge 1. Why do we need JSBridge? 2. Why is "JS"Bridge? 3. What is JSBridge? Why do ...

Android与H5交互探索之旅

Android与H5交互探索之旅相关推荐

最新文章

热门文章