JsBridge源码分析

二、开源JsBridge

项目地址:https://github.com/ytuglt/JsBridge

通信的数据结构

public class Message {

    private String callbackId;  // h5接收自己发起调用的对应回调句柄
    private String responseId;  // Native发起调用,h5返回的回调句柄
    private String responseData; // Native给h5回调的数据
    private String data;   // Native与h5通信的数据
    private String handlerName; // 调用方法名
}

流程:

  1. 注入流程
    1. Native调用registerHandler将供h5调用的方法注册至messageHandlers这个HashMap<String, BridgeHandler>中,等待h5调用
    2. WebViewClient 在onPageFinished回调时,Native向h5注入WebViewJavascriptBridge.js文件
    3. js文件注入完成直接分发初始化Message
  2. Native调h5流程:webView.loadUrl
    1. 如果异步回调,根据增长id、时间戳生成CallBackId,并存储至responseCallbacks这个HashMap<String, CallBackFunction>
    2. 将data,handlerName,callBackId生成Message
    3. 将Message转Json做参数,主线程webView.loadUrl调用前端_handleMessageFromNative方法
  3. Native处理h5调用:shouldOverrideUrlLoading(String str)
    1. 如果url是yy://return/开头,则是Native调h5之后的回调,直接取对应responseCallbacks里的value回调
    2. 解析str转成Message
      1. 如果有responseId,则是Native调h5之后的回调,取对应responseCallbacks中的value执行回调后,从responseCallbacks中移除。
      2. 剩下的就是h5主动调Native:
        1. 如果有callbackId则是h5异步调用,需要回调,生成callBackFunction
        new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Message responseMsg = new Message();
                responseMsg.setResponseId(callbackId);
                responseMsg.setResponseData(data);
                queueMessage(responseMsg);
            }
        };
        
        1. 根据HandlerName从messageHandlers中找到对应Handler,执行handle方法
        void handler(String data, CallBackFunction function)
        
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容