码迷,mamicode.com
首页 > Web开发 > 详细

DSJribge js和native的交互

时间:2020-09-17 20:51:21      阅读:38      评论:0      收藏:0      [点我收藏+]

标签:ram   exception   rri   继承   tostring   流程   请求   集成   返回   

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();
}

  

 

DSJribge js和native的交互

标签:ram   exception   rri   继承   tostring   流程   请求   集成   返回   

原文地址:https://www.cnblogs.com/fengchuxiaodai/p/13645856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!