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傳送參數