Android 混合H5开发两种模式

1.模式一：原生HyBrid

1.JS

2.JAVA

1.XML

2.打开JS通道

WebSettings webSettings = mTestWB.getSettings();
webSettings.setJavaScriptEnabled(true);

3.WebView的addJavascriptInterface方法去注入一个我们自己写的interface。

mTestWB.addJavascriptInterface(new JsInterface(), "control");
public class JsInterface {
    //JS中调用Java的方法
    @JavascriptInterface
    public void showToast(String toast){
        Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
        //Java调用JS中的方法
        log("show toast success");
    }
//JAVA调用JS
    public void log(final String msg){
        mTestWB.post(new Runnable() {
            @Override
            public void run() {
                mTestWB.loadUrl("javascript: log(" + "'" + msg + "'" + ")");
            }
        });
    }
}

 

4.loadURL

mTestWB.loadUrl("file:///android_asset/index.html");

模式二：com.github.lzyzsd.jsbridge.BridgeWebView

1.H5界面

Java

2.xml

3.bridgeWebView初始化

bridgeWebView.setDefaultHandler(new DefaultHandler());
bridgeWebView.setWebChromeClient(new WebChromeClient());

4.LoadURL

bridgeWebView.loadUrl("file:///android_asset/a.html");

5.Android调用JS方法

* 参数一：js中的方法名称
* 参数二：Android传递给js数据
* 参数三：回调接口，data为Android调用js方法的返回数据
bridgeWebView.callHandler("functionInJs", "Android调用js的方法", new CallBackFunction() {
    @Override
    public void onCallBack(String data) {
        Log.e("TAG", "onCallBack:" + data);
    }
});

6.JS调用Android方法

*  参数一：submitFromWeb就是注册供JS调用的方法名，
*  参数二：data是JS传过来的参数，
*  参数三：CallBackFunction 函数中需要把JS需要的response返回给JS
bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        Log.e("TAG", "js返回：" + data);
        //显示js传递给Android的消息
        Toast.makeText(MainActivity.this, "js返回:" + data, Toast.LENGTH_LONG).show();
        //Android返回给JS的消息
        function.onCallBack("我是js调用Android返回数据：" +
               etText .getText().toString());
    }
});

7.依赖库

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
allprojects {
    repositories {
        jcenter()
        maven{url "https://jitpack.io"}
    }
}

 

 技术参考

 

https://blog.csdn.net/u013564742/article/details/84590934

https://blog.csdn.net/DT235201314/article/details/83314866

https://blog.csdn.net/jdsjlzx/article/details/51376739