Hybird App混合开发

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 AndroidInterface(), 'android');  

public class AndroidInterface(){
	@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() {
                    @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.google.gson.Gson;
import com.just.agentweb.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相互调用（推荐√）

---