DSBridge-Android 源码分析

作者: 赤兔欢 | 来源:发表于2020-03-26 12:06 被阅读0次

一 Android WebView Js 原生API

Android WebView 提供了Js 和 WebView相互调用的接口，js 调用Android 代码通过

@JavascriptInterface 注解

WebView.addJavascriptInterface(Object object, String name) 方法

实现JS 和java 对象的映射。

同样 WebView 也提供了 java 调用Js 代码的机制。通过以下两个方法:

WebView.evaluateJavascript(String script, ValueCallback<String> resultCallback);

WebView.loadUrl(String script); Android 4.4 以下版本使用

private void evaluateJavascript(String script) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.evaluateJavascript(String script, ValueCallback<String> resultCallback);
    } else {
        WebView.loadUrl(String script);
    }
}

二 DSBridge 分析

github 上提供了一个Js Bridage, DSBridge-Android，分析下实现原理：

一共三个java 文件：

文件	功能
DWebView.java	继承WebView 封装了Js调用
CompletionHandler.java	处理异步请求使用
OnReturnValue.java	返回值接口

DWebView 类继承自 WebView 主要包括这几个函数

init 在WebView 的构造函数中调动，完成一些WebView 的设置。

injectJs

evaluateJavascript(final String script);

1. init

init 函数中主要有两个部分处理一个是注册一个 WebChromeClient，一个是调用addJavascriptInterface 接口注册一个 Js 调用Java的通用api

super.setWebChromeClient(mWebChromeClient); 在mWebChromeClient 的回调中调用 injectJs 完成Js 注入

super.addJavascriptInterface(new Object(){}, BRIDGE_NAME)，这是DSBridge的核心功能，向 Js 页面注册一个通用的Js 对象，这个对象有一个 call 方法，通过这个call 方法实现对其它 Android Api 的调用，下面主要分析这个方法。

2. js 调用方式

在 js 页面调用 Andoid 代码时通过：dsBridge 为java evaluateJavascript 调用是的Object 在Js的映射对象，然后调用这个对象的call 方法：

// init dsBridge
<script src="https://unpkg.com/dsbridge/dist/dsbridge.js"> </script>
var dsBridge=require("dsbridge")

//Call synchronously 
var str=dsBridge.call("testSyn", {msg: "testSyn"});

//Call asynchronously
dsBridge.call("testAsyn", {msg: "testAsyn"}, function (v) {
  alert(v);
})

3. Java 注册 js Api

java 代码注册，js 调用的函数都封装在 JsApi 这个对象中，注意是DWebView 的 setJavascriptInterface，不是原生WebView .

DWebView.setJavascriptInterface(new JsApi());

public class JsApi{

    @JavascriptInterface
    public void testAsyn(JSONObject jsonObject, CompletionHandler handler) throws JSONException {
        handler.complete(jsonObject.getString("msg")+" [ asyn call]");
    }
}

4. call 函数

call 需要使用 JavascriptInterface 注解注释，Js 中的三个参数被到这里被简化为两个参数，原因在Js 代码中分析。

methodName java 方法名

args 参数，注意String 格式其实是Json 字符串

具体过程看代码注释：

