JS bridge学习小结

JS bridge

• html的渲染图

  
  image.png

• 通讯图

image.png

什么是JS bridge ， 首先是 web和native之间相互通讯 这个是web 与 native进行通讯 ，
通过 jsbridge 做为沟通的桥梁 同样 native 和 web 进行通讯 也要通过 jsbridge做为沟通的桥梁
所以JS bridge 就是 js + native 的代码

• JS bridge完整调用过程

image.png

JS bridge 通讯原理

• JS构造iframe 请求

let iframe = document.createElement('iframe');
iframe.src = "jsbridge://xxx?c=123";
document.body.appendChild(iframe);

• Native拦截请求 接收js的调用

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:          (WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    // 拦截所有的webview内部的请求
    NSURL *URL = navigationAction.request.URL;

    // 如果当前的这个请求url是jsbridge开头的
    if ([[URL scheme] isEqualToString:@"jsbridge"]) {
        JSPluginSystem *jsplugin = [[JSPluginSystem alloc] init];
        [jsplugin dealWithJSAPI:URL webview:webView];

    }
    decisionHandler(WKNavigationActionPolicyAllow);
}
    

上面的代码 Native对webView进行监听 所有webView的请求都会经过这个方法
jsbridge请求都会一个安全校验

• Native调用js执行callbakck

// 执行callback
    // window.CALLBACK0(110);
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@“window.%@(110);",callback] completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"value: %@ error: %@", response, error);
}];

webView中 evaluateJavaScript方法参数是接收 一串js代码 实际上这是一个 callback

调用 window.CALLBACK0这个方法 传入 110这个参数
这段代码webView执行完之后 给H5页面回调的逻辑