本次主要介绍 WebView 和前端的一些交互的方式，以及交互过程中的注意事项，以及部分我在项目中的经验。
按如下的顺序依次讲解
JavaScript与Android相互通信
通信过程中的注意事项
巧妙的使用shouldOverrideUrlLoading
Android deep links
一、JavaScript与Android相互通信
相关代码如下
除了需要基本的配置以外，其实核心的代码就以下几句：
Android调用Js的方法
String strToJS = "helloJs";
mWebView.loadUrl("javascript:methodInJs(\"" + strToJS + "\");");
Js调用Android中的方法
直接在html的js区域书写以下代码
demo.changeBtnText("strToAndroid");
demo为我们addJavascriptInterface传入的name，demo.changeBtnText为Object类中的方法。
这里一定要注意的是：在API17之后，Js调用Android的相关方法一定要加上@JavascriptInterface注解，否则无法识别。
二、 通信过程中的注意事项
这一点主要是方便前端的工作，如果你从来不管前端页面，则可以跳过。
很多时候我们制定客户端与前端页面的交互，传递的数据为json格式的字符串。在js中，将json字符串转化为对象操作起来非常方便，但是转为对象之后就没有办法直接传递给android客户端了，中间需要再次转化为字符串，下面提供两个辅助方法，方便我们上述行为。
json字符串转化为js对象
js对象转化为json字符串
主要当我们传递一个json字符串给前端页面，前端就可以直接转化为对象操作，例如：
android端将json字符串传递给html页面
String strToJS = "{'username':'zhy','age':11}";
mWebView.loadUrl("javascript:methodInJs(\"" + strToJS + "\");");
js端接收以后,可以转化为对象，轻松使用
function methodInJs(str)
{
var obj = decode(str);
obj.username;//zhy
obj.age;//11
}
三、巧妙的使用shouldOverrideUrlLoading
一般情况下，当我们希望页面中的超链接可以在webview中直接打开的时候,我们为webview设置setWebViewClient，例如如下代码：
mWebView.setWebViewClient(new WebViewClient());
其实我们可以做更多的事，WebViewClient中有个方法叫做shouldOverrideUrlLoading，可以获得我们点击html页面a标签中设置的href；
例如下面几个a标签：
对于第一个a标签，从字面上看是打开id=532177的User信息。这里可以看出我们可以在页面中自己定义一些url规则。
然后在android中根据点击的a标签，去打开指定的Activity或者别的事；
代码如下：
对于我们预定义的协议，例如openUserInfo,我们可以通过制定的方案进行处理，例如跳转到展示User的详细信息Activity。
对于http/https的协议，我们直接在webview中打开。
对于其他的不能识别的url，我们可以交给系统的中的可以处理的Activity去处理，例如使用了android deep link技术的，下面就有介绍。
这样我们就可以和前端指定一些协议，然后通过协议通讯啦。
四、android deep link
android deep link允许用户点击页面上的链接，而打开某个App的Activity页面，这里并不限制与webview中加载的页面，也可以是浏览器中加载的页面。
例如在页面中存在如下的a标签：
那么对应的Activity声明为：
只要在页面中点击上述的a标签，则就会打开此声明的Activity，可以看到主要是通过scheme="com.zhy.test"匹配的。
那么你就可以在该Activity中获取信息，然后做操作，一般需要在onCreate和onNewIntent中做操作。
打印的信息为：
URI String is com.zhy.test://openUserInfo?id=123
HOST String is openUserInfo
Query String is id=123
在Activity拿到所有的信息，就可以做你想要的操作了。
五、更多的选择
如果你对安全特别注重，这里有一个可选库：https://github.com/pedant/safe-java-js-webview-bridge
介绍如下：
抛弃使用高风险的WebView addJavascriptInterface方法，通过对js层调用函数及回调函数的包装，支持异步回调，方法参数支持js所有已知的类型，包括number、string、boolean、object、function。
网友评论