Androidwebview和js互相调用实现方法

Androidwebview和js互相调用实现方法,第1张

概述Android-webview和js互相调用Android和H5都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5具有开发速度快,更新不用依赖

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() 这个方法里面做的就是d出一个信息提示框,具体提示什么信息都不重要了,随便。

再来看看代码部分(WebVIEwActivity的布局文件): 

整个布局文件也很简单,一个按钮和一个WebVIEw,按钮是用来测试 AndroID 调用 Js 用的,Js 调用 AndroID 就当然是 webvIEw 加载的网页里面的按钮了。

再来看看 Java 代码部分(WebVIEwActivity):

下面来看看代码部分:

37-42行:这几行就是androID中的按钮的点击事件,没什么好解释的,来看看点击事件做的是什么?点击事件做的是:调用 webvIEw 的 loadurl 方法去调用 Js 中的方法;调用的方式是:前面是 JavaScript 中间用 : 分隔 最后是 要调用的 Js 的方法名。

45-55行:这几行就是有关于 WebvIEw 的设置等,46-51 这几行是指支持d窗,也就是支持 HTML 网页d框,因为前面的 HTML 代码中,有我们 AndroID 调用 Js 的时候,调用成功就 Js d窗,所以这里要加上这个设置。接下来是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 了。

 

总结

以上是内存溢出为你收集整理的Android webview和js互相调用实现方法全部内容,希望文章能够帮你解决Android webview和js互相调用实现方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1147972.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存