Jsbridge use of the interaction between Android and JS

As we all know, some of the features of the app may be used to H5 development, which will inevitably encounter Java and JS call each other, Android use Webviewjavascriptbridge to achieve JS and Java interaction, here Jsbridge the use of third-party libraries.
GitHub Portal: Https://github.com/lzyzsd/JsBridge

Simple analysis

Java and JS call each other as follows:
Java sends data to JS,JS to receive and pass back to Java
In the same vein, JS sends data to Java,java to receive and back to JS
Both "Default Receive" and "specify receive" are present in both sets of processes
The approximate call flowchart is as follows:

Depend on

Item Build.gradle

repositories {    // ...    maven { url "https://jitpack.io" }}

App Build.gradle

dependencies {    compile ‘com.github.lzyzsd:jsbridge:1.0.4‘}

XML directly using com.github.lzyzsd.jsbridge.BridgeWebView alternative nativeWebView
Also place two Button for test use

<?xml version= "1.0" encoding= "Utf-8"? ><android.support.constraint.constraintlayout xmlns:android= "http:/ /schemas.android.com/apk/res/android "xmlns:app=" Http://schemas.android.com/apk/res-auto "android:layout_width="        Match_parent "android:layout_height=" match_parent "> <button android:id=" @+id/java_to_js_default " Android:layout_width= "180DP" android:layout_height= "wrap_content" android:layout_margin= "10DP" Andro Id:text= "Java sent to JS default receive" app:layout_constrainttop_tobottomof= "@+id/nav_bar"/> <button android:id= "@ +id/java_to_js_spec "android:layout_width=" 180DP "android:layout_height=" Wrap_content "android:layout _margin= "10DP" android:text= "Java sent to JS specify receive" app:layout_constrainttop_tobottomof= "@+id/java_to_js_default"/&    Gt <com.github.lzyzsd.jsbridge.bridgewebview android:id= "@+id/webview" android:layout_width= "0DP" and      roid:layout_height= "0DP"  app:layout_constraintbottom_tobottomof= "Parent" app:layout_constraintleft_toleftof= "parent" App:layout_con straintright_torightof= "Parent" app:layout_constrainttop_tobottomof= "@+id/java_to_js_spec"/></ Android.support.constraint.constraintlayout>

The HTML file simply places two buttons to send data, while providing printing information

Here I ran a simple Django project on a local, and served with a service

webView.loadUrl("http://10.0.0.142:8000/cake/jsbridge");

webviewLoad page


Java sends data to JS

buttonRegister for monitoring

javaToJsDefault.setOnClickListener(this);javaToJsSpec.setOnClickListener(this);

button Click event, Java Pass data to JS

 //java pass data to JS @Override public void OnClick (View v) {switch (V.getid ()) {R.I                    D.java_to_js_default://default Receive Webview.send ("Send data to JS default receive", New Callbackfunction () { @Override public void OnCallback (String data) {//processing data for JS callbacks Toast.maket                    Ext (webtestactivity.this, data, Toast.length_long). Show ();                }                });            Break Case R.ID.JAVA_TO_JS_SPEC://Specify Receive Parameters Functioninjs Webview.callhandler ("Functioninjs", "Send data to J S specify receive ", New Callbackfunction () {@Override public void OnCallback (String data) {//                    JS Callback Data Toast.maketext (webtestactivity.this, data, Toast.length_long). Show ();                }                });            Break        Default:break; }    }

JS webviewjavascriptbridge Register event Listener, receive data

<script>//Register event Listener, Initialize function Setupwebviewjavascriptbridge (callback) {if (window. Webviewjavascriptbridge) {callback (Webviewjavascriptbridge)} else {Document.addev Entlistener (' Webviewjavascriptbridgeready ', function () {CALLB           ACK (Webviewjavascriptbridge)}, False); }}//callback function, receive the data sent by Java Setupwebviewjavascriptbridge (bridge) {//default receive BRIDG E.init (function (message, responsecallback) {document.getElementById ("show"). InnerHTML = ' default data received for Java: ' +               Message               var responsedata = ' js default received, and return data to Java '; Responsecallback (ResponseData);           Callback data to Java});               Specify receive, parameter FUNCTIONINJS is consistent with Java Bridge.registerhandler ("Functioninjs", function (data, responsecallback) { document.getElementById("Show"). InnerHTML = ' Specifies data received from Java: ' + ';               var responsedata = ' js Specifies that the receiver is complete and the data is returned to Java '; Responsecallback (ResponseData);       Callback data to Java}); }) <script>

Java sent to JS default receive

Java sent to JS specify receive

JS sends data to Java

JS button Click event, also need WebViewJavascriptBridge the above registration listener callback function

    //js传递数据给java    function jsToJavaDefault() {       var data = ‘发送数据给java默认接收‘;       window.WebViewJavascriptBridge.send(           data           , function(responseData) { //处理java回传的数据              document.getElementById("show").innerHTML = responseData;           }       );   }   function jsToJavaSpec() {       var data=‘发送数据给java指定接收‘;       window.WebViewJavascriptBridge.callHandler(           ‘submitFromWeb‘ //指定接收参数 submitFromWeb与java一致           ,data           , function(responseData) { //处理java回传的数据              document.getElementById("show").innerHTML = responseData;           }       );   }

Java Listener receives data

        //默认接收        webView.setDefaultHandler(new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                String msg = "默认接收到js的数据：" + data;                Toast.makeText(WebTestActivity.this, msg, Toast.LENGTH_LONG).show();                function.onCallBack("java默认接收完毕，并回传数据给js"); //回传数据给js            }        });        //指定接收 submitFromWeb 与js保持一致        webView.registerHandler("submitFromWeb", new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                String msg = "指定接收到js的数据：" + data;                Toast.makeText(WebTestActivity.this, msg, Toast.LENGTH_LONG).show();                function.onCallBack("java指定接收完毕，并回传数据给js"); //回传数据给js            }        });

JS Send to Java default receive

JS sent to Java to specify receive

At this point, the Jsbridge process is complete.
Welcome to follow my blog: https://blog.manjiexiang.cn/
Please pay attention to the public number

Jsbridge use of the interaction between Android and JS