android 与 h5 交互

现代的移动应用几乎都是原生和h5混合开放,这样既保证了用户体验,又使得APP在一定程度上具备动态更新能力,同时有利于实现跨平台开发,减少人力成本。混合开发自然避免不了app与h5的交互。今天我们就来谈谈android 和 h5 的交互。

1.使用原生的WebView

h5 调用 android

webView.getSetting().setJavaScriptEnabled(true);//让webView支持js
webView.addJavaScriptInterface(new JSInterface(),"android");    //将JSInterface对象暴露给js,在js中可以通过  window.android访问到这个对象,其中JSInterface为内部类


public class JSInterface{

    /**
    * 提供给h5调用的方法必须是有@JavascriptInterface注解标注的,public修饰的方法
    * @ data h5传给原生app的数据
    */
    @JavascriptInterface
    public void webToApp(String data){
    }
}
           

h5调用window.android.webToApp就能访问原生的webToApp方法了。

webView 调用 h5 的方法

webView.loadUrl(“javascript:”+JS方法名+”(app给h5传送的数据)”);

2.使用agentWeb

agentWeb传送门

h5 调用 AgentWeb

//JSInterface对象暴露给js,在js中可以通过   window.android访问到这个对象,其中JSInterface为内部类
agentWeb.getInterfaceHolder.addJavaObject("android",new JSInterface());

public class JSInterface{

    /**
    * 提供给h5调用的方法必须是有@JavascriptInterface注解标注的,public修饰的方法
    * @ data h5传给原生app的数据
    */
    @JavascriptInterface
    public void method(String data){
    }
}
           

AgentWeb调用h5

3.JsBridge

JsBridge传送门

h5调用android:

android端代码
           

//创建androidMethod方法给h5调用,web返回的参数为data,返回function()
        webView.registerHandler("androidMethod", new BridgeHandler() {
            @Override
            /**
            * @data h5返回给app的数据
            */
            public void handler(String data, CallBackFunction function) {
                function.onCallBack("androiddata");//app传给h5的数据
            }

        });
           

//h5调用webView的方法
           window.WebViewJavascriptBridge.callHandler(
                'androidMethod'     //调用app的方法
                , {'param': '中文测试'} //传给app的数据
                , function(responseData) {   //从app传过来的数据
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );
           

WebView(AgentWeb)与h5互调方案

Android端

public class JSInterface{

    //提供给h5调用的方法必须是有@JavascriptInterface注解标注的,public修饰的方法
    @JavascriptInterface
    public void webToApp(String data){
        JSONObject jsonObject = new JSONObject(data);
        String method = jsonObject.getString("method");
        swithch(method){
            case "finishActivity";
                finish();
                break;
            case "open":
                startActivity(new Intent(context,activity));
                break;
            case "getAndroidParams":
                String params = "toH5Params";
                agentWeb.getJsAccessEntra().quickCallJs("appToWeb",params);
                break;
        }
    }
}
           

在Android端只写一个webToApp给h5调用,h5调用webToApp的时候传入相应的数据,Android解析数据data,根据data的不同进行不同的操作,举个栗子上面的代码中我们解析data后如果接收到的数据是finishActivity调用finish,h5需要Android的参数可以调用window.android.webToApp("{'method':'getAndroidParams'}"),然后我们就会调用agentWeb.getJsAccessEntra().quickCallJs("appToWeb",params);给web传送参数