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

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

我详细阅读了这篇文章，文章中包含的信息量非常大体现了作者的丰富经验，不过为了便于理解与阅读，我对文章进行了重新的排版和部分表达方式的修改。

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

按如下的顺序依次讲解

JavaScript与Android相互通信

通信过程中的注意事项

巧妙的使用shouldOverrideUriLoading

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
}

三、巧妙的使用shouldOverrideUriLoading

一般情况下，当我们希望页面中的超链接可以在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=123
HOST String is openUserInfo
Query String is id=123

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

五、更多的选择

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

介绍如下：

跑气使用高风险的WebView addJavascriptinterface方法，通过对js层函数调用及回调函数的包装，支持异步回调，方法参数支持js所有已知的类型

原文地址