JavaScript与Android交互（Kotlin）

小伙伴们在使用安卓原生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方法

一、把须要测试的js代码放到src/main/asserts文件夹下，测试代码以下

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

因为是测试，我把js代码文件放到了asserts进行加载测试，实际项目中是加载的连接，道理都同样，按钮点击监听结果：

三、Android调用js方法时传值给js。有时候在Android调用js方法时须要传递参数给js，咱们只要在安卓端调用js方法内将参数拼进去便可，int类型可直接拼进去，string类型转成json后传给js，如图：

结果显示为：

Android调用js方法时须要注意事项：

• 若是安卓刚打开页面就去调用js方法通常状况下是没有反应的，缘由是js页面尚未加载完毕，因此咱们须要监听页面加载完毕才能去调用js方法

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

Android调用js两种方法对比：

JS调用Android方法

1、经过WebView的addJavascriptInterface()

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

二、js代码测试代码为：

三、点击网页内按钮监听事件，能够看出js成功调用了安卓的toast方法：

四、优势：使用简单 缺点：存在严重漏洞

2、经过WebViewClient的shouldOverrideUrlLoading()回调拦截url

一、约定url协议

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

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

四、优势：不存在方法1中的漏洞 缺点：获取返回值方法复杂，须要约束协议

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

经常使用的拦截是 JS的输入框（即prompt()方法），由于只有prompt()能够返回任意类型的值，操做最全面方便、更加灵活

一、约定url协议

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

三、能够看出来拦截方法跟shouldOverrideUrlLoading()同样，这里就不上图展现结果了

四、优势：不存在漏洞 缺点：获取返回值方法复杂，须要约束协议

Android和JS复杂交互

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

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