@JavascriptInterface
public String call(String methodName, String args) {
        String error = "Js bridge method called, but there is " +
            "not a JavascriptInterface object, please set JavascriptInterface object first!";
       
        // 首先检查是否注册了Js api 相关的对象    
        if (jsb == null) {
            Log.e("SynWebView", error);
            return "";
        }

        // 获取注册的Js api 对象的Class 对象
        Class<?> cls = jsb.getClass();
        try {
            Method method;
            // 异步标记
            boolean asyn = false;    
            // String 类型的参数转化为  Json 对象
            JSONObject arg = new JSONObject(args);
            String callback = "";
            try {
                // 检查 json 对象中是否有_dscbstub 这个Key,如果有表示有回调Js的函数，是一个异步调用，
                // 然后移除，那么json对象中保存的都是参数
                // 有了对象，知道了对象的方法的String，通过反射获取这个方法。通过反射的参数可知
                // 方法的函数签名为：xxxMethod(JSONObject object, CompletionHandler handler);
                callback = arg.getString("_dscbstub");
                arg.remove("_dscbstub");
                method = cls.getDeclaredMethod(methodName,
                        new Class[]{JSONObject.class, CompletionHandler.class});
                asyn = true;
            } catch (Exception e) {
                method = cls.getDeclaredMethod(methodName, new Class[]{JSONObject.class});
            }

            // 错误检查
            if (method == null) {
                error = "ERROR! \n Not find method \"" + methodName + "\" implementation! ";
                Log.e("SynWebView", error);
                evaluateJavascript(String.format("alert(decodeURIComponent(\"%s\"})", error));
                return "";
            }

            // Js 调用的API 需要使用 @JavascriptInterface 注解，
            // 在4.4 以前的平台上有Js 安全漏洞，通过这个注解检查是否合法的API.
            // call 函数已经用 @JavascriptInterface 标注，是一个合法的API。jsp 对象由于绕过了WebView
            // 的 @JavascriptInterface 注解检查，需要手动校验。
            JavascriptInterface annotation = method.getAnnotation(JavascriptInterface.class);
            if (annotation != null) {
                Object ret;
                // 设置方法为可访问的
                method.setAccessible(true);
                if (asyn) {
                    // 异步调用, 讲异步调用的逻辑封装在CompletionHandler 中，
                    // 使用闭包的方式实现callback.
                    final String cb = callback;
                    ret = method.invoke(jsb, arg, new CompletionHandler() {
                        、、、

                        //  可以再method 方法中调用这个函数，实现异步。
                        private void complete(String retValue,boolean complete) {
                            try {
                                // retValue 为 method  执行的结果，complete 可以控制多次回调。
                                // 将callback 和参数组合为 javascript 语句，然后通过evaluateJavascript 
                                // 方法调用js 执行
                                if (retValue == null) retValue = "";
                                retValue = URLEncoder.encode(retValue, "UTF-8").replaceAll("\\+", "%20");
                                String script = String.format("%s(decodeURIComponent(\"%s\"));", cb, retValue);
                                // 将callback 方法从Html 的window 对象删除，原因在js 代码分析
                                if(complete) {
                                    script += "delete window."+cb;
                                }
                                evaluateJavascript(script);
                            } catch (UnsupportedEncodingException e) {
                                e.printStackTrace();
                            }
                        }
                    });
                } else {
                    // 同步调用
                    ret = method.invoke(jsb, arg);
                }
                if (ret == null) {
                    ret = "";
                }
                
                // 返回结果
                return ret.toString();
            } else {
                error = "Method " + methodName + " is not invoked, since  " +
                    "it is not declared with JavascriptInterface annotation! ";
                evaluateJavascript(String.format("alert('ERROR \\n%s')", error));
                Log.e("SynWebView", error);
            }
        } catch (Exception e) {
            evaluateJavascript(String.format("alert('ERROR! \\nCall failed：Function does not exist or parameter is invalid［%s］')", e.getMessage()));
            e.printStackTrace();
        }
        return "";
    }
    
    @Keep
    @JavascriptInterface
    public void returnValue(int id, String value) {
        OnReturnValue handler = handlerMap.get(id);
        if (handler != null) {
            handler.onValue(value);
            handlerMap.remove(id);
        }
    }
}, BRIDGE_NAME);

5. injectJs 注入js 代码

在WebChromeClient 的回调中，会调用injectJs 方法注入js，onProgressChanged onReceivedTitle 保证在js 代码运行前 js注入完成

private WebChromeClient mWebChromeClient = new WebChromeClient() {

        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            injectJs();
            
        }

        @Override
        public void onReceivedTitle(WebView view, String title) {
            injectJs();
        }
}

    private void injectJs() {
        evaluateJavascript("function getJsBridge(){window._dsf=window._dsf||{};return{call:function(b,a,c){\"function\"==typeof a&&(c=a,a={});if(\"function\"==typeof c){window.dscb=window.dscb||0;var d=\"dscb\"+window.dscb++;window[d]=c;a._dscbstub=d}a=JSON.stringify(a||{});return window._dswk?prompt(window._dswk+b,a):\"function\"==typeof _dsbridge?_dsbridge(b,a):_dsbridge.call(b,a)},register:function(b,a){\"object\"==typeof b?Object.assign(window._dsf,b):window._dsf[b]=a}}}dsBridge=getJsBridge();");
    }

