![v2-74cfcd85a3816bbc59280ed9999bdbae_1440w.jpg?source=172ae18b](http://img-03.proxy.5ce.com/view/image?&type=2&guid=54579c3f-2a30-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-74cfcd85a3816bbc59280ed9999bdbae_1440w.jpg?source=172ae18b)
现在混合式开发是大趋势,H5不断蚕食移动互联网的份额,有的公司甚至只用H5就搞了一个APP,我们搞Android的不说会点H5,至少要懂怎么和H5(和JavaScript)交互,费话不多说。
一、先看效果:
![v2-a106fa19fe8b49b96bb42e9fb5627d7a_b.gif](http://img-01.proxy.5ce.com/view/image?&type=2&guid=54579c3f-2a30-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-a106fa19fe8b49b96bb42e9fb5627d7a_b.gif)
二、此效果图实现了以下4个功能:
- Java调用JS中的无参函数;
- Java调用JS中的有参函数,参数是从Java中传入的;
- JS调用Java的无参函数;
- JS调用Java中的有参函数,参数是从JS中传入的;
三、说几个重点的地方:
1、调用本地html的方法(html放在assets文件夹中,当然实战中会是一个网址,html一般是H5开发人员来写)
//打开从本地assets中的html文件
2、在Android中声明一个接口名字,供JS调用( addJavascriptInterface()的第二个参数 )
//提供给js的接口名称
3、调用WebView的addJavascriptInterface(),需要在Activity的onCreate()方法上加上注解:@SuppressLint(“JavascriptInterface”)
@SuppressLint
4、供JS调用的方法要加上注解:@JavascriptInterface
//供JS调用的方法
5、Java调用JS代码
__5.1 调用JS无参函数
mWebView
__5.2 如果要传参数,字符串用单引号包裹!
mWebView
6、不要忘记网络权限
<uses-permission
四、接下来是完整代码:
布局文件:
<?xml version="1.0" encoding="utf-8"?>
MainActivity代码:
package
最后是html文件:
<!DOCTYPE html>