DSJribge js和native的交互

app要重构，想着把app端native的逻辑判断全部放在前端，这样如果app万一有什么小变动或者软升级，不需要app升级，只升级前端就可以搞定，所以考虑把app中native的操作全部抽取为单个的功能，然后通过js调用native方法，同时因为有一些网络请求和加解密、ui等同步和异步的操作，所以需要js调用native时，既要支持同步，也要支持异步，在github中找了两个库，jsbridge和dsbridge，通过对比，最终选择了jsbridge，原因有两个：1，jsbridge在github的代码应该是作者同步有问题，最新版本少java文件。2，dsbridge有x5、android、ios版本；所以最终选取了dsbridge。

dsbridge集成步骤（留作备用）：

1，下载dsbridge3.0源码，把java文件和js文件拿出来

2，app新建module，把java文件进行继承和封装

3，前端写个空的htmls页面，作为dsbridge的js和我自定义js方法的桥梁，都引入html文件，注意在引入js文件时，dsjribge的js要在上面，自定义的js文件要在下面，因为htmls加载js是由上往下

4，js调用本地方法，区分同步和异步，参数为一个json字符串，通过controlType区分操作类型，controlParams为操作需要的json字符串类型的参数（controlType为后台数据库配置，前端保持和数据库同步），如果app需要修改操作步骤和操作逻辑，就可以通过controlType来修改，如果要新增加功能，就只能升级app

具体js方法：

js调用native方法，同步拿到native执行结果（一般为逻辑判断）

 //同步调用native，methodPath为navite设置的工作空间的方法名（工作空间.方法名,dsbridge封装的格式），params为js传给native的参数，包含controlType和controlMsg
 function jsCallNative4Syn(methodPath,params){
     return dsBridge.call(methodPath,params);
 }

　　

js调用native方法，通过回调异步拿到返回结果(一般为网络请求、延迟任务等耗时操作)

//异步调用native，mathodPath和params跟同步一样，callback为收到native异步执行后的返回结果
function jsCallNative4Asyn(methodPath,params,callback){
    dsBridge.call(methodPath,params,callback);
}

　　

native调用js方法，js需要先进行注册

//注册native调用js的监听，functionName为js注册的标识，callback为通知native端js执行完毕后的结果的回调
function jsRegisterNative(functionName,callback){
    dsBridge.register(functionName,callback)
}

　　

js自定义的方法

//异步调用java
function getTellerPhoto() {
    jsCallNative4Asyn("Api.apiAsyn", JSON.stringify({
        "controlType": "writeFile",
        "controlMsg": {"fileName": "test.txt", "fileText": "2222222"}
    }), function (jsonStr) {
        alert(jsonStr)
    });
}
//同步调用java
function connect2Login() {
    var returnStr = jsCallNative4Syn("Api.apiSyn", JSON.stringify({
        "controlType": "writeFile",
        "controlMsg": {"fileName": "test.txt", "fileText": "2222222"}
    }));
    alert(returnStr);
}
//注册java调用的通知
jsRegisterNative('jsFunction', function (jsonStr) {
    var j = JSON.parse(jsonStr);
     var controlType = j.controlType;
     var controlMsg = j.controlMsg;
     var jj = JSON.parse(controlMsg);
     var type = jj.type;
     var msg = jj.msg;
    alert("controlType = "+controlType+",controlMsg = "+controlMsg+",type = "+type+",msg = "+msg);
    return jsonStr;
})

　　

　　

具体native流程：

xml中添加webview控件

//xml中添加DSJribge的webview控件
<com.test.jsbridge.dsbridge.DWebView
    android:id="@+id/dWebView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

　　

定义被js调用的api

public interface ApiSyn {
    /**
     * 同步调用
     * @param input json格式的参数
     */
    @JavascriptInterface
    void apiSyn(Object input);
}
public interface ApiAsyn {
    /**
     * 异步调用
     * @param input json格式的参数
     * @param handler   native给js的回调通知
     */
    @JavascriptInterface
    void apiAsyn(Object input, CompletionHandler handler);
}

　　

public class Api implements ApiAsyn, ApiSyn {
    final String TAG = "Api";
    @Override
    public void apiSyn(Object input) {
        Log.d(TAG,"js 传入的参数为 ："+String.valueOf(input));
    }
    @Override
    public void apiAsyn(Object input, CompletionHandler handler) {
        Log.d(TAG,"js 传入的参数为 ："+String.valueOf(input));
        try {
            Thread.sleep(2000);
            handler.complete("app收到js的入参");
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

　　

actvity中给webview添加JavaScript工作空间

 mDWebView.addJavascriptObject(new Api(),"Api");

　　

java调用js方法

JSONObject jsonObject = new JSONObject();
JSONObject jsonObject1 = new JSONObject();
try {
    jsonObject.put("controlType","java");
    jsonObject1.put("type","1");
    jsonObject1.put("msg","2");
    jsonObject.put("controlMsg",jsonObject1.toString());
    String s = jsonObject.toString();
    LogUtils.dTag(TAG,"ssss = "+s);
    JSBridge.callJsFunction(mDWebView,"jsFunction", new Object[]{s}, new OnReturnValue() {
        @Override
        public void onValue(Object retValue) {
            try {
                LogUtils.dTag(TAG,Convert.toJson(retValue));
            } catch (Exception e) {
                LogUtils.eTag(TAG,retValue);
            }
        }
    });
} catch (JSONException e) {
    e.printStackTrace();
}