6. javascript 代码注入分析

injectJs 调用的Js 代码如下：

function getJsBridge() {
    // window 对象的 _dsf 赋值， 如果没有定义过， 则定义为 {}；
    // dsf 域用来保存 java 调用js 的function.
    window._dsf = window._dsf || {};
    
    // 返回 json 一个匿名json对象, json 对象包含两个function：call 和 register。
    return {
        // call function 包含三个参数， 方法名， 参数，回调函数，
        call: function (method, args, cb) {
            var ret = "";
            // 检查第二个参数类型是否为 function , 如果为function 则表示为回调函数
            if (typeof args == "function") {
                cb = args;
                args = {}
            }
            
            // 这一步处理很有技巧，在设置回调函数的时候，回调函数可能为匿名函数，
            // 在这里通过window 对象的一个域保存，避免垃圾回收和Java 回调的时候能够找到。
            // args 对象中 回调函数的Key 被设置为"_dscbstub"， java 中是根据这个名字找到的callback
            // 也解释了java  中的call API 为两个参数， Js 中为三个参数的原因。
            if (typeof cb == "function") {
                window.dscb = window.dscb || 0;
                var cbName = "dscb" + window.dscb++;
                window[cbName] = cb;
                args["_dscbstub"] = cbName
            }
            args = JSON.stringify(args || {});
            if (window._dswk) {
                // debug 分支， window 的  _dswk 域决定
                ret = prompt(window._dswk + method, args)
            } else {
                // _dsbridge 对象为java 中调
                addJavascriptInterface(new Object(){}, BRIDGE_NAME) 映射的JS 对象
                if (typeof _dsbridge == "function") {
                    ret = _dsbridge(method, args)
                } else {
                    // 我们的代码走这里
                    ret = _dsbridge.call(method, args)
                }
            }
            return ret
        }, register: function (name, fun) {
            if (typeof name == "object") {
                Object.assign(window._dsf, name)
            } else {
                window._dsf[name] = fun
            }
        }
    }
}

// 最后把这个匿名对象挂在 window dsBridage 域下。
window.dsBridge = getJsBridge();

7 evaluateJavascript

DWebView 对 evaluateJavascript 做了两次封装，主要解决两个问题：

在非主线程中调用的问题, 通过handler post 到主线程中处理。

4.4 以前的版本兼容的问题。

    public void evaluateJavascript(final String script) {
        if (Looper.getMainLooper() == Looper.myLooper()) {
            _evaluateJavascript(script);
        } else {
            Message msg=new Message();
            msg.what=EXEC_SCRIPT;
            msg.obj=script;
            mainThreadHandler.sendMessage(msg);
        }
    }
    
    private void _evaluateJavascript(String script) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            DWebView.super.evaluateJavascript(script, null);
        } else {
            loadUrl("javascript:" + script);
        }
    }

8 java 调用js

android 的原生方式中java调用js 的接口已经很完善了。DSBridge 使用callHandler。js function 在调用前需要挂到
window._dsf 域下，参考 js代码的 register 函数。

//Register javascript function for Native invocation
 dsBridge.register('addValue',function(l,r){
     return l+r;
 })

java 中调用前指明window._dsf 下的function。对代码做了一个约束。

DWebView.callHandler("addValue",new Object[]{1,"hello"},new OnReturnValue(){
       @Override
       public void onValue(String retValue) {
          Log.d("jsbridge","call succeed,return value is "+retValue);
       }
})


public void callHandler(String method, Object[] args, final OnReturnValue handler) {
        if (args == null) args = new Object[0];
        String arg = new JSONArray(Arrays.asList(args)).toString();
        String script = String.format("(window._dsf.%s||window.%s).apply(window._dsf||window,%s)", method,method, arg);
        if(handler!=null){
            script = String.format("%s.returnValue(%d,%s)",BRIDGE_NAME,callID, script);
            handlerMap.put(callID++, handler);
        }
        evaluateJavascript(script);
}

DSBridge-Android 源码分析

一 Android WebView Js 原生API

二 DSBridge 分析

1. init

2. js 调用方式

3. Java 注册 js Api

4. call 函数

5. injectJs 注入js 代码

6. javascript 代码注入分析

7 evaluateJavascript

8 java 调用js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读