原生Js交互之DSBridge

chunquedong 发布于2019-08-02 11:53 / 1506人阅读

摘要：传值给原生通过方法传值，简单模拟了点击事件来传递。第一个参数是约定注册的名称，与原生接受处方法名一致第二个参数是要传递的值第三个参数是接受原生返回的回调。

文章链接：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg

在上一篇文章「android 记一次富文本加载之路」中介绍了关于android加载富文本的方法，其中提到的加载html 文件的，app拿到后台的json格式数据，传到html模板文件里进行渲染交互，如下的一段html代码

设函数

后的显示效果

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

gradle 关联

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

使用

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

适应手机屏幕的大小
准备一个简单的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

欢迎关注我的个人博客：https://www.manjiexiang.cn/

更多精彩欢迎关注微信号：春风十里不如认识你
一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！

GPU云服务器云服务器 DSBridge 原生js 排序原生js js原生动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53191.html

原生Js交互之DSBridge

摘要：传值给原生通过方法传值，简单模拟了点击事件来传递。第一个参数是约定注册的名称，与原生接受处方法名一致第二个参数是要传递的值第三个参数是接受原生返回的回调。文章链接：https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 记一次富文本加载之路」中介绍了关于android加载富文本的方法，其中提到的加载html...

jemygraw 2019-08-23 12:44 评论0 收藏0
一篇文章了解Js Bridge

摘要：安全安全是很重要的，现在有些实现中使用了，而在之前，存在任意代码执行漏洞，这就会导致严重的安全问题。 showImg(https://segmentfault.com/img/bV4k9Q?w=719&h=372); 什么是JS Bridge 在大多数APP开发过程中，都会通过H5来实现部分功能，而Hybird APP基本90%以上都是H5。现在很少有纯原生的APP。但是，由于H5页面...

Karuru 2019-08-22 14:54 评论0 收藏0