android and h5 interaction

Keywords: Android Mobile Javascript Java

Modern mobile applications are almost both native and h5 mixed open, which not only ensures the user experience, but also enables the app to have the ability of dynamic update to a certain extent. At the same time, it is conducive to cross platform development and reduce human costs. The interaction between app and h5 can't be avoided by mixed development. Today we will talk about the interaction between android and h5.

1. Use native WebView

h5 calls android

webView.getSetting().setJavaScriptEnabled(true);//Let webView support js
webView.addJavaScriptInterface(new JSInterface(),"android");    //Expose the JSInterface object to js, which can be accessed through window.android in js, where JSInterface is an internal class


public class JSInterface{

    /**
    * The method provided for h5 call must be marked with @ JavascriptInterface annotation, public decorated method
    * @ data h5 Data passed to native app
    */
    @JavascriptInterface
    public void webToApp(String data){
    }
}

h5 calls window.android.webToApp to access the native webToApp method.

webView calls h5

webView.loadUrl("javascript:" + JS method name + "(data transferred from app to h5)");

2. Using agent Web

Agent web portal

h5 calling agentveb

//JSInterface object is exposed to js, which can be accessed through window.android in js, where JSInterface is an internal class
agentWeb.getInterfaceHolder.addJavaObject("android",new JSInterface());

public class JSInterface{

    /**
    * The method provided for h5 call must be marked with @ JavascriptInterface annotation, public decorated method
    * @ data h5 Data passed to native app
    */
    @JavascriptInterface
    public void method(String data){
    }
}

Agentveb calls h5

agentWeb.getJsAccessEntra().quickCallJs("JSMethodName","app to h5 Transmitted data");

3.JsBridge

JsBridge portal

h5 calls android:

    android code
//Create the Android method method method to call h5, the parameter returned by the web is data, and the function() is returned
        webView.registerHandler("androidMethod", new BridgeHandler() {
            @Override
            /**
            * @data h5 Data returned to app
            */
            public void handler(String data, CallBackFunction function) {
                function.onCallBack("androiddata");//Data from app to h5
            }

        });
    //h5 calling webView method
           window.WebViewJavascriptBridge.callHandler(
                'androidMethod'     //Method to call app
                , {'param': 'Chinese test'} //Data to app
                , function(responseData) {   //Data from app
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );

WebView (agent WEB) and h5 intermodulation scheme

Android terminal

public class JSInterface{

    //The method provided for h5 call must be marked with @ JavascriptInterface annotation, public decorated method
    @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;
        }
    }
}
Write only one webToApp on Android side to call h5. When h5 calls webToApp, it will pass in the corresponding data. Android will parse the data and perform different operations according to the different data. For example, in the code above chestnut, if we parse the data and the received data is finishActivity calling finish,h5 needs Android parameters to call window.android.webToApp("{'method':'getAndroidParams' }"), and then we call agentveb. Getjsaccessentra(). Quickcalljs (" apptoweb ", params); pass parameters to the web

Posted by asgerhallas on Tue, 07 Jan 2020 03:10:33 -0800