Android通过webview可以实现html页面的加载，同时提供了API可以使得Java原生和JS进行互相调用。
1、WebView加载H5的页面
Android在通过webview的loadUrl()方法加载H5的页面，H5页面可能存在远程服务器上，也可以存在本地。本地存储在assets文件夹下面。
//使用当前的WebView，不跳转默认浏览器
mWebView.setWebViewClient(new WebViewClient());
//加载本地
mWebView.loadUrl("file://android_asset/index.html");
//加载远程网页
mWebView.loadUrl("https://www.baidu.com/");
2、Android调用H5的方法
- 设置WebView支持调用JS的方法
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
- 调用H5中无参数、无返回值的方法
//调用H5中showMessage()方法
mWebView.loadUrl("javascript:showMessage()");
- 调用H5中有参数、无返回值的方法
//调用H5中showMessage()方法，并传入参数"Hello World"
mWebView.loadUrl("javascript:showMessage('Hello World')");
- 调用H5中有参数、有返回值的方法
//调用H5中add()方法，并传入参数1和2，返回值为value
mWebView.evaluateJavascript("javascript:add(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i(TAG,value);
}
});
3、H5调用Android中的方法
- 定义一个类，将可以被js调用的方法放在其中。
/**
* 相当于暴露给Js的方法的容器
* 必须添加@JavascriptInterface标签
*/
public class JsInteration {
@JavascriptInterface
public void doSomething(){
//执行某些操作
}
@JavascriptInterface
public String getMessage(){
return "Hello World";
}
@JavascriptInterface
public Integer add(Integer a, Integer b){
return a + b;
}
}
- 在WebView中提供这个接口给Js调用
//实例化暴露出来的方法的类，"android"是一个标识符，Js会通过这个调用到native的方法
mWebView.addJavascriptInterface(new JsInteration(),"android");
4、使用JsBridge实现Native和H5的通信
JsBridge是连接native和H5中间的一座桥梁，可以实现Js和native的互相调用。用以解决Android4.2以下，addJavascriptInterface中的安全漏洞问题，兼容性很好。下图为交互的大致流程和具体流程：
大致流程
具体流程
