[Hybrid App]--Android混合開發,Android、Js的交互

AndroidJs通信

Hybird App

Hybrid 開發：JsBridge - Web 和客戶端的橋

Hybrid開發中，web頁面往往會跟native進行交互，而JSBridge就是web頁面和native進行通信的橋梁，通過JSBridge可以實現web調用native的方法，native可以通過webview.loadUrl之類的方法，將javascript:xxx代碼放在頁面執行，這有點類似在瀏覽器地址欄直接輸入：javascript:xxx

 

 

web和native進行通信，JsBridge的多種形式

①JavaScriptInterface

// Android java代碼
mWebView.addJavascriptInterface(new Class(), 'android');  

public class Class(){
@JavascriptInterface
public void method(){

}
} 


// js 代碼
window.android.method();

②改寫瀏覽器原有對象

通過修改原來瀏覽器的window某些方法，然后攔截固定規則的參數，然后分發給Java對應的方法去處理。這里常用的是以下四個方法：

• alert，可以被webview的onJsAlert監聽
• confirm，可以被webview的onJsConfirm監聽
• console.log，可以被webview的onConsoleMessage監聽
• prompt，可以被webview的onJsPrompt監聽

AgentWeb開源框架的基本使用

Android

if(mAgentWeb!=null){
        //注入對象
        mAgentWeb.getJsInterfaceHolder().addJavaObject("android",new AndroidInterface(mAgentWeb,this.getActivity()));
    }



mAgentWeb.getJsAccessEntrace().quickCallJs("callByAndroidParam","Hello ! Agentweb");



mAgentWeb.getJsAccessEntrace().quickCallJs("callByAndroidMoreParams", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        Log.i("Info","value:"+value);
                    }
                },getJson(),"say:", " Hello! Agentweb");




private String getJson(){

    String result="";
    try {

        JSONObject mJSONObject=new JSONObject();
        mJSONObject.put("id",1);
        mJSONObject.put("name","Agentweb");
        mJSONObject.put("age",18);
        result= mJSONObject.toString();
    }catch (Exception e){

    }

    return result;
}

JsBridge

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.google.gson.Gson;
import com.just.agentweb.AgentWeb;

/**
* Created by cenxiaozhong on 2017/7/1.
* source code  https://github.com/Justson/AgentWeb
*/

public class JsbridgeWebFragment extends    AgentWebFragment {

    public static JsbridgeWebFragment getInstance(Bundle bundle){

    JsbridgeWebFragment mJsbridgeWebFragment =new JsbridgeWebFragment();
    if(mJsbridgeWebFragment !=null){
        mJsbridgeWebFragment.setArguments(bundle);
    }

    return mJsbridgeWebFragment;
}

private BridgeWebView mBridgeWebView;

@Override
public String getUrl() {
    return super.getUrl();
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

    mBridgeWebView=new BridgeWebView(getActivity());
    mAgentWeb = AgentWeb.with(this)//
            .setAgentWebParent((ViewGroup) view, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))//
            .useDefaultIndicator(-1, 2)//
            .setAgentWebWebSettings(getSettings())//
            .setWebViewClient(new BridgeWebViewClient(mBridgeWebView))
            .setWebChromeClient(mWebChromeClient)
            .setWebView(mBridgeWebView)
            .setSecurityType(AgentWeb.SecurityType.STRICT_CHECK)
//          .setDownloadListener    (mDownloadListener) 4.0.0 刪除該API
            .createAgentWeb()//
            .ready()//
            .go(getUrl());




    initView(view);



    mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {

        @Override
        public void handler(String data, CallBackFunction function) {
            function.onCallBack("submitFromWeb exe, response data 中文 from Java");
        }

    });

    User user = new User();
    Location location = new Location();
    location.address = "SDU";
    user.location = location;
    user.name = "Agentweb --> Jsbridge";



    mBridgeWebView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {
            Log.i(TAG,"data:"+data);
        }
    });

    mBridgeWebView.send("hello");



}





static class Location {
    String address;
}

static class User {
    String name;
    Location location;
    String testStr;
}

}

推薦閱讀

• Hybrid 開發：JsBridge - Web 和客戶端的橋
• AgentWeb-Android-H5混合開發
• AgentWeb WebView 與 Android交互 JS調用 Android(推薦√)
• Android-使用JsBridge來優化js與本地webview的交互
• AgentWeb中JS交互開發
• 安卓與html混合開發之原生與js相互調用（推薦√）

---