Hybrid开发——Native与H5的通信框架JSBridge实现(2)

特别说明


首先说明本文并非原创,原文在此:https://www.cnblogs.com/dailc/p/5931324.html#callback-format。相关代码会放在https://github.com/Samuel2306/JSBridge


概述


本文介绍Android原生部分的功能开发,真正实现与JSBrige的对接。由于笔者能力有限,IOS部分就留给小伙伴自己去实现。不过以笔者的理解,IOS部分的缺失不会影响小伙伴对JSBridge的实现逻辑的理解。


功能结构图


整体功能图


第一步:定义一个API类,作为Native提供给H5的API集合(所有API都是静态方法)


/**

* 自定义原生API

* webLoader:当前activity实例

* wv:当前webview实例

* param:参数,JSON对象

* callback:Callback类实例,真正调用H5的实例

*/

// 显示H5返回的内容到TextView组件            

public static void changeContent(final Activity webLoader, WebView wv, JSONObject param,final Callback callback) {

    final String origin = param.optString("origin");  

    final String content = param.optString("content"); 

    TextView textView = webLoader.findViewById(R.id.textView); 

    textView.setText(origin +":" + content);

}

public static void testNativeFunc(final Activity webLoader, WebView wv, JSONObject param, final Callback callback) {

    // 调用一个静态方法,将H5传入的信息写入到TextView组件

    BridgeImpl.changeContent(webLoader, wv, param, callback);

    wv.post(new Runnable() {

        public void run() {

            //  封装好业务参数,并将其传递给callback对象

            try {

                JSONObject object =new JSONObject();

                object.put("origin","native");

                object.put("content","请把Native返回的信息在H5页面中展示出来");

                callback.apply(JSBridge.getSuccessJSONObject(object));

            }catch (JSONException e) {

                e.printStackTrace();

            }

        }        

    });

}


第二步:实现一个Callback类(真正调用H5方法的功能类)


该类的一个作用有两个:标准化返回数据 & 调用H5方法。整个类有两个核心方法:apply方法(用来执行H5的回调函数)和call方法(用来主动调用h5方法)。

因为这两个方法的实现过程大致相同,我们就以apply方法为例,具体实现如下:

/**

* 执行H5的回调函数

* @param jsonObject

*/

public void apply(JSONObject jsonObject) {


    // 第一步:标准化返回结果(一个包含responseId和responseData属性的对象)

    JSONObject object =new JSONObject();

    try {

        object.put("responseId",mPort);

        object.putOpt("responseData", jsonObject);

    }catch (JSONException e) {

        e.printStackTrace();

    }


    //  第二步:生成调用H5方法的字符串

    final String execJs = String.format(CALLBACK_JS_FORMAT, String.valueOf(object));


    // 第三步:执行H5回调

    if (mWebViewRef !=null &&mWebViewRef.get() !=null ) {

        //  如果activity已经关闭则不回调
        ....................


        // mHandler是一个消息队列管理器,post方法用来将执行H5回调的操作放入到消息队列中

        mHandler.post(new Runnable() {

            @Override

            public void run() {

                // 执行H5回调

                mWebViewRef.get().loadUrl(execJs);

            }

        });

    }

}


第三步:实现一个JSBridge类(主要功能:三个属性和三个方法)

三个属性

private static final StringEJS_SCHEME ="customjsbridge";  // 自定义的schema名称,这个名称必须与JSBridge里面定义的schema名称一样

private static Map>exposedMethods =new HashMap<>();    // native暴露给h5的方法全部定义在这个map里面

private static WebView webView;    // 记录当前的WebView对象

三个方法

register方法:将API集合注册到exposedMethods这个map中;

callJava方法:响应H5的方法;

callH5方法:用来主动调用H5中的方法;


接下来我们先来看看register方法:

/**

  * 将api注册到缓存中

  * @param exposedName: 某一类API集合的名称

  * @param clazz: 这是一个类对象(不是实例对象),java中每创建一个类,在内存中就会有一个对应的类对象

*/

public static void register(String exposedName, Class clazz) {

    if (!exposedMethods.containsKey(exposedName)) {

        try {

            exposedMethods.put(exposedName, getAllMethod(clazz));

        }catch (Exception e) {

            e.printStackTrace();

        }

    }

}

getAllMethod方法是定义在JSBridge类中的一个私有方法,用来从类对象中获取满足条件的方法集合。


看完了register方法我们再来看看callJava方法,这方法在WebViewClient的shouldOverrideUrlLoading中进行调用,用来响应H5:

/** *

* @param webLoader:当前activity

* @param webView:webview实例对象

* @param uriString:h5提交的url

* @return

*/

// 原生响应H5调用的方法

public static String callJava(Activity webLoader, WebView webView, String uriString) {

    .......  // 解析h5传过来的url

    if (exposedMethods.containsKey(apiName)) {

        HashMap methodHashMap =exposedMethods.get(apiName);

        if (methodHashMap !=null && methodHashMap.size() !=0 && methodHashMap.containsKey(methodName)) {

            Method method = methodHashMap.get(methodName);

            if (method !=null) {

                try {

                    // invoke方法的作用就是为方法先指定上下文,然后调用对应的方法。

                    // invoke的第一个参数就是被指定的上下文

                    method.invoke(null, webLoader, webView, new JSONObject(param),new Callback(webView, port));

                }catch (Exception e) {

                    e.printStackTrace();

                }

            }

        }

    }else {

        //未注册API

        error = apiName +"未注册";

        new Callback(webView, port).apply(getFailJSONObject(error));

        return error;

    }

    return null;

}


最后是callH5方法,这方法用来让native主动调用h5的方法:

// 原生调用H5的方法

private static void callH5(String handlerName, JSONObject jsonObject){

    new Callback(JSBridge.webView, null).call(handlerName,  jsonObject);

}


结语


自此,我们已经Android实现的核心部分进行介绍,具体细节请查看git项目代码。

推荐阅读更多精彩内容