继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript与Android交互(Kotlin)

IT心媛意码
关注TA
已关注
手记 3
粉丝 0
获赞 0

小伙伴们在使用安卓原生webview时经常能碰到js调用安卓手机相机、相册或录音等功能,前端小姐姐写好了代码功能,在IOS手机测试没有问题,一到安卓手机里功能怎么就失效了呢,安卓程序员肯定以为自己代码哪里配置的有问题,一顿调试,最后发现还是不行,于是乎各种百度谷歌,最后发现原来是webview自己的问题(顺便吐槽下,为什么webview这个常用的控件,谷歌公司就不能优化下呢,坑太多了!),好了废话不多说,进入正文。

先来说说什么是JS交互:

说的通俗一点就是前端一些调用不了原生代码的功能,或者在一些复杂页面和混排页面上,原生没有网页来得快,所以在实际项目中,很多情况下都是原生页面掺杂着webView 加载js的网页的,这就涉及到两者之间的交互以及传值问题。

Android调用JS方法:

  • 通过WebView的loadUrl()调用(API小于等于18使用)

  • 通过WebView的evaluateJavascript()调用(API大于18使用)

JS调用Android方法:

  • 通过WebView的addJavascriptInterface()

  • 通过WebViewClient的shouldOverrideUrlLoading()回调拦截url

  • 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()方法

  • 由于方法二和方法三使用方法复杂,大多数同学使用的都是方法一,但是方法一存在严重漏洞,这里不做过多介绍。

Android调用Js方法

1、把需要测试的js代码放到src/main/asserts文件夹下,测试代码如下

http://img1.mukewang.com/5e01e7b600010d8e05160425.jpg

2、配置wevView属性,并写一个测试按钮进行点击监听

http://img4.mukewang.com/5e01e7c800017fb208850545.jpg

由于是测试,我把js代码文件放到了asserts进行加载测试,实际项目中是加载的链接,道理都一样,按钮点击监听结果:

http://img3.mukewang.com/5e01e7ef0001e32310802160.jpg

3、Android调用js方法时传值给js。有时候在Android调用js方法时需要传递参数给js,我们只要在安卓端调用js方法内将参数拼进去即可,int类型可直接拼进去,string类型转成json后传给js,如图:

http://img1.mukewang.com/5e01e7ff0001f3a609060468.jpg

结果显示为:

http://img3.mukewang.com/5e01e80d00013e4710802160.jpg

Android调用js方法时需要注意事项:

  • 如果安卓刚打开页面就去调用js方法一般情况下是没有反应的,原因是js页面还没有加载完毕,所以我们需要监听页面加载完毕才能去调用js方法

http://img.mukewang.com/5e01e8210001f31a05820186.jpg

  • webview调用js方法时必须在主线程中调用

Android调用js两种方法对比:

http://img2.mukewang.com/5e01e82c0001254508180173.jpg

JS调用Android方法

一、通过WebView的addJavascriptInterface()

1、js调用Android方法时需要一个交互桥梁,交互桥梁的名字前端和Android起的名字必须一样。

http://img4.mukewang.com/5e01e83d00011c7905920549.jpg

2、js代码测试代码为:

http://img.mukewang.com/5e01e84c0001e4fb08500395.jpg

3、点击网页内按钮监听事件,可以看出js成功调用了安卓的toast方法:

http://img1.mukewang.com/5e01e85f0001788010802160.jpg4、优点:使用简单 缺点:存在严重漏洞

二、通过WebViewClient的shouldOverrideUrlLoading()回调拦截url

1、约定url协议

http://img2.mukewang.com/5e01e871000188cf08340371.jpg

2、Android端重写WebViewClient类的shouldOverrideUrlLoading()方法,注释很清楚,直接看注释

http://img4.mukewang.com/5e01e87e0001016c08870518.jpg

3、点击网页内按钮,js成功调用了安卓的toast方法,参数传递也没有问题:

http://img4.mukewang.com/5e01e8890001c9e210802160.jpg

4、优点:不存在方法1中的漏洞 缺点:获取返回值方法复杂,需要约束协议

三、通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()方法

常用的拦截是 JS的输入框(即prompt()方法),因为只有prompt()可以返回任意类型的值,操作最全面方便、更加灵活

1、约定url协议

http://img2.mukewang.com/5e01e8980001dec408330430.jpg

2、Android端复写WebChromeClient类中对应弹框方法进行拦截并解析

http://img.mukewang.com/5e01e8a40001b13a09200817.jpg

3、可以看出来拦截方法跟shouldOverrideUrlLoading()一样,这里就不上图展示结果了

4、优点:不存在漏洞 缺点:获取返回值方法复杂,需要约束协议

Android和JS复杂交互

举个栗子:JS在点击页面上一个按钮时需要选取安卓手机相册照片功能,选择后需要安卓程序员把图片上传到后台服务器,获取到网络链接后再把图片链接通过loadUrl()或者evaluateJavascript()方法传递给H5端,来实现一个复杂交互过程。

说是复杂交互,其实还是简单交互的混合使用,只要理解了简单交互的步骤和值传递,再复杂的交互相信大家也不在话下。


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP