Android-webview和js互相调用

Android-webview和js互相调用

Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以，App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的，而是相互影响也相互的调用，获取信息等，例如，H5页面要获取App中的用户的基本信息，或者App端要操作H5页面等，下面来看看这两是怎么交互的。

先来看一下项目的整体架构（Android studio中的项目）

整个项目的结构就是这样的，里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity，其中项目里面的MainActivity只是做了个跳转而已，跳转到WebViewJsActivity。就这样。

下面上代码：(js_webView.html)

html里面的代码也比较简单，整个html中就一个Button，点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。

网页中有关 javascript 的代码也比较简单，整个 js 就2个方法，一个是 jsCallAndroid() ，一个是 androidCallJs() 。看方法名就知道了，分别是 js 调用 Android 的和 Android 调用 js 的。

先不要去管 jsCallAndroid() 里面做的是什么，待会会解释，来看看 androidCallJs() 这个方法里面做的就是弹出一个信息提示框，具体提示什么信息都不重要了，随便。

再来看看代码部分（WebViewActivity的布局文件）： 

整个布局文件也很简单，一个按钮和一个WebView，按钮是用来测试 Android 调用 js 用的，js 调用 Android 就当然是 webview 加载的网页里面的按钮了。

再来看看 Java 代码部分（WebViewActivity）：

下面来看看代码部分：

37-42行：这几行就是android中的按钮的点击事件，没什么好解释的，来看看点击事件做的是什么？点击事件做的是：调用 webview 的 loadurl 方法去调用 js 中的方法；调用的方式是：前面是 javascript 中间用 ： 分隔 最后是 要调用的 js 的方法名。

45-55行：这几行就是有关于 Webview 的设置等，46-51 这几行是指支持弹窗，也就是支持 html 网页弹框，因为前面的 html 代码中，有我们 Android 调用 js 的时候，调用成功就 js 弹窗，所以这里要加上这个设置。接下来是53行，53行指的是支持 javascript 这里指的是支持 html 中的 javascript 解析，不管是不是 js 和 Android 交互，只要网页中含有 js ，都要。最关键的就是54行，54行就是 javascript 和 Android 交互的了，addJavascriptInterface 方法需要接受两个参数，第一个是与之相对应的 js 调用 Android 本地的类的对象，这个例子中的就是58-63行这个类的对象，第二个参数就是和前面网页中的js代码中的 jsCallAndroid 方法中的 wv.sayHello(),这里的 wv 就和这个参数(wv)与之相对应，而 sayHello() 就是对应的第一个参数的对象里面的方法。

最后是58-63行，这几行没什么好解释的了，只是如果调用成功就打印一行日志。仅此检验是否调用成功而已。

整个 demo 代码到此完毕，好激动，赶紧运行试试看。

运行的结果会让很多人失望，只是android调用js成功了，但 js 调用 android 不成功。

这是为什么呢？这里要涉及到的是有关于 webview 和 js 的安全性的问题。js 可以通过这种方式下载恶意代码在 android 上执行，具体有兴趣的可以去 Google 一下，所以上面这种写法只是对于 Api16以前的android手机是适用的，16以后，谷歌对这个安全性问题进行了修复。将其注解到android自带的一个javascriptInterfface类中。下面就来看看16以后的写法是咋样的？

有了注解，简直如虎添翼，非常方便。还是原来的配方，还是原来的味道，原汁原味。除了　Activity　中的代码需要修改，其他都不动。

改动的代码有55行，直接传一个 this(Context) 对象就可以了，那么，原来的 JsInterface 就可以不要了。不要那我 sayHello 方法写到哪里呢？既然你传递的是 this ，当然是写到 this 里面咯（59-62行）。不同的是，这个 sayHello()　方法必须加上一个　JavascriptInterface　的注解。

OK了，16以前和16以后的都有了，不就OK了么。在添加javascript的时候判断一下 Api 版本就可以了，哈哈。。。

不不不，肯定不是这样子做。指需要在onCreate() 方法上添加 @SuppressLint("JavascriptInterface") 注解即可。

看下面的就是终极代码了。

对，没错，就是这样子。大功告成。

最后需要提一点的是，上面的例子是可以执行，正常情况下都没什么问题，但你看看网上的demo，很多在 android 调用 js 的时候是开一个子线程去调用，没错，实际开发中，是必须要这样子做的。好处就不言而喻了。这一点看最后一张代码图，这里也有给出，直接调用webview的post，里面就是 Android 调用 js 了。

这篇博文到此结束。

2016-10-20