WebView使用过程中你该知道的二三事

本次主要介绍 WebView 和前端的一些交互的方式，以及交互过程中的注意事项，以及部分我在项目中的经验。

按如下的顺序依次讲解

1. JavaScript与Android相互通信

2. 通信过程中的注意事项

3. 巧妙的使用shouldOverrideUrlLoading

4. 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 href="openUserInfo://user/532177" >OpenUserInfo</a><a href="http://www.qq.com" >Open QQ</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标签：

<a href="com.zhy.test://openUserInfo?id=123" >openUserInfo</a>

那么对应的Activity声明为：

只要在页面中点击上述的a标签，则就会打开此声明的Activity，可以看到主要是通过scheme="com.zhy.test"匹配的。

那么你就可以在该Activity中获取信息，然后做操作，一般需要在onCreate和onNewIntent中做操作。

打印的信息为：

URI String is com.zhy.test://openUserInfo?id=123HOST String is openUserInfoQuery String is id=123

在Activity拿到所有的信息，就可以做你想要的操作了。

五、更多的选择

如果你对安全特别注重，这里有一个可选库：https://github.com/pedant/safe-java-js-webview-bridge

介绍如下：

抛弃使用高风险的WebView addJavascriptInterface方法，通过对js层调用函数及回调函数的包装，支持异步回调，方法参数支持js所有已知的类型，包括number、string、boolean、object、function。