关于安卓jsbridge的使用

目前我所接触到的，JS与原生的交互有两种方式，第一种是通过注入方法的形式，第二种是拦截url的形式；

JSBridge是JS和Native之间的一种通信方式，也就是定义Native和JS的通信，其中Native只通过一个固定的桥对象调用JS，而JS也只通过固定的桥对象调用Native。

流程：H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回调。

其实说白了原理也是对url进行拦截解析处理的；

在这里通过编写一个CustomWebViewNew.java类对交互集合在一起处理，web页面也是采用本地testPage.html。后面提供这两个文件的代码。

先看使用方式：

一、添加依赖（或者导入aar）

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

二、使用 BridgeWebView对象，BridgeWebView为jsbridge提供的继承与webView的实现类，内部在setWebViewClient的使用，传入的是自定义的WebViewClient对象，在shouldOverrideUrlLoading方法中对url重新进行了解析处理，然后回调到对应的执行方法中。BridgeWebView把他当作webView使用就行。

布局中使用：


代码中使用：
BridgeWebView webView = findViewById(R.id.webView)；
CustomWebViewNew customWebViewNew = new CustomWebViewNew(this, webView, "file:android_asset/testPage.html");

三、交互，通过customWebViewNew对象去调用交互方法，比如调用nativeCallJs()。此方法为原生调用JS，其中“functionInJs”为规定的方法行，CallBackFunction为回调接口，当JS执行完后可以用来通过此接口来回传数据给原生，代码如下；

customWebViewNew.nativeCallJs("functionInJs", "发送数据给web指定接收", new CallBackFunction() {
    @Override
    public void onCallBack(String s) {
        LogUtil.e(TAG, "来自web的回传数据：" + s);
    }
});

主要交互在CustomWebViewNew类中，下面贴出完整代码，交互的方法都有备注，看备注即可

CustomWebViewNew.java

class CustomWebViewNew {
    private final String TAG = webViewUtil.class.getSimpleName();
    private BridgeWebView bridgeWebView;
    private Context context;
    private String url;

    public CustomWebViewNew(Context context, BridgeWebView bridgeWebView, String url) {
        this.bridgeWebView = bridgeWebView;
        this.context = context;
        this.url = url;
    }

//    public CustomWebViewNew(Context context, BridgeWebView bridgeWebView, String url, boolean isRedirectWebView) {
//        this.bridgeWebView = bridgeWebView;
//        this.context = context;
//        this.url = url;
//        this.isRedirectWebView = isRedirectWebView;
//    }

    public void init() {
        bridgeWebView.getSettings().setDomStorageEnabled(true);
        bridgeWebView.loadUrl(url);
        initWebViewListener();
        jsCallNative();
    }

    //js调用原生方法，需要指定方法名称,可在此方法里面继续添加交互信息
    private void jsCallNative() {
        bridgeWebView.registerHandler("submitFromWeb", (data, function) -> {
            LogUtil.e(TAG, "指定Handler接收来自web的数据：" + data);
            function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
        });
    }


    //原生调用js方法，需要指定方法名称
    public void nativeCallJs(String functionName, String param, CallBackFunction function) {
        bridgeWebView.callHandler(functionName, param, function);
    }

    //默认发送数据给web端接收
    public void send(String data) {
        bridgeWebView.send(data, new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                LogUtil.e(TAG, "来自web的回传数据：" + data);
            }
        });
    }

    //默认接受来自web端的数据，不用指定方法名
    private void setDefaultHandler() {
        bridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                LogUtil.e(TAG, "DefaultHandler接收全部来自web的数据：" + data);
                function.onCallBack("DefaultHandler收到Web发来的数据，回传数据给你");
            }
        });
    }

    private void initWebViewListener() {

        bridgeWebView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                }
                return false;
            }
        });

        bridgeWebView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                return true;
            }
        });
        bridgeWebView.setWebViewClient(new MyWebViewClient(bridgeWebView));
        bridgeWebView.setWebChromeClient(new MyWebChromeClient());
    }

    class MyWebChromeClient extends WebChromeClient {

        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            webViewTitle = title;
        }

        @Override
        public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            LogUtil.d(TAG, "WebView--progress1:" + newProgress);
        }

        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            LogUtil.d(TAG, "message: " + consoleMessage.message() + "\n\nlineNumber: "
                    + consoleMessage.lineNumber() + "\n\nsourceId: " + consoleMessage.sourceId());
            return super.onConsoleMessage(consoleMessage);
        }

        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) {
            return true;
        }

        void openFileChooser(ValueCallback uploadMsg, String acceptType) {
        }

        // For Android < 3.0
        public void openFileChooser(ValueCallback uploadMsg) {
            openFileChooser(uploadMsg, "");
        }

        // For Android > 4.1.1
        public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) {
            openFileChooser(uploadMsg, acceptType);
        }
    }

    class MyWebViewClient extends BridgeWebViewClient {

        public MyWebViewClient(BridgeWebView webView) {
            super(webView);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            return true;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }
    }

}

testPage.html

    
    



WebViewJsBridge

    发送数据给默认Handler接收




    发送数据给指定Handler接收



调用打印信息