原生Js交互之DSBridge

提到的加载html 文件的,app拿到后台的json格式数据,传到html模板文件里进行渲染交互,如下的一段html代码

设函数<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>f</mi><mfenced><mrow><mi>x</mi><mo>,</mo><mi>y</mi></mrow></mfenced><mo>=</mo><mfenced open="{" close=""><mtable columnalign="left"><mtr><mtd><mi>x</mi><mi>y</mi><mi>sin</mi><mfrac><mn>1</mn><msqrt><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup></msqrt></mfrac><mo>,</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup><mo>&#x2260;</mo><mn>0</mn><mo>,</mo></mtd></mtr><mtr><mtd><mn>0</mn><mo>,</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mn>0</mn><mo>,</mo><mo>&#xA0;</mo><mo>&#xA0;</mo><mo>&#xA0;</mo></mtd></mtr></mtable></mfenced></math><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>f</mi><mo>(</mo><mi>x</mi><mo>,</mo><mi>y</mi><mo>)</mo></math>在点<math xmlns="http://www.w3.org/1998/Math/MathML"><mo>(</mo><mn>0</mn><mo>,</mo><mn>0</mn><mo>)</mo></math>

这段代码在部分手机上会显示异常,类似这种

image.png

这里使用腾讯的X5WebView ,加上适应屏幕大小


后的显示效果

image.png

同时还需要与js进行交互,这里选用 DSBridge,支持X5内核。

gradle 关联

implementation 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'

使用

html 文件里需要引用这个库提供的js文件 dsbridge 的相对路径。
同时加上


注‘Android技术交流群878873098,欢迎大家加入交流,畅谈!本群有免费学习资料视频’并且免费分享源码解析视频

适应手机屏幕的大小
准备一个简单的html文件




    
    Title
    
    


div 块用于展示html代码的

原生传递值给js

通过webView.callHandler() 方法调用
第一个参数是约定注册的名称,与js接受处一致;
第二个参数是要传递的值,这里将data转成了 json String 的传给前端;
第三个参数是接受js返回的回调,可用于js接受成功后,再去通知原生。

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

    }
});

js接受传值,直接通过dsBridge.register() 方法接受
第一个参数是上面的注册名,与原生保持一致;
第二个是js的方法,参数data就是 传递的值,这里通过JSON.parse() 格式化,方法的return返回值就是传递给原生的,对应上面的第三个参数。


js传值给原生

js通过dsBridge.call() 方法传值,简单模拟了点击事件来传递。
第一个参数是约定注册的名称,与原生接受处方法名一致;
第二个参数是要传递的值;
第三个参数是接受原生返回的回调。

function test(){
    dsBridge.call("jsToNative", "test", function (res) {
        console.log(res)
    });
}

原生接受,通过JavascriptInterface注解,方法名与注册名一致
第一个参数是传递的值;
第二个参数可回调信息给js;

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

public class JsApi {

    @JavascriptInterface
    public void jsToNative(Object msg, CompletionHandler handler) {
      
  handler.complete(msg+"回调给js");
    }
}

这里介绍的是简单的原生js交互的使用,更多的可以参考github文档https://github.com/wendux/DSBridge-Android

注‘Android技术交流群878873098,欢迎大家加入交流,畅谈!本群有免费学习资料视频’并且免费分享源码解析视频

你可能感兴趣的:(原生Js交互之DSBridge)