[移动开发]关于安卓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使用就行。

布局中使用：
<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

代码中使用：
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<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            return true;
        }

        void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
        }

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

        // For Android > 4.1.1
        public void openFileChooser(ValueCallback<Uri> 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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script>

       function testClick() {
           //发送消息给java代码
           var data = '发送消息给java代码全局接收';
           //第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
           window.WebViewJavascriptBridge.send(
               data
               , function(responseData) {
                  bridgeLog('来自Java的回传数据： ' +responseData);
               }
           );
       }

       function testClick1() {
           //调用本地java方法
           //第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
           var data='发送消息给java代码指定接收';
           window.WebViewJavascriptBridge.callHandler(
               'submitFromWeb'
               ,data
               , function(responseData) {
                   bridgeLog('来自Java的回传数据： ' + responseData);
               }
           );
       }

       function bridgeLog(logContent) {
           document.getElementById("log_msg").innerHTML = logContent;
       }

       //注册事件监听
       function connectWebViewJavascriptBridge(callback) {
           if (window.WebViewJavascriptBridge) {
               callback(WebViewJavascriptBridge)
           } else {
               document.addEventListener(
                   'WebViewJavascriptBridgeReady'
                   , function() {
                       callback(WebViewJavascriptBridge)
                   },
                   false
               );
           }
       }
       //注册回调函数，第一次连接时调用 初始化函数
       connectWebViewJavascriptBridge(function(bridge) {
           bridge.init(function(message, responseCallback) {
               bridgeLog('默认接收收到来自Java数据： ' + message);
               var responseData = '默认接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });

           bridge.registerHandler("functionInJs", function(data, responseCallback) {
               bridgeLog('指定接收收到来自Java数据： ' + data);
               var responseData = '指定接收收到来自Java的数据，回传数据给你';
               responseCallback(responseData);
           });
       })

    </script>

</head>
<body>
<p>WebViewJsBridge</p>
<div>
    <button onClick="testClick()">发送数据给默认Handler接收</button>
</div>
<br/>
<div>
    <button onClick="testClick1()">发送数据给指定Handler接收</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>