Android与H5交互

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中的安全漏洞问题，兼容性很好。下图为交互的大致流程和具体流程：

大致流程 具体流程