1.H5调起原生
1.1 对WebView进行初始化:
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js
1.2 创建一个CustomWebViewClient extends继承WebViewClient,也可以专门定义一个类JavaScriptMetod，专门用来管理给JS提供的调用方法。在这里，我将给JS提供的调用方法写在MyWebViewClient 中
 
@JavascriptInterface
 
public void receiveCommands(String strCommands)
方法的参数接收一个json字符串（注意：在Android4.2之后，为了提高代码安全性，方法必须使用注解@JavascriptInterface，否则无法调用）
1.3 创建一个字符串常量，作为android与js通信的接口，即字符串映射对象
public static final String JAVAINTERFACE = "javaInterface";
1.4 添加javascript接口:
CustomWebViewClient m = new CustomWebViewClient (this, webview);
webview.addJavascriptInterface(m, CustomWebViewClient .javaInterface);
//第一个参数，其实就是告诉js，我提供给哪个对象给你调用，这样js就可以调用对象里面的方法
1.5 现在就js就可以调用原生方法了
//参数一般为json格式
var json = {"name":"javascript"};
//javaInterface是上面所说的字符串映射对象
window.javaInterface.receiveCommands(JSON.stringify(json));
此种方式的缺点:window.javaInterface.receiveCommands(JSON.stringify(json))这样的js代码并不适用于ios，如果用以上的方法，就得分别为android和ios各写一套js代码。
1.6 JsBridge的通讯协议
(1)定义一个类CommandProtocal
        public String methodName; //方法名字
         public Object methodArgs; //方法参数
         public String callbackId;   //调用id
         public String returnCallbackId; // 返回数据的调用id
         public Object returnCallbackData; 调用返回的数据public CommandProtocal (JSONObject json)
构造器中输入JSONObject 并转化成对应的字段
同时，也可以将对应的字段组成一个JSONObject 并输出。
(2)定义一个命令解析以后，执行方法的接口
    public interface ExecuteMethod {
         /**
          * 执行方法
          *
          * @param args     方法参数
          * @param callback 回调方法
          */
         void execute(Object args, Callback callback);
     }(3)定义一个存储命令执行方法的HashMap，key就是方法的名字
Map<String, ExecuteMethod> mMap = new HashMap<>();
(4)原生绑定命令执行方法，提供给JS调用
    public void bindExecuteMethod(String name, ExecuteMethod method) {
         synchronized (this) {
             mMap.put(name, method);
         }
     }(5)JS调用receiveCommands，原生接收到JsonArray类型的命令字符串，进行解析，根据methodName字段从mMap 中取出ExecuteMethod 回调execute(Object args, Callback callback)执行方法。
2. 第二种调用原生方法
这种方法实现的思想是js发出一个url请求，并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url，解析url中携带的参数，并根据参数信息进行相应的操作。
2.1 与方法一相同，首先都需要对webview进行初始化
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true); //允许在WebView中使用js
2.2 Js中的代码
$("#showtoast").click(function () {
var json = {"data": "I am a toast"};
window.location.href="protocol://android?code=toast&data="+JSON.stringify(json);
});
$("#call").click(function () {
var json = {"data": "10086"};
window.location.href="protocol://android?code=call&data="+JSON.stringify(json);
});
这里定义两个点击事件，分别控制android显示吐司和打电话的操作。其中，protocol://android为自定义的H5与android间的通信协议，与http请求进行区分。code规定了要进行的操作，data为传输的数据。
2.3 Android中的代码:
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
/**
* 通过判断拦截到的url是否含有pre，来辨别是http请求还是调用android方法的请求
*/
String pre = "protocol://android";
if (!url.contains(pre)) {
//该url是http请求，用webview加载url
return false;
}
//该url是调用android方法的请求，通过解析url中的参数来执行相应方法
Map map = getParamsMap(url, pre);
String code = map.get("code");
String data = map.get("data");
parseCode(code, data);
return true;
}
});
其中，getParamsMap()方法从拦截到的url解析出code，data参数，parseCode()方法将根据不同的code进行相应的操作，代码如下：
private Map getParamsMap(String url, String pre) {
ArrayMap queryStringMap = new ArrayMap<>();
if (url.contains(pre)) {
int index = url.indexOf(pre);
int end = index + pre.length();
String queryString = url.substring(end + 1);
String[] queryStringSplit = queryString.split("&");
String[] queryStringParam;
for (String qs : queryStringSplit) {
if (qs.toLowerCase().startsWith("data=")) {
//单独处理data项，避免data内部的&被拆分
int dataIndex = queryString.indexOf("data=");
String dataValue = queryString.substring(dataIndex + 5);
queryStringMap.put("data", dataValue);
} else {
queryStringParam = qs.split("=");
String value = "";
if (queryStringParam.length > 1) {
//避免后台有时候不传值,如“key=”这种
value = queryStringParam[1];
}
queryStringMap.put(queryStringParam[0].toLowerCase(), value);
}
}
}
return queryStringMap;
}
 
private void parseCode(String code, String data) {
if(code.equals("call")) {
try {
JSONObject json = new JSONObject(data);
String phone = json.optString("data");
//执行打电话的操作，具体代码省略
PhoneUtils.call(this, phone);
} catch (JSONException e) {
e.printStackTrace();
}
return;
}
if(code.equals("toast")) {
try {
JSONObject json = new JSONObject(data);
String toast = json.optString("data");
Toast.makeText(this, toast, Toast.LENGTH_SHORT).show();
} catch (JSONException e) {
e.printStackTrace();
}
return;
}
}
最后，特别说明一下shouldOverrideUrlLoading()方法的返回值问题，该方法的返回值有三种：
1.返回true，即根据代码逻辑执行相应操作，webview不加载该url；
2.返回false，除执行相应代码外，webview加载该url；
3.返回super.shouldOverrideUrlLoading()，点进父类中，我们可以看到，返回的还是false。
 
3.原生调用Js
//首先设置Webview支持JS代码 webView.getSettings().setJavaScriptEnabled(true);
若调用的js方法没有返回值，则可以直接调用mWebView.loadUrl(“javascript:do());其中do是js中的方法;
若有返回值时我们可以调用mwebview,evaluteJavascript方法;
@TargetApi(Build.VERSION_CODES.KITKAT)
    public void onSum(View view){
        webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(getApplicationContext(),
                        "相加结果："+value, Toast.LENGTH_SHORT).show();
            }
        });
    }

    public void onDoing(View view){
        String msg = "测试";
        webView.loadUrl("javascript:showInfoFromJava('"+msg+"')");
    }对应的js方法:
function sum(a,b){
    return a+b;
    }

    function showInfoFromJava(){
    document.getElementById("p").innerHTML="Java成功调的JS方法";
    }