DSBridge的使用

官方文档 DSBridge

三端易用的现代跨平台 Javascript bridge， 通过它，你可以在Javascript和原生之间同步或异步的调用彼此的函数.

安装

1.添加 JitPack repository 到gradle脚本中

 allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
}

2.添加依赖

 dependencies {
	//compile 'com.github.wendux:DSBridge-Android:3.0-SNAPSHOT'
	//support the x5 browser core of tencent
	//compile 'com.github.wendux:DSBridge-Android:x5-3.0-SNAPSHOT'
}

使用步骤

1.新建一个Java类，实现API

 public class JsApi{
 
    @JavascriptInterface
    public String testSyn(Object msg)  {
        return msg + "［syn call］";
    }
    
    @JavascriptInterface
    public void testAsyn(Object msg, CompletionHandler<String> handler) {
        handler.complete(msg+" [ asyn call]");
    }
}

2.添加API类实例到 DWebView

import wendu.dsbridge.DWebView 
DWebView dwebView= (DWebView) findViewById(R.id.dwebview);
dwebView.addJavascriptObject(new JsApi(), null); 

3. 安装dsBridge

• 初始化 dsBridge

 npm方式安装初始化代码
 npm install dsbridge@3.1.3
 var dsBridge=require("dsbridge")

• 调用原生API .

var str=dsBridge.call("testSyn","testSyn");

//异步调用
dsBridge.call("testAsyn","testAsyn", function (v) {
  alert(v);
})

 

4.在Java中调用 Javascript API

dwebView.callHandler("addValue",new Object[]{3,4},new OnReturnValue<Integer>(){
    @Override
    public void onValue(Integer retValue) {
       Log.d("jsbridge","call succeed,return value is "+retValue);
    }
});

h5向原生通信

//同步调用
var str=dsBridge.call("testSyn","testSyn");

//异步调用
dsBridge.call("testAsyn","testAsyn", function (v) {
 alert(v);
})

原生向h5通信

注册同步/异步的Javascript API.

1.注册一个普通的方法

dsBridge.register('addValue',function(l,r){
    return l+r;
})
dsBridge.registerAsyn('append',function(arg1,arg2,arg3,responseCallback){
    responseCallback(arg1+" "+arg2+" "+arg3);
})

2.注册一个对象，指定一个命名空间

//namespace test for synchronous calls
dsBridge.register("test",{
 tag:"test",
 test1:function(){
   return this.tag+"1"
 },
 test2:function(){
   return this.tag+"2"
 }
})
 
//namespace test1 for asynchronous calls  
dsBridge.registerAsyn("test1",{
 tag:"test1",
 test1:function(responseCallback){
   return responseCallback(this.tag+"1")
 },
 test2:function(responseCallback){
   return responseCallback(this.tag+"2")
 }
})