DSBridge for native Js interaction

As mentioned in the HTML file loading, the APP takes the JSON format data from the background and transmits it to the HTML template file for rendering interaction, as shown in the following HTML code

Function <img SRC ="http://equation.kaoyanvip.cn/?mml=%3Cmath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%22%3E%3Cmi%3Ef%3C %2Fmi%3E%3Cmfenced%3E%3Cmrow%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmi%3Ey%3C%2Fmi%3E%3C%2Fmrow%3E%3C%2Fmfenced% 3E%3Cmo%3E%3D%3C%2Fmo%3E%3Cmfenced%20open%3D%22%7B%22%20close%3D%22%22%3E%3Cmtable%20columnalign%3D%22left%22%3E%3Cmtr%3 E%3Cmtd%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmi%3Ey%3C%2Fmi%3E%3Cmi%3Esin%3C%2Fmi%3E%3Cmfrac%3E%3Cmn%3E1%3C%2Fmn%3E%3Cmsqrt%3E%3Cmsu p%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmn%3E2%3C%2Fmn%3E%3C%2Fmsup%3E%3Cmo%3E%2B%3C%2Fmo%3E%3Cmsup%3E%3Cmi%3Ey%3C%2Fmi%3E%3Cmn%3E2%3 C%2Fmn%3E%3C%2Fmsup%3E%3C%2Fmsqrt%3E%3C%2Fmfrac%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0 %3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmsup%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmn%3E2%3C%2Fmn%3E%3C%2Fmsup%3E%3Cmo%3E%2B% 3C%2Fmo%3E%3Cmsup%3E%3Cmi%3Ey%3C%2Fmi%3E%3Cmn%3E2%3C%2Fmn%3E%3C%2Fmsup%3E%3Cmo%3E%26%23x2260%3B%3C%2Fmo%3E%3Cmn%3E0%3C%2 Fmn%3E%3Cmo%3E%2C%3C%2Fmo%3E%3C%2Fmtd%3E%3C%2Fmtr%3E%3Cmtr%3E%3Cmtd%3E%3Cmn%3E0%3C%2Fmn%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmo%3E %26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cm o%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E %3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fm o%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C %2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3 B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23x A0%3B%3C%2Fmo%3E%3Cmsup%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmn%3E2%3C%2Fmn%3E%3C%2Fmsup%3E%3Cmo%3E%2B%3C%2Fmo%3E%3Cmsup%3E%3Cmi%3Ey %3C%2Fmi%3E%3Cmn%3E2%3C%2Fmn%3E%3C%2Fmsup%3E%3Cmo%3E%3D%3C%2Fmo%3E%3Cmn%3E0%3C%2Fmn%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmo%3E%26% 23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3Cmo%3E%26%23xA0%3B%3C%2Fmo%3E%3C%2Fmtd%3E%3C%2Fmtr%3E%3C%2Fmtable%3E %3C%2Fmfenced%3E%3C%2Fmath%3E" alt="
       $f (x, y) = "\begin{array}{c} x y \sin \frac{1}{\sqrt{x^{2} + y^{2}}}, & #xA0; & #xA0; & #xA0; x^{2} + y^{2} & #x2260; 0, \\ 0, & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; & #xA0; x^{2} + y^{2} = 0, & #xA0; & #xA0; & #xA0; \end{array}"$ " class="wiris-tex">, < img SRC ="http://equation.kaoyanvip.cn/?mml=%3Cmath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%22%3E%3Cmi%3Ef%3C %2Fmi%3E%3Cmo%3E(%3C%2Fmo%3E%3Cmi%3Ex%3C%2Fmi%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmi%3Ey%3C%2Fmi%3E%3Cmo%3E)%3C%2Fmo%3E%3C%2Fmath %3E" alt="
       $f (x, y)$ " class="wiris-tex"> at the point <img SRC ="http://equation.kaoyanvip.cn/?mml=%3Cmath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%22%3E%3Cmo%3E(%3C %2Fmo%3E%3Cmn%3E0%3C%2Fmn%3E%3Cmo%3E%2C%3C%2Fmo%3E%3Cmn%3E0%3C%2Fmn%3E%3Cmo%3E)%3C%2Fmo%3E%3C%2Fmath%3E" alt="
       $(0, 0)$ " class="wiris-tex"> placeCopy the code

This code will show an exception on some phones, something like this

Tencent’s X5WebView is used here, plus adapt to the screen size

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Copy the code

After the display effect

At the same time, it also needs to interact with JS. DSBridge is selected here, supporting X5 kernel.

Gradle associated

implementation 'com. Making. Wendux: DSBridge - Android: x 5-3.0 - the SNAPSHOT'
Copy the code

use

dsbridge is the relative path to the js file provided by this library. At the same time plus

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Copy the code

Prepare a simple HTML file for the size of your phone’s screen

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script src="dsbridge.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
Copy the code

The div block is used to display HTML code

Native passes values to JS

The first argument to the webView.callHandler() method is the name of the convention registration, which is consistent with the JS acceptance; The second argument is the value to be passed, which is converted to a JSON String to be passed to the front end; The third argument is the callback that accepts the JS return, which can be used to notify the native after the JS acceptance is successful.

HtmlData data = new HtmlData();
data.html = txt;
webView.callHandler("nativeToJs", new Object[]{new Gson().toJson(data)}, new OnReturnValue<String>() {
    @Override
    public void onValue(String o) {

    }
});
Copy the code

Dsbridle.register () accepts the first parameter as the above name, consistent with the native; Parse (). The return value of the method is passed to the native, corresponding to the third parameter above.

<script>
    dsBridge.register('nativeToJs'.function (data) {
        var value = JSON.parse(data);
        document.getElementById("test").innerHTML = value.html;
        return "success"
    });
</script>
Copy the code

Js passes values to native

Js passes values through the dsbridge.call () method, which simply simulates the click event. The first parameter is the name of the convention registration, which is the same as the native acceptance prescription name. The second argument is the value to be passed; The third parameter is the callback that accepts the native return.

function test(){
    dsBridge.call("jsToNative"."test".function (res) {
        console.log(res)
    });
}
Copy the code

Natively accepted, with JavascriptInterface annotations, the method name is the same as the registration name and the first argument is the value passed; The second argument calls back information to js;

webView.addJavascriptObject(new JsApi(), null);

public class JsApi {

    @JavascriptInterface
    public void jsToNative(Object msg, CompletionHandler<String> handler) {
      
  handler.complete(msg+"Callback to JS"); }}Copy the code

Presented here is simple the use of native js interaction, more can refer to https://github.com/wendux/DSBridge-Android making documents

Gradle associated

use

Native passes values to JS

Js passes values to native

Related Posts

Flutter Animated (2.7)

Android multithreading

Building a Quality user Experience quickly with Flutter | Google Play Developer Podcast # 16